These are chat archives for FreeCodeCamp/HelpFrontEnd

1st
Jun 2017
firas omrane
@firou1925
Jun 01 2017 00:40
is anyone here!!
Koderkid1936
@Koderkid1936
Jun 01 2017 00:43
if I know the concepts of OOP and know the basics of Java conditions/loops arrays etc for me to be able to answer basic exercise questions, how long would it take to build a simple tic tac toe game?
firas omrane
@firou1925
Jun 01 2017 00:44
personally I dont know
Gulsvi
@gulsvi
Jun 01 2017 00:45
@Koderkid1936 By the time we get to the tic-tac-toe project, they expect it to take about 40 hours. We know more than the basics at that point.
Hours estimated by topic are listed here: https://www.freecodecamp.com/map
@firou1925 What's the question?
firas omrane
@firou1925
Jun 01 2017 00:46
one minute
@SkyC0der I cant fix the grid division with bootstrap and the background image is not shown full
Gulsvi
@gulsvi
Jun 01 2017 00:50
@firou1925 You will need to add Bootstrap to your project to use the grid. The background will repeat by default. You can use the background-repeat property to modify that behavior.
https://www.w3schools.com/cssref/pr_background-repeat.asp
https://www.bootstrapcdn.com/
firas omrane
@firou1925
Jun 01 2017 00:51
I added it in the head
Gulsvi
@gulsvi
Jun 01 2017 00:52
@firou1925 This is what I see in the <head>
  <head>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <title>Weather application</title>
  </head>
That's font awesome, not Bootstrap.
firas omrane
@firou1925
Jun 01 2017 00:53
ah ok
firas omrane
@firou1925
Jun 01 2017 00:53
got it
fdemaa
@fdemaa
Jun 01 2017 00:56
anyone know why my photo is not appearing?
https://codepen.io/fdemaa/pen/oWOMMX?editors=1100
firas omrane
@firou1925
Jun 01 2017 00:56
@SkyC0der thanku
CamperBot
@camperbot
Jun 01 2017 00:56
firou1925 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1566 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Jun 01 2017 00:59
@fdemaa Which photo?
Brian
@Cornielle
Jun 01 2017 01:01
Hello Guys
firas omrane
@firou1925
Jun 01 2017 01:02
hello
Brian
@Cornielle
Jun 01 2017 01:02
how its going @firou1925
@fdemaa hello , let me see
Jose Mendoza
@jmendozav
Jun 01 2017 01:03
@fdemaa I can see the whole thing
Gulsvi
@gulsvi
Jun 01 2017 01:03
Welcome, @Cornielle
Brian
@Cornielle
Jun 01 2017 01:03
@SkyC0der thx
CamperBot
@camperbot
Jun 01 2017 01:03
cornielle sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1567 | @skyc0der |http://www.freecodecamp.com/skyc0der
firas omrane
@firou1925
Jun 01 2017 01:04
good I am really happy finding help whenever I need
fdemaa
@fdemaa
Jun 01 2017 01:04
The photo that i put on the aboutme
section
to the right of my bio
Gulsvi
@gulsvi
Jun 01 2017 01:04
The picture of you?
fdemaa
@fdemaa
Jun 01 2017 01:04
Yes
Gulsvi
@gulsvi
Jun 01 2017 01:04
I see it fine
fdemaa
@fdemaa
Jun 01 2017 01:05
i have like a little empty rectangle
:worried:
weird
Gulsvi
@gulsvi
Jun 01 2017 01:06
I'm not sure what to say...
Brian
@Cornielle
Jun 01 2017 01:06
@fdemaa i cant see your photo in the link of your code , doesnt work
Gulsvi
@gulsvi
Jun 01 2017 01:06
Only one picture, right? You wearing a tank top with a wave on it
fdemaa
@fdemaa
Jun 01 2017 01:06
yeah
that one
why is not working ?
Gulsvi
@gulsvi
Jun 01 2017 01:07
ni idea...
maybe try a different image host?
fdemaa
@fdemaa
Jun 01 2017 01:07
i will put another img and try
Gulsvi
@gulsvi
Jun 01 2017 01:08
nvm, if your Bob marley tribute works, you profile picture should work too
Brian
@Cornielle
Jun 01 2017 01:08
probably the reason is because you need to make a click for open the img
when you go to the link you need to do a click and them open the img
just add that img between the folder that bob marley img is and done
fdemaa
@fdemaa
Jun 01 2017 01:09
@Cornielle yeah i think its because of that, i will try antoher img; anyway i dont have any "serious photos" haha
okey i will try that
Brian
@Cornielle
Jun 01 2017 01:10
@fdemaa jajaja no probem
problem
fdemaa
@fdemaa
Jun 01 2017 01:17
it works now
i just save it as png
insted of jpg
ZaynMalloc
@ZaynMalloc
Jun 01 2017 01:21
I need help. I'm trying to center the image so I could complete the one of the test. https://codepen.io/zachgacer/pen/KmOVbG
Brian
@Cornielle
Jun 01 2017 01:21
Good @fdemaa
fdemaa
@fdemaa
Jun 01 2017 01:22
center-block
?
ZaynMalloc
@ZaynMalloc
Jun 01 2017 01:24
@fdemaa It worked thanks
CamperBot
@camperbot
Jun 01 2017 01:24
zaynmalloc sends brownie points to @fdemaa :sparkles: :thumbsup: :sparkles:
:cookie: 128 | @fdemaa |http://www.freecodecamp.com/fdemaa
fdemaa
@fdemaa
Jun 01 2017 01:25
:+1:
Pedro Juan
@PedroJuan91
Jun 01 2017 01:27
hi guys... can you see the error of my code... hehehe newbie here...

var dataInfo = function(){
this.temp;
this.country;
this.weather;
if (weather){
this.temp= weather.currently.temperature;
this.country = weather.timezone;
this.weather = weather.icon;
}
}

inquireData = new dataInfo();
displayTemp.innerHTML = inquireData.temp;
displayPlace.innerHTML = inquireData.country;
displayWeather.innerHTML = inquireData.weather;

i get a result of undefine
Brian
@Cornielle
Jun 01 2017 01:29
@fdemaa how you write that? center-block, what kind of tag or property of css is that xd
ZaynMalloc
@ZaynMalloc
Jun 01 2017 01:33
@Cornielle I used display:block. Basically, I made the image into block of its own and apply the margin properties to it. https://www.w3.org/Style/Examples/007/center.en.html
Brian
@Cornielle
Jun 01 2017 01:37
@ZaynMalloc ok , nice i know about that but i was confuse because he said center-block xd
bitcoinabdi
@bitcoinabdi
Jun 01 2017 01:56
good evening i have my wikipedia app done someone please look at my background am having trouble resizing it .https://codepen.io/abdihakim/full/BRXyGJ/
the ball does not appear in smaller screen
any ideas
Tom
@moT01
Jun 01 2017 01:58
@firou1925 looks like its workinhg
Nikki L.R.
@nikkilr88
Jun 01 2017 01:58
Could anyone tell my why fetch() isn't working here? https://ide.c9.io/nicolesattler/react-test
Tom
@moT01
Jun 01 2017 01:58
not sure if all the user stories are done or not
Nikki L.R.
@nikkilr88
Jun 01 2017 01:59

Could anyone tell my why fetch() isn't working here? https://ide.c9.io/nicolesattler/react-test

I have it running in CodePen just fine.

Tom
@moT01
Jun 01 2017 01:59
could use some more info, ...city name, ...a conditions or something @firou1925
@bitcoinabdi not sure exactly what your issue it, ...but the background is based on vh
firas omrane
@firou1925
Jun 01 2017 02:02
@moT01 ok
Tom
@moT01
Jun 01 2017 02:02
maybe try vmin ? so it stays in the window
bitcoinabdi
@bitcoinabdi
Jun 01 2017 02:02
@moT01 VH?
Gulsvi
@gulsvi
Jun 01 2017 02:02
@bitcoinabdi Add this to your body's CSS and the background-image will "resize" better:
  background-position: center center;
bitcoinabdi
@bitcoinabdi
Jun 01 2017 02:03
@SkyC0der thanks
CamperBot
@camperbot
Jun 01 2017 02:03
bitcoinabdi sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1568 | @skyc0der |http://www.freecodecamp.com/skyc0der
fdemaa
@fdemaa
Jun 01 2017 02:03
@Cornielle its a bootstrap class that i used, when i put the bootstrap class "image- responsive", if i want to align to the center i have to use "center-block", to center those images
bitcoinabdi
@bitcoinabdi
Jun 01 2017 02:03
@moT01 thanks
CamperBot
@camperbot
Jun 01 2017 02:03
bitcoinabdi sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 677 | @mot01 |http://www.freecodecamp.com/mot01
Gulsvi
@gulsvi
Jun 01 2017 02:04
@bitcoinabdi I think your Wikipedia logo image would look better if you used a max-width instead of a width in percentage. It gets very small on mobile screens the way you have it now. For example:
.heading img{
  border-radius:10px;
  max-width: 50px;
}
fdemaa
@fdemaa
Jun 01 2017 02:04
@SkyC0der ski what do you think about the background responsive ? Its decent ?
Also i dont kwno why i had a space between the background and the navbar ?
https://codepen.io/fdemaa/pen/oWOMMX?editors=0100
Gulsvi
@gulsvi
Jun 01 2017 02:06
@fdemaa Nice work - very decent :)
To fix the space, move this from your body {} padding-top: 70px; to your .homesection
canapacoder
@canapacoder
Jun 01 2017 02:08
quick question on my first project of building a tribute page, what does it mean fulfill user stories for number 2
Gulsvi
@gulsvi
Jun 01 2017 02:19
@canapacoder Think of user stories as requirements from the perspective of someone visiting your Tribute Page when it is complete. When I visit your tribute page on the web:
  • I can view a tribute page with an image and text.
  • I can click on a link that will take me to an external website with further information on the topic.
So, at a basic level, your tribute page must have some text, an image, and a link to an external website with more info on the person you decide to tribute.
Amit Patel
@AmitP88
Jun 01 2017 02:21
hey guys, I'm nearly done with my portfolio site and just wanted to see what you guys think: https://amitp88.github.io/New-Portfolio/ I know there are better ways to do the portfolio section for my projects, but I kinda like the way it's laid out (tired of using slideshows lol)
firas omrane
@firou1925
Jun 01 2017 02:23
Dillon Orr
@dillorr
Jun 01 2017 02:25
Sorry for the probably simple problem, but I'm not sure why i can't add a second <div> element after my navigation bar https://codepen.io/dillorr/pen/aWxOYK
<div>
<h1>
hello
</h1>
</div>
this follows my navBar div
@AmitP88 I really like your portfolio! very clean and crisp. Only suggestion i have style wise is perhaps making the contact me section display horizontal, but thats just a personal opinion
Amit Patel
@AmitP88
Jun 01 2017 02:27
@dillorr oh yeah, you mean for larger screensizes right?
@dillorr and thanks btw! :D
CamperBot
@camperbot
Jun 01 2017 02:28
amitp88 sends brownie points to @dillorr :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @dillorr |http://www.freecodecamp.com/dillorr
Dillon Orr
@dillorr
Jun 01 2017 02:28
right! I'm on a desktop, and it seemed kind of bare around the list
Gulsvi
@gulsvi
Jun 01 2017 02:28
@dillorr You have white text on a white background :)
body{
  font-family: 'Raleway', sans-serif;
  color: black;
  padding-top: 30px;
}
Dillon Orr
@dillorr
Jun 01 2017 02:29
well would you look at that
Gulsvi
@gulsvi
Jun 01 2017 02:29
Add some padding it to push it down below your navbar
And give your navbar a z-index so stuff stays behind it
Dillon Orr
@dillorr
Jun 01 2017 02:29
thanks @SkyC0der !
CamperBot
@camperbot
Jun 01 2017 02:29
dillorr sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1569 | @skyc0der |http://www.freecodecamp.com/skyc0der
Amit Patel
@AmitP88
Jun 01 2017 02:29
@dillorr for sure, I'll see if I can break the list into two columns only for laptop/desktop screens. I'm hoping I can get this portfolio site done by early tomorrow so I can start applying for junior positions asap lol
Gulsvi
@gulsvi
Jun 01 2017 02:30
No problem! I like the easy questions
@AmitP88 This one has a similar feel to what you're doing - would be nice to move your sections over the first header image you have: https://vickylai.io/
The portfolio images could use some more padding/margins between them - they are a bit big in my opinion, but overall great work.
Dillon Orr
@dillorr
Jun 01 2017 02:32
@AmitP88 good luck with the rest of your project, and good luck with the job hunt
fdemaa
@fdemaa
Jun 01 2017 02:32
@SkyC0der thanks sky! one last thing that is bother me is that when i rezie the browser to the range of xs to md i have a scroll bar on the bottom :
CamperBot
@camperbot
Jun 01 2017 02:32
fdemaa sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1570 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Jun 01 2017 02:33
@fdemaa This trick helps me debug those issues - add this to your CSS:
* {
  border: 1px solid black;
}
It will put a border around everything and show you what element is going off the page.
fdemaa
@fdemaa
Jun 01 2017 02:34
Ah thats nice
!!
thanks
that * is like a selector for all things ?
Amit Patel
@AmitP88
Jun 01 2017 02:34
@SkyC0der yeah, I had a feeling the portfolio images were a bit claustrophobic lol. also, what do you mean by moving the sections over the first header image? I'm not sure if I can do that since the image in the 2nd section is also parallax
@dillorr thanks bro! :D
CamperBot
@camperbot
Jun 01 2017 02:34
amitp88 sends brownie points to @dillorr :sparkles: :thumbsup: :sparkles:
:warning: amitp88 already gave dillorr points
Gulsvi
@gulsvi
Jun 01 2017 02:37
@AmitP88 Hmmm, I guess yours is similar in that regard. I think she has so much more contrast, it jumped out at me as a little more 'parallaxy' I guess :p
Amit Patel
@AmitP88
Jun 01 2017 02:38
@SkyC0der lol she does use a lot of white
@SkyC0der I tried making my site like that once and all that white hurt my eyes haha
Gulsvi
@gulsvi
Jun 01 2017 02:38
I think I would go darker for my portfolio for sure :) @AmitP88
This one is fun: http://jakealbaugh.com/
Amit Patel
@AmitP88
Jun 01 2017 02:40
@SkyC0der oh that is crazy! damn, I wish I could do that haha. that guy is definitely experienced
Gulsvi
@gulsvi
Jun 01 2017 02:40
Yeah, that guy has some talent lol
Amit Patel
@AmitP88
Jun 01 2017 02:41
@SkyC0der lol I always have to google what I want to do if I want to incorporate css animations
Gulsvi
@gulsvi
Jun 01 2017 02:41
This one is great too: http://getcoleman.com/
Very simple, nice slider, and advertises what he does
Amit Patel
@AmitP88
Jun 01 2017 02:43
lmao that's wacky as hell
Josh Beasley
@joshbeasley
Jun 01 2017 03:00
I'm having some trouble setting up the navbar for my portfolio page. I want to pull some of the pills to the right but the class isn't working.Any ideas? https://codepen.io/joshbeasley/pen/ybddJV
Adam
@adamakers
Jun 01 2017 03:02

quick question on prototypes...
Lets say I have this code:

function Person(saying) {
  this.saying = saying;
  this.tacos = 'taco express';
  this.me = false;
}

Person.prototype.talk = function() {
  console.log('I say: ' + this.saying);
}

console.log(Person.prototype);

it returns the Person function object, but without any of the properties, just the method. Anyone know why?

mboesiger90
@mboesiger90
Jun 01 2017 03:14
help I am stuck with the random quote machine. It does not generate a code with this:

$(document).ready(function(){
$.ajax({
type: 'GET',
dataType: 'json',
url: '/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
success:function(data){
$(".quote").html(data.qouteText + "<br>" + data.qouteAuthor)
}
});
$("#getQoute").on("click", function (){

$.ajax({
type: 'GET',
dataType: 'json',
url: '/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
success:function(data){
$(".quote").html(data.qouteText + "<br>" + data.qouteAuthor)
}
});
cache: false;
});
});

ZaynMalloc
@ZaynMalloc
Jun 01 2017 03:19
@adamakers I think the problem might be that you did not create a new person object.
fdemaa
@fdemaa
Jun 01 2017 03:20
using negative margins is not a good solutions right ? xd
ZaynMalloc
@ZaynMalloc
Jun 01 2017 03:20

@adamakers function Person(saying) {
this.saying = saying;
this.tacos = 'taco express';
this.me = false;
}

Person.prototype.talk = function() {
console.log('I say: ' + this.saying);
}

var newPerson = new Person('Hello')

console.log(newPerson.talk());

Dillon Orr
@dillorr
Jun 01 2017 03:21
What's the best way to add a headshot to my portfolio page? i have an image hosted on google images but none of the links work
I can't get a direct link to the image
had the same issue with imgur
Gulsvi
@gulsvi
Jun 01 2017 03:23
@joshbeasley This section of the Bootstrap docs talks about aligning your nav components: https://v4-alpha.getbootstrap.com/components/navs/#horizontal-alignment
Adam
@adamakers
Jun 01 2017 03:24
@ZaynMalloc it does similar thing here:
function Person(name, gender) {
  this.name = 5;
  this.gender = 5;
}
Person.prototype.lastname = 'marsh';
Person.prototype.introduce = function() {
  console.log('Hi my name is ' + this.name + ' and I am a ' + this.gender);
}

var stan = new Person('Stanley', 'male');

console.log(Person.prototype);
Gulsvi
@gulsvi
Jun 01 2017 03:24
@mboesiger90 Hint - the URL you have should start with https:// your URL is:
'/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1'
@dillorr Use a service like https://postimage.org, that's what most people use here without any issues.
Dillon Orr
@dillorr
Jun 01 2017 03:27
I'll give it a shot, thanks again @SkyC0der
CamperBot
@camperbot
Jun 01 2017 03:27
dillorr sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:warning: dillorr already gave skyc0der points
fdemaa
@fdemaa
Jun 01 2017 03:27
@SkyC0der when i remove the padding from my body,and put it in my div, my image is got cut, and it doesn't matter if put other height to the image, it wont display.
If i use margin-top: with a negative value, is a bad solution ?
mboesiger90
@mboesiger90
Jun 01 2017 03:29
ah yes thank you sky but when I changed that it still doesnt work
Gulsvi
@gulsvi
Jun 01 2017 03:29
@mboesiger90 What does your URL look like now?
I went with a different API
Gulsvi
@gulsvi
Jun 01 2017 03:30
@fdemaa A better solution, in that case, is to move your home section above your navbar, like:
<div id="home"></div>
  <div class="container-fluid  homesection">  
  <nav class="navbar  navbar-inverse navbar-fixed-top custom1">
@mboesiger90 That API is not documented very well - I can give you the exact URL to use if you want, but you may not learn much about reading API documentation. Up to you.
I'd personally take a closer look at the code examples and instructions at the first API you were trying to use: https://quotesondesign.com/api-v4-0/
mboesiger90
@mboesiger90
Jun 01 2017 03:31
ok thank you
ZaynMalloc
@ZaynMalloc
Jun 01 2017 03:32

@adamakers function Person(name, gender) {
this.name = name;
this.gender = gender;
}
Person.prototype.lastname = 'marsh';
Person.prototype.introduce = function() {
console.log('Hi my name is ' + this.name + ' and I am a ' + this.gender);
}

var stan = new Person('Stanley', 'male');

console.log(stan.introduce());

Gulsvi
@gulsvi
Jun 01 2017 03:32
Once you get more familiar with calling APIs, displaying data on the page, etc, you can branch out and try to figure out other APIs.
Adam
@adamakers
Jun 01 2017 03:32
@ZaynMalloc I figured it out. It does not show the properties in the console because those properties are not a part of the prototype property, but instead are tied directly to the object
mboesiger90
@mboesiger90
Jun 01 2017 03:32
Ok thank you I am really struggling to understand ajax and apis
Dillon Orr
@dillorr
Jun 01 2017 03:33
@SkyC0der you mentioned earlier z-index: -1; for my navigation bar, which i applied to that class, but now my new image is the only thing that covers it up when scrolling
everything else scrolls under the nav bar like it's supposed to
ZaynMalloc
@ZaynMalloc
Jun 01 2017 03:33
@adamakers oh, good to know
Gulsvi
@gulsvi
Jun 01 2017 03:33
@mboesiger90 Don't let it get you down :) it's a tough concept, but it will click eventually and then seem fairly simple.
Just takes getting it right a few times
Adam
@adamakers
Jun 01 2017 03:33
@ZaynMalloc Thanks!
CamperBot
@camperbot
Jun 01 2017 03:33
adamakers sends brownie points to @zaynmalloc :sparkles: :thumbsup: :sparkles:
:cookie: 254 | @zaynmalloc |http://www.freecodecamp.com/zaynmalloc
Gulsvi
@gulsvi
Jun 01 2017 03:34
@dillorr You'll want to use a positive number for your z-index. I don't think I recommended a negative one :) but if I did, I'm sorry about that. -1 puts your element behind everything else.
Dillon Orr
@dillorr
Jun 01 2017 03:35
whoops! got it
Gulsvi
@gulsvi
Jun 01 2017 03:35

For example, this is what Bootstrap does for their Fixed navbar class:

.navbar-fixed-top,
.navbar-fixed-bottom {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030;
}

@dillorr
From: https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css

fdemaa
@fdemaa
Jun 01 2017 03:37
@SkyC0der still the white space, i think i will add the negative margin to each mediaqueries :shipit:
mboesiger90
@mboesiger90
Jun 01 2017 03:39
is there anything in particular I can read up on to help me understand APIs better?
Josh Beasley
@joshbeasley
Jun 01 2017 03:42
@SkyC0der the justify-content-end class allowed me to move the entire nav bar, but not individual pills
fdemaa
@fdemaa
Jun 01 2017 03:53
@SkyC0der okey i do it like you ! but why that works ? moving the id home up there ?
Gulsvi
@gulsvi
Jun 01 2017 03:55
@joshbeasley I misread, thought you wanted it all over to the right. I think you're looking for a navbar, not nav-pills in that case. https://codepen.io/skycoder/pen/VboOYK?editors=1000
@fdemaa This way, the navbar is on top of your background image instead of above it :) it's the same as using the <header> tag.
fdemaa
@fdemaa
Jun 01 2017 03:57
okay i never thought about that !you are years ahead of me haha
Gulsvi
@gulsvi
Jun 01 2017 04:00
Only 3 months lol :)
fdemaa
@fdemaa
Jun 01 2017 04:02
:clap:
fdemaa
@fdemaa
Jun 01 2017 04:08
Im going sleep thanks for the help @SkyC0der
CamperBot
@camperbot
Jun 01 2017 04:08
fdemaa sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1571 | @skyc0der |http://www.freecodecamp.com/skyc0der
rfvergeldedios
@rfvergeldedios
Jun 01 2017 05:12
Hi everyone, question, can a second getJSON be nested within a getJSON?
Johnny
@jtan3
Jun 01 2017 05:16
@rfvergeldedios i believe so.
Vincent Yan
@envincebal
Jun 01 2017 05:20
Hey guys, I finished my Weather App, but I noticed a delay in retrieving the data from the weather API. I've spent hours trying to figure out why. Any help would be appreciated.
fdemaa
@fdemaa
Jun 01 2017 05:24
@envincebal how do you make those projects images ? with some picture editor ?
i m looking at your portfolio
Im sorry but i dont know any of js, im doing the portfolio and tribue pages :shipit:
You can also google a bunch of screen capture sites and they will do just fine as well.
fdemaa
@fdemaa
Jun 01 2017 05:30
@envincebal thanks man ! by the way , any quick feedback ?
https://codepen.io/fdemaa/pen/oWOMMX
Its horrible but im still a noob haha
CamperBot
@camperbot
Jun 01 2017 05:30
fdemaa sends brownie points to @envincebal :sparkles: :thumbsup: :sparkles:
:cookie: 279 | @envincebal |http://www.freecodecamp.com/envincebal
Vincent Yan
@envincebal
Jun 01 2017 05:34
@fdemaa very nice! I like it, especially the navbar. One thing I would suggest is wrapping all your HTML in a div starting at the About Me section and use the class "container" that way everything is more centered.
fdemaa
@fdemaa
Jun 01 2017 05:38

@envincebal thanks man! Yes i forgot a bout that;

Also do you visit any others pages like this one ?

I did some codecademy but i find it too limited, and they are others pages that are premium. :worried:

I mean i just look for info in google, but do you have any others things to help you out ?

CamperBot
@camperbot
Jun 01 2017 05:38
fdemaa sends brownie points to @envincebal :sparkles: :thumbsup: :sparkles:
:warning: fdemaa already gave envincebal points
fdemaa
@fdemaa
Jun 01 2017 05:39
I feel like a bit lost, they are too many things to learn haha
Johnny
@jtan3
Jun 01 2017 05:40
@fdemaa you can youtube tons of stuff
fdemaa
@fdemaa
Jun 01 2017 05:40
@jtan3 yes im using also this page thats call w3school or something like that, wich is great
:+1:
Vincent Yan
@envincebal
Jun 01 2017 05:42
Yeah Codecademy is a good intro but not enough. Mostly I just google stuff. I mainly use Mozilla Developer Network site. It's really comprehensive stuff and a good reference. Also here's a link to a great list of resources I use for front end in general. http://codingheroes.io/resources/
w3schools is quite controversial because many devs say lots of the info is outdated. MDN is much better.
fdemaa
@fdemaa
Jun 01 2017 05:45

@envincebal i didn't know that about w3schools; Great info man ! Appreciate, and good luck with your project!

@jtan3 :+1: Thanks!

CamperBot
@camperbot
Jun 01 2017 05:45
fdemaa sends brownie points to @envincebal and @jtan3 :sparkles: :thumbsup: :sparkles:
:warning: fdemaa already gave envincebal points
:cookie: 390 | @jtan3 |http://www.freecodecamp.com/jtan3
Riley
@Riley1435
Jun 01 2017 05:46
can someone help me with the intermediate front end project, "show the local weather?"
Vincent Yan
@envincebal
Jun 01 2017 05:46
@fdemaa thanks you too.
CamperBot
@camperbot
Jun 01 2017 05:46
envincebal sends brownie points to @fdemaa :sparkles: :thumbsup: :sparkles:
:cookie: 129 | @fdemaa |http://www.freecodecamp.com/fdemaa
Johnny
@jtan3
Jun 01 2017 05:47
@Riley1435 sure
Riley
@Riley1435
Jun 01 2017 05:47
how do i link a portion of my code into the chat?
Johnny
@jtan3
Jun 01 2017 05:48
if you're working on codepen you can link that
wondering why its not displaying the local temperature
Netrunner21
@Netrunner21
Jun 01 2017 05:50
try this
change text() to html()
$("#tempFar").html(data.temperature + "°" + "F");
Riley
@Riley1435
Jun 01 2017 05:52
i tried that and it still does not work
Netrunner21
@Netrunner21
Jun 01 2017 05:52
hmm, let me look at hime
mine*
Johnny
@jtan3
Jun 01 2017 05:53
@Riley1435 if you go to your developer tools and console you'll see an error
@Riley1435 Ctrl + Shift + J
@Riley1435 to open console
Netrunner21
@Netrunner21
Jun 01 2017 05:54
@jtan3 good catch
@Riley1435 add ?callback=? to the end of your url
its either a workaround for APIs that restrict access, or it helps codepen in some way. I'm not sure.
Riley
@Riley1435
Jun 01 2017 05:56
okay yeah the api has a cross origin error
now it says undefined. im thinking data.temperature is not calling the right object in the JSON data
Netrunner21
@Netrunner21
Jun 01 2017 05:59
Mine was data.currently.temperature
there's an extra step in the object notation to index
Riley
@Riley1435
Jun 01 2017 06:00
I tired that earlier and i figured it didnt work
but now it should work since the problem was the url
thanks for the help
makes sense after opening the link and viewing the data again
Netrunner21
@Netrunner21
Jun 01 2017 06:01
no problem
leomartin
@abhirupleo
Jun 01 2017 06:03
Can someone help me with the random quote generator
app?
Johnny
@jtan3
Jun 01 2017 06:04
@abhirupleo ask away
leomartin
@abhirupleo
Jun 01 2017 06:05
So here is my js code

function generatecolor(){
var color=['#27303B','#F67858','#1182C7','#EC9A4E','#8666F2','#97E59A',''];
var random= Math.floor(Math.random()*color.length);
$("html body").animate({backgroundColor:color[random]}, 1200);
}

function getquote(){
$.ajax({

                    headers: {
                              "X-Mashape-Key": "HL5Yr3E9RZmshc7CyNeA0JrwnjD7p1H6dKVjsnDjlYdeqTgBW9",
                              Accept: "application/json",
                              "Content-Type": "application/x-www-form-urlencoded"
                            },
                        url: 'https://andruxnet-random-famous-quotes.p.mashape.com/cat=',
                        success: function(r){
                        if(typeof(r)=='String'){
                            r=JSON.parse(r);
                            console.log('hey');
                            console.log(r.quote);
                            $("#text").text(r.quote);
                        }
                    }
            });

}

$(document).ready(function() {
$('body').animate({backgroundColor:'#02CE9C'}, 1200);
$('.getquote').on('click', function(event) {
generatecolor();
getquote();
/ Act on the event /
});
});

and here is my html
<body>
<div class="container-fluid">
<div class="row">
<div class="quote-box col-xs-6 col-xs-offset-2">
<div class="quote-text">
<i class="fa fa-quote-left fa-3x" aria-hidden="true"></i>
<span id="text"></span>
</div>
<br>
<button class="btn btn-primary twitter"><i class="fa fa-twitter fa-lg"></i></button>
<button class="btn btn-primary facebook"><i class="fa fa-facebook-official fa-lg"></i></button>
<button class="btn btn-primary getquote">Get Quote</button>
</div>
</div>
</div>
</body>
i have been trying to get this to work for two days now
Johnny
@jtan3
Jun 01 2017 06:06
@abhirupleo send your codepen link
leomartin
@abhirupleo
Jun 01 2017 06:06
but i can't seem to get any resonse from the site
Netrunner21
@Netrunner21
Jun 01 2017 06:08
I have a general question about text() vs html()
leomartin
@abhirupleo
Jun 01 2017 06:08
ask i will try to help @Netrunner21
Riley
@Riley1435
Jun 01 2017 06:08
ive read .text is more secure than .html. I don't remember why, but i remember reading it.
Netrunner21
@Netrunner21
Jun 01 2017 06:09
I see a lot of people using text(), but I'm curious because I think sometimes what's being passed through needs HTML elements tags. My quote generator did, for instance. Wouldn't it be better just to use html() and conver all bases?
cover*
leomartin
@abhirupleo
Jun 01 2017 06:10
Not if you
have already styled it and have placed a span
Riley
@Riley1435
Jun 01 2017 06:10
i used text() on my quote generator and i remember switching it from html() because i read it was more secure
leomartin
@abhirupleo
Jun 01 2017 06:10
then you just need to pass the text you get in response from the ajax request it reduces the complexity ofyour js code
rather than complexity it increases the brevity of your code
using text
why bother with using html tags in js if you can do all the html work in the html file and just pass the text request
it will reduce the mistakes you make
Johnny
@jtan3
Jun 01 2017 06:12
@abhirupleo haven't used ajax too often. I have forgotten how to set it up.
Netrunner21
@Netrunner21
Jun 01 2017 06:13
The API I used had preset tags such as <p> and <br />. But I understand what you're saying.
this might help @Netrunner21
its okay @jtan3
Netrunner21
@Netrunner21
Jun 01 2017 06:13
It also had HTML styling such as &8221; that needed filtering, but that has nothing to do with text() or html()
leomartin
@abhirupleo
Jun 01 2017 06:14
yes
Netrunner21
@Netrunner21
Jun 01 2017 06:15
@abhirupleo Thats the one I saw about ten minutes ago and prompted the question. I figured why not pass the tags through with HTML where text() sets everything to plain text. I got what you were saying though.
leomartin
@abhirupleo
Jun 01 2017 06:16
+1:
kirbyedy
@kirbyedy
Jun 01 2017 06:16
@abhirupleo dunno about your code
but this one is a working example
$(document).ready(function() {


  $.ajax({
    url: 'https://andruxnet-random-famous-quotes.p.mashape.com/cat=', // The URL to the API. You can get this by clicking on "Show CURL example" from an API profile
    type: 'GET', // The HTTP Method
    data: {}, // Additional parameters here
    datatype: 'json',
    success: function(data) { alert(JSON.stringify(data)); },
    error: function(err) { alert(err); },
    beforeSend: function(xhr) {
    xhr.setRequestHeader("X-Mashape-Authorization", "HL5Yr3E9RZmshc7CyNeA0JrwnjD7p1H6dKVjsnDjlYdeqTgBW9"); // Enter here your Mashape key
    }
});


});
Netrunner21
@Netrunner21
Jun 01 2017 06:18
question #2 ... $.ajax versus $getJSON
kirbyedy
@kirbyedy
Jun 01 2017 06:19
I think you have more control over ajax
Netrunner21
@Netrunner21
Jun 01 2017 06:20
more options I guess
looks prettier lol
Johnny
@jtan3
Jun 01 2017 06:22
https://codepen.io/jtan3/pen/ZKMRdW?editors=0010 How can I get my "session time" to count by 1. When I put my session*=60 outside my click function and it breaks my "session time" control.
Netrunner21
@Netrunner21
Jun 01 2017 06:30
Made some changes to my Wiki Viewer. What do you guys think?
Johnny
@jtan3
Jun 01 2017 06:32
@Netrunner21 I like the hover effects !
Netrunner21
@Netrunner21
Jun 01 2017 06:35
Thanks. I has taken some time to get everything looking right
It *
mboesiger90
@mboesiger90
Jun 01 2017 06:35

So I have this working now but some of the quotes are too long from this API. Is there someway I can add a string.length filter to the filter that goes with the URL or do I have to completely reorder my coding

$(document).ready(function(){
$.ajax({
cache: false,
url: 'https://quotesondesign.com/wp-json/posts?filter[orderby]=rand',
success:function(data){
var post = data.shift();
$(".quote").html(post.content);
$(".author").html("-" + post.title);
}
});
$("#getQuote").on('click', function (e){
e.preventDefault;
$.ajax({
cache: false,
url: 'https://quotesondesign.com/wp-json/posts?filter[orderby]=rand',
success:function(data){
var post = data.shift();
$(".quote").html(post.content);
$(".author").html("-" + post.title);
}
});
});
});
$("#tweet").click(function(){
var tweetQuote = $(".quote").text() + "-" + $(".author").text();
var tweetLink = 'https://twitter.com/intent/tweet?text=' + encodeURIComponent(tweetQuote);
window.open(tweetLink, '_blank')
});

Netrunner21
@Netrunner21
Jun 01 2017 06:37
@mboesiger90 Your code only has to send the tweet to twitter. It's ok if it's too long. Interesting though if you truly did want to filter the quotes you could absoluly use a string.length type condition
I used the same API. You could test the length, and if it's too long have your code grab another random link.
mboesiger90
@mboesiger90
Jun 01 2017 06:39
yeah I tried that in the filter that I have within my url but that doesnt seem to work
Netrunner21
@Netrunner21
Jun 01 2017 06:39
random quote, sorry
mboesiger90
@mboesiger90
Jun 01 2017 06:39
oh or you mean make an if statement?
Netrunner21
@Netrunner21
Jun 01 2017 06:40
yeah, so basically it checks the length and if it's too long it doesn't get passed on, it reruns the code and grabs another quote.
That API has a lot of long ones though
mboesiger90
@mboesiger90
Jun 01 2017 06:41
ok that would work
This API has too many quotes that are too long and then they mess up my layout haha
Pranav Reddy
@ne0ng0d
Jun 01 2017 06:42
Guys how do I start working on the portfolio?
Netrunner21
@Netrunner21
Jun 01 2017 06:42
I understand, otherwise its a decent API
mboesiger90
@mboesiger90
Jun 01 2017 06:43
google ideas and templates to get an idea
Netrunner21
@Netrunner21
Jun 01 2017 06:43
@ne0ng0d make a new pen, and add the stuff you want like bootstrap, animate.css, font awesome, jquery, etc.
That's my process of getting started
Honestly though I skipped that one. I'm going to do it when I finish all my projects. The portfolio is layout heavy and I'm not very good at design, hah.
Pranav Reddy
@ne0ng0d
Jun 01 2017 06:45
Thanks @Netrunner21
CamperBot
@camperbot
Jun 01 2017 06:45
ne0ng0d sends brownie points to @netrunner21 :sparkles: :thumbsup: :sparkles:
:cookie: 327 | @netrunner21 |http://www.freecodecamp.com/netrunner21
Netrunner21
@Netrunner21
Jun 01 2017 06:45
@ne0ng0d You're welcome
mboesiger90
@mboesiger90
Jun 01 2017 06:47
haha I had so much trouble picking a color scheme for my portfolio and now I hate it anyway so I will definitely be going back to redesign it with my newfound knowledge
Pranav Reddy
@ne0ng0d
Jun 01 2017 06:47
but how do I do things like the buttons doing different function adding a menu bar and adding multiple pictures next to each other and adding icons to different websites
Saeed Jassani
@saeedjassani
Jun 01 2017 06:48
hello, i need help in "Random Quote Machine" project
how can i change the backgrount color of my bootstrap button?
mboesiger90
@mboesiger90
Jun 01 2017 06:49
make a class, assign the class to the button, and change the background-color in the class
Netrunner21
@Netrunner21
Jun 01 2017 06:50
@ne0ng0d there are several ways. You can add onclick="function()" to make buttons do things.
Saeed Jassani
@saeedjassani
Jun 01 2017 06:50
@mboesiger90 i tried color: white !important;
to btn-default class of bootstrap
Netrunner21
@Netrunner21
Jun 01 2017 06:50
@ne0ng0d bootstrap has sample menus that you can copy/paste
Saeed Jassani
@saeedjassani
Jun 01 2017 06:51
but the ripple effect goes away
kirbyedy
@kirbyedy
Jun 01 2017 06:52
@saeedjassani you have to target the button in css
Netrunner21
@Netrunner21
Jun 01 2017 06:52
@ne0ng0d adding multiple pictures would require the use of inline or inline block css styles, and not the block display style. There may be easier ways to do it in bootstrap though, I'm not sure.
kirbyedy
@kirbyedy
Jun 01 2017 06:52
color will refer to the text inside the button
mboesiger90
@mboesiger90
Jun 01 2017 06:52
@saeedjassani this is my little excerpt. .btnNPos { position: absolute; bottom: 10px; left: 20%; background-color: black; color: #ffffff; }
CamperBot
@camperbot
Jun 01 2017 06:52
:bulb: to format code use backticks! ``` more info
kirbyedy
@kirbyedy
Jun 01 2017 06:52
most probably you need background-color @saeedjassani
mboesiger90
@mboesiger90
Jun 01 2017 06:53
oops sorry i never get that right but that is my css class for the button. The button is black and the text is white
Saeed Jassani
@saeedjassani
Jun 01 2017 06:53
oh sorry, document.getElementById('refresh').setAttribute('style', 'background-color:' + colors[0] + '; !important');
i need to color it dynamically
so i have used javascript to change the background color
but the problem is, the ripple effect on the button goes away
<button id="refresh" class="btn btn-default">New Quote</button>
@mboesiger90 @kirbyedy you can see my pen
kirbyedy
@kirbyedy
Jun 01 2017 06:57
hmmm well it does change for me
its working...
Pendramon
@Pendramon
Jun 01 2017 06:58
what ripple effect?
Saeed Jassani
@saeedjassani
Jun 01 2017 06:58
when you hover over the "new quote" button, the cursor doesnt change
Netrunner21
@Netrunner21
Jun 01 2017 06:59
How do you get small snippets of code to have the gray background on here (not the backtick method that has black background with markup)
Saeed Jassani
@saeedjassani
Jun 01 2017 06:59
and the default behavior (of indicating that the button has been hovered upon) is gone @Pendramon
small snippet @Netrunner21
put it in ``
Netrunner21
@Netrunner21
Jun 01 2017 06:59
ok like this
nice
Thanks @saeedjassani
CamperBot
@camperbot
Jun 01 2017 06:59
netrunner21 sends brownie points to @saeedjassani :sparkles: :thumbsup: :sparkles:
:cookie: 269 | @saeedjassani |http://www.freecodecamp.com/saeedjassani
Saeed Jassani
@saeedjassani
Jun 01 2017 07:00
NP
Pendramon
@Pendramon
Jun 01 2017 07:00
@saeedjassani i see no code for animating the button hover
Saeed Jassani
@saeedjassani
Jun 01 2017 07:01
have you seen the behavior on default button?
the behavior is default, it does not need any code
Pendramon
@Pendramon
Jun 01 2017 07:02
Oh you mean the ripple effect is part of bootstrap?
Saeed Jassani
@saeedjassani
Jun 01 2017 07:02
yes
Pendramon
@Pendramon
Jun 01 2017 07:02
let me check
You are using bootstrap v4 or v3?
@saeedjassani
Saeed Jassani
@saeedjassani
Jun 01 2017 07:04
not exactly the ripple effect, but it does indicate that the button has been hovered
i want my button to be exactly like this
Pendramon
@Pendramon
Jun 01 2017 07:05
So as the background color changes the button to change aswell?
Saeed Jassani
@saeedjassani
Jun 01 2017 07:06
yes
Pendramon
@Pendramon
Jun 01 2017 07:06
That is not done by bootstrap but i will try to set it up
Saeed Jassani
@saeedjassani
Jun 01 2017 07:07
https://www.w3schools.com/bootstrap/bootstrap_buttons.asp see this @Pendramon , it is done by bootstrap too
Mohak Chaturvedi
@lucky73
Jun 01 2017 07:09
i am writing this code
<script>
$(document).ready(function() {
$("h3").addClass("animated slideInRight");
});
</script>
shows error unexpected token illegal
why
Pendramon
@Pendramon
Jun 01 2017 07:11
@saeedjassani Its just button hover and button active it doesn't change the background color on the page tho
@saeedjassani also your button is set to change to the first color of the colors array you need to do a for loop or something so it changes to different colors
h1tag
@h1tag
Jun 01 2017 07:18
@lucky73 on Codepen?
Mohak Chaturvedi
@lucky73
Jun 01 2017 07:18
@h1tag yes
h1tag
@h1tag
Jun 01 2017 07:18
@lucky73 @lucky73 did you add jQuery in the settings?
Mohak Chaturvedi
@lucky73
Jun 01 2017 07:19
yes i have added it
h1tag
@h1tag
Jun 01 2017 07:19
@lucky73 try putting the js code in the js box/section
and remove the script tags of course, when u put it there
Mohak Chaturvedi
@lucky73
Jun 01 2017 07:20
let me try
Pendramon
@Pendramon
Jun 01 2017 07:20
@saeedjassani also there is no need to set the box's style background-color in js you can just do it in css
or is there let me check what you have done xd
Mohak Chaturvedi
@lucky73
Jun 01 2017 07:22
@h1tag it is working now i thing the script tags are the problem
@h1tag thank you
CamperBot
@camperbot
Jun 01 2017 07:23
lucky73 sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 816 | @h1tag |http://www.freecodecamp.com/h1tag
h1tag
@h1tag
Jun 01 2017 07:23
@lucky73 yea, you have to put the js code in the js section on Codepen
leomartin
@abhirupleo
Jun 01 2017 07:31
how do i implement the tweet button in the quote machine
?
yunyanliu
@yunyanliu
Jun 01 2017 07:33
How to implement the function that click a tag of navbar, then go to relevant area in the same webpage?
Pendramon
@Pendramon
Jun 01 2017 07:34
@saeedjassani Here it is i just implemented a random number generator between 0 and the length of the colors array
h1tag
@h1tag
Jun 01 2017 07:36
@yunyanliu you can use anchor elements with ids
for example:
<a href="#about">about</a>

<div id = "about">
<!-- content -->
</div>
yunyanliu
@yunyanliu
Jun 01 2017 07:38
thank you, @h1tag
CamperBot
@camperbot
Jun 01 2017 07:38
yunyanliu sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 817 | @h1tag |http://www.freecodecamp.com/h1tag
Saeed Jassani
@saeedjassani
Jun 01 2017 07:43
@Pendramon thanks for that, but I was going to implement random number generator myself
CamperBot
@camperbot
Jun 01 2017 07:43
saeedjassani sends brownie points to @pendramon :sparkles: :thumbsup: :sparkles:
:cookie: 134 | @pendramon |http://www.freecodecamp.com/pendramon
need help in navbar!
i already added navbar-right class For "about " but it didn't go in that way.
help me out
Shukhrat
@mshukhrat
Jun 01 2017 07:50
Hey guys! I have an issues with adding image to my webpage in codepen can somebody help me with fixing this? https://codepen.io/Shukrhat/pen/EmqqRJ
prince verma
@verma-o
Jun 01 2017 07:52
@mshukhrat where you want to add an image in your code?
Hoang Thanh Tu
@hoangthanhtu
Jun 01 2017 07:52
@mshukhrat where is place that you want to add image?
Shukhrat
@mshukhrat
Jun 01 2017 07:54
thank you guys! I`m done
BangYuWen
@bangyuwen
Jun 01 2017 08:04
Hello, does anyone's dark sky api still works now?
It worked yesterday.
https://jsbin.com/bapahuquyi/edit?js,console
This is the console Error code:
Fetch API cannot load https://api.darksky.net/forecast/abc151891e74f78923426c014ba187e4/37.8267,-122.4233. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://null.jsbin.com' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
h1tag
@h1tag
Jun 01 2017 08:07
@bangyuwen add ?callback=? at the end of the darsky url
prince verma
@verma-o
Jun 01 2017 08:10
https://codepen.io/flintsky1/pen/EmBbBG
anyone ? need help in class called "navbar-right "
?
BangYuWen
@bangyuwen
Jun 01 2017 08:12
@h1tag
Do you mean like this? It still can't work haha
https://jsbin.com/bapahuquyi/edit?js,console
h1tag
@h1tag
Jun 01 2017 08:15
@bangyuwen it should work with getJSON. Don't know about fetch
BangYuWen
@bangyuwen
Jun 01 2017 08:25
@h1tag I'm trying AJAX now. But it seems not working.
I'll try getJSON later!
h1tag
@h1tag
Jun 01 2017 08:27
@bangyuwen I think in ajax you have to set dataType to jsonp
alpox
@alpox
Jun 01 2017 08:29
@bangyuwen if you want to use fetch, you can use crossorigin.me
BangYuWen
@bangyuwen
Jun 01 2017 08:33
@alpox I fixed it with adding prefix https://cors-anywhere.herokuapp.com/. THX a lot.
CamperBot
@camperbot
Jun 01 2017 08:33
bangyuwen sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1119 | @alpox |http://www.freecodecamp.com/alpox
BangYuWen
@bangyuwen
Jun 01 2017 08:33
@h1tag THX a lot,! I fixed it!
CamperBot
@camperbot
Jun 01 2017 08:33
bangyuwen sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 819 | @h1tag |http://www.freecodecamp.com/h1tag
h1tag
@h1tag
Jun 01 2017 08:34
@alpox hey, do you know the juggling async exercise in the continue working with nodejs servers challenge?
If yes, then can you give me a hint/hints on how to solve it
@bangyuwen YW!
Ayush Kumar
@Gr8ayu
Jun 01 2017 08:45

function destroyer(arr) {
  // Remove all the values
  var z="";
 var y=arguments[0];
  var x=[];  
  x= y.filter(function(a){

    for(var d=0;d<arguments.length;d++)
      {
        return "a";
      }//z+='\n';




 });


 return x; 
}

destroyer([1, 2, 3, 1, 2, 3], 4, 5);
what should be the out put of these code ???
alpox
@alpox
Jun 01 2017 08:46
@h1tag i didnt do any challenges of the backend. What is it about?
Radek
@radekjohn
Jun 01 2017 08:46
Hi, look at my tic-tac-toe!
h1tag
@h1tag
Jun 01 2017 08:47

@alpox

you need to use http.get(). However, this time you will be provided with
three URLs as the first three command-line arguments.

You must collect the complete content provided to you by each of the URLs
and print it to the console (stdout). You don't need to print out the
length, just the data as a String; one line per URL. The catch is that you
must print them out in the same order as the URLs are provided to you as
command-line arguments.

Adrian Padurean
@Securiteru
Jun 01 2017 08:48
@SkyC0der You gave me some feedback, regarding first point: I have no idea what Bootstrap 3/4 is, I just used those functions :-?
alpox
@alpox
Jun 01 2017 08:50
@h1tag Possible solutions:
  1. Load each content one after another (Start the next only if the last finished)
  2. Load them parallel and set the result to an exact position in an array (In the order you need them) and keep a counter which you increment each time the request of one came back. Then, you always test if the counter is 3 already. In that case, you got them all and the results are in the right order in the array.
  3. Put all calls into promises and use Promise.all to wait for them all to finish. The result will be in order.
h1tag
@h1tag
Jun 01 2017 08:52
@alpox there are also hints with the exercise (but I need more hints :smile:) . Do you want me to pm you the hints (because they're somewhat long)? Or post them in the backend room ? (maybe this will give you more context)
alpox
@alpox
Jun 01 2017 08:52
@h1tag private message would be best i guess :D
@radekjohn Maybe i'm missing out if its needed but i see no AI :D
h1tag
@h1tag
Jun 01 2017 08:54
@alpox Thank you. I pm'ed you
CamperBot
@camperbot
Jun 01 2017 08:54
h1tag sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1120 | @alpox |http://www.freecodecamp.com/alpox
h1tag
@h1tag
Jun 01 2017 08:54
@Securiteru are you using the same classes you learned in freecodecamp?
if yes, then you have to add Bootstrap 3 not 4
Radek
@radekjohn
Jun 01 2017 08:55
@alpox well, i did not used minimax. I just made strategy for every move. there are just nine of them
Pendramon
@Pendramon
Jun 01 2017 08:56
I never actually get to use bootstrap for my web pages x)
alpox
@alpox
Jun 01 2017 08:58
@radekjohn Hmm i just thought it needs at least a dumb one. I might be wrong
Radek
@radekjohn
Jun 01 2017 08:58
@alpox Do you think that AI was part of the assignment?
alpox
@alpox
Jun 01 2017 08:58
But i mean that the AI doesn't do anything and i have to set everything myself :D
@radekjohn 3. userstory: User Story: I can play a game of Tic Tac Toe with the computer. sounded for me like that
Not against myself :D
Jacky
@skywards1910
Jun 01 2017 08:59
read many thing but have not work in any real project. What should i do now?:worried:
Radek
@radekjohn
Jun 01 2017 09:00
@alpox to be honest, i tryed to implement minimax, but I failed
alpox
@alpox
Jun 01 2017 09:00
@skywards1910 Only read or also practiced?
Radek
@radekjohn
Jun 01 2017 09:00
@alpox did you choose the number of players one?
alpox
@alpox
Jun 01 2017 09:00
@radekjohn I think it doesn't have to be minimax - i guess a random placement of stones would do it too for this challenge
Jacky
@skywards1910
Jun 01 2017 09:01
@alpox practiced also
alpox
@alpox
Jun 01 2017 09:01
@radekjohn No i didn't
And i wondered why i can play without doing that :D
@radekjohn The gameboard should not be available before one chose all options - because i can now play, choose an option, and play on
Radek
@radekjohn
Jun 01 2017 09:02
@alpox zero players = computer against computer, one player = human gainst computer, two players = human against human
@alpox yes, I see. that can be fixed
alpox
@alpox
Jun 01 2017 09:03
@radekjohn Seems to work else :D
Radek
@radekjohn
Jun 01 2017 09:03
@alpox the code is very messy, because I had to do something else for about 2 months
@alpox It is the main reason why I was not able to implement minimax
Pendramon
@Pendramon
Jun 01 2017 09:04
That Clever AI is unbeatable xd
alpox
@alpox
Jun 01 2017 09:05
@radekjohn Your AI code is endless :D looks like minimax would be easier than that xD
@Pendramon I just beat it :-/
Radek
@radekjohn
Jun 01 2017 09:05
@Pendramon it is not it is not minimax
@alpox it is long but easy to understand
alpox
@alpox
Jun 01 2017 09:06
@radekjohn Not to me :D
Pendramon
@Pendramon
Jun 01 2017 09:06
Holy code thats alot xd
alpox
@alpox
Jun 01 2017 09:06
@Pendramon It seems to be easy to beat - just did it again :D
@Pendramon Have fun trying to beat mine :D
Pendramon
@Pendramon
Jun 01 2017 09:07
Dude if it goes first no way to beat it in clever mode
Radek
@radekjohn
Jun 01 2017 09:09
@alpox first it tryes to occupy central square. than it tryes to make row of its own two squares. than it is looking for row of two to win. if there is no such row, it is looking for such row owned by enemy to prevent him from winning. thats all
minimax is unbeatable by definition
alpox
@alpox
Jun 01 2017 09:10
@radekjohn yea minimax is pretty badass
No way to beat
I used it in my tictactoe
Radek
@radekjohn
Jun 01 2017 09:10
@alpox i will try to implement it next time
Pendramon
@Pendramon
Jun 01 2017 09:13
minimax is just block the middle for computer not to win xd
alpox
@alpox
Jun 01 2017 09:14
@Pendramon Nope :D
Pendramon
@Pendramon
Jun 01 2017 09:14
unless it goes first and puts middle then just put next to it and continue placing where he will win xd
Cato Myhre
@Zalmez
Jun 01 2017 09:14
can anyone help me with the spyscroll?
Radek
@radekjohn
Jun 01 2017 09:15
i have somewhere a funciton which blocks the board, but i do not remember its name :-)
Cato Myhre
@Zalmez
Jun 01 2017 09:15
can't get it to work q.q
alpox
@alpox
Jun 01 2017 09:15
@Pendramon My minimax doesn't even put it in the middle in the first iteration :D
Pendramon
@Pendramon
Jun 01 2017 09:15
or not nvm
It does if you reset it a couple of times
Cato Myhre
@Zalmez
Jun 01 2017 09:16
I have just used some place holder text for now, far from done. just want some of the basic looks to be there
alpox
@alpox
Jun 01 2017 09:16
Minimax is sometimes funny that it prefers a guaranteed win over a direct win
Pendramon
@Pendramon
Jun 01 2017 09:19
Oh yea just noticed that xd
rfvergeldedios
@rfvergeldedios
Jun 01 2017 09:19
Hi, may I ask for advice please? I don't understand why getJSON only picks up the last item of my array despite the variable used changes value at the start of the for-loop (getJSON at line 24 ). https://codepen.io/RafaelVD/pen/MogWRv?editors=0010
alpox
@alpox
Jun 01 2017 09:19
@Zalmez You have to add jQuery before adding the javascript for bootstrap v4 otherwise it doesn't work
Pendramon
@Pendramon
Jun 01 2017 09:20
okay i give up you cant win over minimax xd
alpox
@alpox
Jun 01 2017 09:20
:D nop
Pendramon
@Pendramon
Jun 01 2017 09:20
its just draw after draw
alpox
@alpox
Jun 01 2017 09:21
@rfvergeldedios i doesn't change anymore when the callback runs - it already arrived at the last item
@rfvergeldedios Use let i instead of var i in the for loop
h1tag
@h1tag
Jun 01 2017 09:23
@alpox also the for loop doesn't wait for getJSON to get the results, right?
Radek
@radekjohn
Jun 01 2017 09:23
OK, i am donne. the board is off until the player chooses everything
alpox
@alpox
Jun 01 2017 09:23
@h1tag One moment i'm looking. Still something off :D might be true
@h1tag But yea the for loop doesn't wait
This shouldn't matter though if you use let
Aaha
Its because of the other variables
var chnUser = 'https://wind-bow.glitch.me/twitch-api/users/'+channels[a];    
var userName = chnUser.substring(44, chnUser.length);;
It works if these both are defined with let
let chnUser = 'https://wind-bow.glitch.me/twitch-api/users/'+channels[a];    
let userName = chnUser.substring(44, chnUser.length);;
h1tag
@h1tag
Jun 01 2017 09:25

@alpox

This shouldn't matter though if you use let

why?

Faisal
@Faisa1khan
Jun 01 2017 09:25
image.png
alpox
@alpox
Jun 01 2017 09:27
@h1tag it matters when you use var to define a variable - because a variable declared with var is defined in full function scope - if you change it in another iteration, the value will have changed in the whole function (Also for the last iteration)
If you use let, the variable will be block scoped - means that it will preserve its state and will only be defined in its own block of code. This makes it possible that the variable stays the same if you do an asynchronous request and use the variable in the same block
Its bit hard to understand for new people here, but i usually tell to use let instead of var for that they don't have to rewrite the whole loop stuff :-)
@rfvergeldedios :point_up: 1. Juni 2017 11:23
Cato Myhre
@Zalmez
Jun 01 2017 09:28
@alpox wut, explain a little more.
Faisal
@Faisa1khan
Jun 01 2017 09:28
plzzz help why the navbar ain't align properly https://codepen.io/Hackplacea/pen/BZBBxO?editors=1000#0
Cato Myhre
@Zalmez
Jun 01 2017 09:28
like how?
alpox
@alpox
Jun 01 2017 09:28
@Zalmez You mean the jquery thing?
Cato Myhre
@Zalmez
Jun 01 2017 09:28
yeah
alpox
@alpox
Jun 01 2017 09:28
@Zalmez In the settings -> javascript
You have now bootstrap on the first line
h1tag
@h1tag
Jun 01 2017 09:28
@alpox I read that in YDKJS, but I think I need to review it. Thank you
CamperBot
@camperbot
Jun 01 2017 09:28
h1tag sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:warning: h1tag already gave alpox points
alpox
@alpox
Jun 01 2017 09:29
But that won't work. Bootstrap depends on jquery - it cannot work without it. @Zalmez
Therefore, jQuery has to be on the first line and bootstrap on the second (jQuery must be loaded before the boostrap javascript loads)
Radek
@radekjohn
Jun 01 2017 09:29
OK, thanks a lot for consultations. see you all later
alpox
@alpox
Jun 01 2017 09:29
@radekjohn :wave:
Faisal
@Faisa1khan
Jun 01 2017 09:30
@alpox plzzz help why the navbar ain't align properly https://codepen.io/Hackplacea/pen/BZBBxO?editors=1000#0
Cato Myhre
@Zalmez
Jun 01 2017 09:30
hmm, is there a way for codepen to set it as a priority? can't see anything in the settings
rfvergeldedios
@rfvergeldedios
Jun 01 2017 09:31
@alpox So, 'let' works like a local variable in a function? In my case it attaches to the for-loop?
alpox
@alpox
Jun 01 2017 09:31
@Hackplacea You use bootstrap version 3 definitions but included version 4 of bootstrap in your pen.
Your navbar works when you remove the bootstrap css and add this instead:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
Its a link to the css of version 3
@rfvergeldedios let works like a local variable in a block - so it attaches to always one iteration of the for-loop.
It would also be defined only in its own if block if you define it there:
if(true) {
    let foo = "bar";
    console.log(foo);
}
console.log(foo); // ERROR!!!
While:
if(true) {
    var foo = "bar";
    console.log(foo);
}
console.log(foo); // Prints "bar"
Matthias Lang
@MatLang
Jun 01 2017 09:34
Hey guys, currently working on the Build a tribute page. (https://codepen.io/ltcMatt/pen/wewvwO) I want to align the two portrait pictures in such a way that the two of them are under each other, and on the right of them the text is displayed. I tried doing that with bootstrap. Can you guys please help me out how to do this? Thanks.
Cato Myhre
@Zalmez
Jun 01 2017 09:34
@alpox ty XD mb
CamperBot
@camperbot
Jun 01 2017 09:34
:star2: 1121 | @alpox |http://www.freecodecamp.com/alpox
zalmez sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
alpox
@alpox
Jun 01 2017 09:34
@Zalmez No - it just loads the scripts in order in which they are added - first line first, second line second etc.
Cato Myhre
@Zalmez
Jun 01 2017 09:35
it works now ^^ I'm just not thinking logically atm. I didn't even add the jquery /facepalm
Faisal
@Faisa1khan
Jun 01 2017 09:36
@alpox look now its showing like that , still not align properly https://codepen.io/Hackplacea/pen/BZBBxO?editors=1000#0
alpox
@alpox
Jun 01 2017 09:36

@MatLang You almost got it. You forgot to close a div :-)

<img src="http://ecell.in/blog/wp-content/uploads/2016/06/elon-musk.jpg" class="img-fluid img-thumbnail" alt="Musk laughing at a conference">
</div>

:point_up: added the </div>

@Hackplacea You gotta remove the other bootstrap css :D
Matthias Lang
@MatLang
Jun 01 2017 09:37
@alpox Wow thx a lot! Sometimes the answer is so obvious :D
CamperBot
@camperbot
Jun 01 2017 09:37
matlang sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1122 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Jun 01 2017 09:38
@MatLang :D can confirm
h1tag
@h1tag
Jun 01 2017 09:38
@alpox but I thought the problem with using a for loop with async, is that the for loop won't wait for the result and will finish executing before it gets all the results, for example it will execute the code after the for loop which displays the results on the page without having the full results
Faisal
@Faisa1khan
Jun 01 2017 09:38
@alpox man! finally i got it thanks alot smile:
CamperBot
@camperbot
Jun 01 2017 09:38
hackplacea sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1123 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Jun 01 2017 09:40
@h1tag Why shouldn't it have the full results? You add the contents to the page inside of the callback - when you know that you have the data.
@h1tag The usual problem with it is just that inside of the callback, if you try to access variables you defined inside of the for loop but outside of the callback, these variables will have the state of the last iteration of the for loop instead of the value they had when the callback was called.
And this issue you can circumvent with using let
h1tag
@h1tag
Jun 01 2017 09:44
@alpox Got it ;)
Jonathan Albert Cunanan
@jcunanan05
Jun 01 2017 09:44
how do you make dashboard pages? is it full of ajax requests? or is it just static and you have templates like the fixed navbar or side bar
rfvergeldedios
@rfvergeldedios
Jun 01 2017 09:45
@alpox Same here. Thank You.
CamperBot
@camperbot
Jun 01 2017 09:45
rfvergeldedios sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1124 | @alpox |http://www.freecodecamp.com/alpox
h1tag
@h1tag
Jun 01 2017 09:45
@alpox Thank you :)
CamperBot
@camperbot
Jun 01 2017 09:45
h1tag sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:warning: h1tag already gave alpox points
alpox
@alpox
Jun 01 2017 09:46
@jcunanan05 Thats totally individual. Its done in all the possible ways :D
h1tag
@h1tag
Jun 01 2017 09:46
Sometimes it works and send more than one brownie, but not this time :/
alpox
@alpox
Jun 01 2017 09:47
@h1tag Don't worry, i don't need them :D
h1tag
@h1tag
Jun 01 2017 09:47
:+1:
But it's a nice way to show appreciation
alpox
@alpox
Jun 01 2017 09:48
@h1tag :D yea a fun way too
Jonathan Albert Cunanan
@jcunanan05
Jun 01 2017 09:48
thanks @alpox well do you do both? uhmm when do you decide to do one or the other ? :)
CamperBot
@camperbot
Jun 01 2017 09:48
jcunanan05 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1125 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Jun 01 2017 09:49
@jcunanan05 I write all my pages with clientside rendering - usually react. So i just have templating with ajax :-)
Jonathan Albert Cunanan
@jcunanan05
Jun 01 2017 09:49
sorry newbie here just deciding when to start things haha
Adrian Padurean
@Securiteru
Jun 01 2017 09:50
Guys, can I assign a class to all images from CSS? I was thinking something like
img {
max-width: 100%;
class: img-thumbnail center-block img-responsive;
}
alpox
@alpox
Jun 01 2017 09:52
@Securiteru You cannot assign classes from css - its no language which does anything else than styling
@Securiteru If you want to do that you have to use javascript
Adrian Padurean
@Securiteru
Jun 01 2017 09:54
like this? $(document).ready(function(){
$("img").addClass("img-thumbnail center-block img-responsive");
});
alpox
@alpox
Jun 01 2017 09:54
@Securiteru Yup :D
Jonathan Albert Cunanan
@jcunanan05
Jun 01 2017 09:54
thanks @alpox to what extend of knowledge in js do you think we can handle learning using js frameworks? :)
CamperBot
@camperbot
Jun 01 2017 09:54
jcunanan05 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:warning: jcunanan05 already gave alpox points
alpox
@alpox
Jun 01 2017 09:55
@jcunanan05 Can you specify your question? :-)
Jonathan Albert Cunanan
@jcunanan05
Jun 01 2017 09:56
@alpox when is the time you know while practicing js, it's time i could start writing on a framework? haha
alpox
@alpox
Jun 01 2017 09:57
@jcunanan05 I guess the time you want to be more flexible when building a webpage :D
Mostly when you feel the need for a datarich application or flexibly changing content
MadsSN
@MadsSN
Jun 01 2017 10:00
Ahh this twitch api thing is stupid -.-
Jonathan Albert Cunanan
@jcunanan05
Jun 01 2017 10:01
@alpox ohh i kinda get the picture now. when you operate on dynamic datas.. what do you think of vue? it kinda ships out of the box with the framework i'm learning now, laravel, I'm not sure whether to learn it or not :worried: :) haha
alpox
@alpox
Jun 01 2017 10:02
@jcunanan05 If you use laravel, just go ahead and do so. Vue sounds like a great framework
Adrian Padurean
@Securiteru
Jun 01 2017 10:03
@alpox, it's not doing what I asked :(
alpox
@alpox
Jun 01 2017 10:04
@Securiteru Did you include jquery?
Adrian Padurean
@Securiteru
Jun 01 2017 10:05
@alpox, I did, yes
@alpox, the syntax is correct in this form? "
$(document).ready(function(){
$("img").addClass("img-thumbnail center-block img-responsive");
});" ?
Jonathan Albert Cunanan
@jcunanan05
Jun 01 2017 10:08
ok thanks so much @alpox for the good advices that you gave :) :fire: :clap:
i'm kinda torn because react is popular than vue and they say angular is hard and such :))
and with front end i'm kinda a clean slate for now. haha
CamperBot
@camperbot
Jun 01 2017 10:08
jcunanan05 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:warning: jcunanan05 already gave alpox points
Toby Pagan
@WarMonkeyX
Jun 01 2017 10:09
Hey everyone. I have a quick question. Is it a good idea to learn HTML Pug at the beginning of learning or just learn standard HTML first?
alpox
@alpox
Jun 01 2017 10:13
@Securiteru Looks alright to me. If you have a pen, you can show
Henry
@GitHub-Henry
Jun 01 2017 10:16
@WarMonkeyX HTML cuz it is the foundation
Toby Pagan
@WarMonkeyX
Jun 01 2017 10:19
Ok, kinda what I thought, but wanted to get an opinion from people more advanced than me haha, Thanks @GitHub-Henry
CamperBot
@camperbot
Jun 01 2017 10:19
warmonkeyx sends brownie points to @github-henry :sparkles: :thumbsup: :sparkles:
:cookie: 335 | @github-henry |http://www.freecodecamp.com/github-henry
Pendramon
@Pendramon
Jun 01 2017 10:19
Transition on visibility doesn't work? like slowly fade in/fade out
Matthias Lang
@MatLang
Jun 01 2017 10:20
Here's my tribute page thus far: https://codepen.io/ltcMatt/full/wewvwO/. Would really appreciate any feedback. I'm somehow worried about the col-md design. When the window is big it kinda looks decent. Thx.
Adrian Padurean
@Securiteru
Jun 01 2017 10:21
@MatLang, I also made one about Elon, lol! Also, in the top right side you can change view to /full/ and well it's a little better for showcasing it :D
Henry
@GitHub-Henry
Jun 01 2017 10:22
@MatLang is this correct Leaves Stanford PhD program after two days to help found Zip2 my mistake
Matthias Lang
@MatLang
Jun 01 2017 10:22
@Securiteru haha that's pretty cool! Although he has some weird character traits at times I absolutely like him :)
Adrian Padurean
@Securiteru
Jun 01 2017 10:24
@GitHub-Henry, huh? are you asking me if the information is correct? :-o I don't know. I found this: "In 1995, at age 24, Musk moved to California to begin a PhD in applied physics and materials science at Stanford University, but left the program after two days to pursue his entrepreneurial aspirations in the areas of the Internet, renewable energy and outer space.[40][47] In 2002, he became a U.S. citizen.[48][49]"
Matthias Lang
@MatLang
Jun 01 2017 10:25
@GitHub-Henry not sure about the loan but pretty sure that he left Stanford pretty early.
Henry
@GitHub-Henry
Jun 01 2017 10:26
@MatLang the question is about grammar not fact, found perhaps should be fund?
Abhimanyu Ray
@maad-boy
Jun 01 2017 10:27
how to set background img to body in codepen
i am having problem related to links
Matthias Lang
@MatLang
Jun 01 2017 10:27
@GitHub-Henry hm I think found is the correct word for it.
Henry
@GitHub-Henry
Jun 01 2017 10:29
@MatLang so he found Zip2 with a 28000 loan?
Pendramon
@Pendramon
Jun 01 2017 10:29
xd
Henry
@GitHub-Henry
Jun 01 2017 10:29
@MatLang now I get what you are saying, he was a founding member with a loan of 28k
Adrian Padurean
@Securiteru
Jun 01 2017 10:30
@maad-boy https://www.w3schools.com/html/html_images.asp this website is really good
Matthias Lang
@MatLang
Jun 01 2017 10:30
@GitHub-Henry lol, yes that is what I meant :D
Henry
@GitHub-Henry
Jun 01 2017 10:31
@MatLang took me long enough, interesting guy, good tribute
Pendramon
@Pendramon
Jun 01 2017 10:31
Is it somehow possible to jump straight to JSON APIs? like i just want to learn it i don't want my progress to save.
Adrian Padurean
@Securiteru
Jun 01 2017 10:32
Matthias Lang
@MatLang
Jun 01 2017 10:32
@GitHub-Henry I highly recommend his book: Elon Musk: Tesla, SpaceX, and the Quest for a Fantastic Future. In case you want to know more about him. Was just hearing the audio book in the last few weeks. His mindset is amazing. Thanks for having a look at my page :)
CamperBot
@camperbot
Jun 01 2017 10:32
matlang sends brownie points to @github-henry :sparkles: :thumbsup: :sparkles:
:cookie: 336 | @github-henry |http://www.freecodecamp.com/github-henry
Matthias Lang
@MatLang
Jun 01 2017 10:33
@Securiteru will have a look at it after launch, sorry need to go right now. BRB.
Abhimanyu Ray
@maad-boy
Jun 01 2017 10:33
can someone help me with img links in codepen
Adrian Padurean
@Securiteru
Jun 01 2017 10:34
@maad-boy, yes, wsup?
Abhimanyu Ray
@maad-boy
Jun 01 2017 10:36
@Securiteru this is my code for image "<img src = "https://www.123rf.com/photo_23842787_two-dead-trunks-in-very-hot-and-dry-desert-by-sunset-360-degrees-panoramic-effect.html?term=very%2Bhot" target = "_blank">" its not working its somthing related to links
@Securiteru this is my code for image "<img src = "https://www.123rf.com/photo_23842787_two-dead-trunks-in-very-hot-and-dry-desert-by-sunset-360-degrees-panoramic-effect.html?term=very%2Bhot" target = "_blank">" its not working its somthing related to links
Pendramon
@Pendramon
Jun 01 2017 10:37
Anyone knows if it is somehow possible to jump straight to JSON APIs? like i just want to learn it i don't want my progress to save on freeCodeCamp. Or do you know any good tutorials on it other than freeCodeCamp?
oh nvm apparently i can just do them if i wanted to xd
Henry
@GitHub-Henry
Jun 01 2017 10:40
@Securiteru Elon is certainly an amazing man, interesting to learn about him with your tribute.
Adrian Padurean
@Securiteru
Jun 01 2017 10:40
@GitHub-Henry Thx! :D
CamperBot
@camperbot
Jun 01 2017 10:40
securiteru sends brownie points to @github-henry :sparkles: :thumbsup: :sparkles:
:cookie: 337 | @github-henry |http://www.freecodecamp.com/github-henry
Abhimanyu Ray
@maad-boy
Jun 01 2017 10:44
@Securiteru sir please can you help me with img tag link
Adrian Padurean
@Securiteru
Jun 01 2017 10:45
@maad-boy, try this: <img src="https://www.123rf.com/photo_23842787_two-dead-trunks-in-very-hot-and-dry-desert-by-sunset-360-degrees-panoramic-effect.html?term=very%2Bhot" target = "blank">
I sent you a private message, it's on the left side :D
Abhimanyu Ray
@maad-boy
Jun 01 2017 10:46
@Securiteru ok sir let me check
Adrian Padurean
@Securiteru
Jun 01 2017 10:47
also, that link is odd..the site itself is not a picture, it's a full website, this is the picture link: https://previews.123rf.com/images/elenaphotos21/elenaphotos211311/elenaphotos21131100071/23842787-Two-dead-trunks-in-very-hot-and-dry-desert-by-sunset-360-degrees-panoramic-effect-Stock-Photo.jpg" but it has a watermark
kirbyedy
@kirbyedy
Jun 01 2017 11:13
in order to use that picture you have to pay for it
do not use watermarked pictures, as it is copyright infringment
Adrian Padurean
@Securiteru
Jun 01 2017 11:14
He won't publish the picture anywhere, he's just using it for this project :-? is it bad?
Emilio Gumayagay
@ergumayagay
Jun 01 2017 11:16
hi guys I need some tips on the zipline portfolio project. here is what I'm able to create so far https://codepen.io/ergumayagay/full/oWKJXO/ maybe you could suggest things which I can add, thanks in advance
Adrian Padurean
@Securiteru
Jun 01 2017 11:17
I say it's looking good! :D
kirbyedy
@kirbyedy
Jun 01 2017 11:19
@ergumayagay good start, the problem I found is the positioning, once I click on the About button, this happens
make sure the section name is visible
Screen Shot 2017-06-01 at 14.18.33.png
I guess the same would happen with portfolio link, but since its not big enough, cant be seen at the moment
Emilio Gumayagay
@ergumayagay
Jun 01 2017 11:20
@kirbyedy yah honestly I've noticed that, I can't seem to find any solution to make the section heading visible
@kirbyedy i thinks its a size issue
kirbyedy
@kirbyedy
Jun 01 2017 11:20
you should use offset top
Emilio Gumayagay
@ergumayagay
Jun 01 2017 11:21
@kirbyedy Oh wait i'll try to do that
@kirbyedy hey this is akward, how to i do that offset thingy
kirbyedy
@kirbyedy
Jun 01 2017 11:25
something like this: offset().top-100
here is the documentation for it
Emilio Gumayagay
@ergumayagay
Jun 01 2017 11:28
@kirbyedy oh thanks, honestly i didnt dive into jquery that much yet
CamperBot
@camperbot
Jun 01 2017 11:28
:star2: 2089 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
ergumayagay sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
Emilio Gumayagay
@ergumayagay
Jun 01 2017 11:44
@kirbyedy is there any way to do that without using jquery yet?
Emilio Gumayagay
@ergumayagay
Jun 01 2017 12:07
my internal links on my panels don't work properly can anyone tell me whats wrong https://codepen.io/ergumayagay/details/oWKJXO/
Adrian Padurean
@Securiteru
Jun 01 2017 12:12
Uhm guys, weird question: where do I find a list of DIV classes?
h1tag
@h1tag
Jun 01 2017 12:15
@Securiteru you mean Bootstrap classes?
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:19
@Securiteru ? you make them up so there is none.
<div class="kitteh"> <h1>My kitteh div</h1></div>
Adrian Padurean
@Securiteru
Jun 01 2017 12:21
what do you mean you make them? I know you can create your own sure but classes like "container-liquid" are from a source, right?
yes bootstrap classes for divs
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:23
Ah yes, if you're using a framework, they'll be documented in your framework. https://v4-alpha.getbootstrap.com/components
Brian
@Cornielle
Jun 01 2017 12:23
Good Morning ppl
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:23
hello @Cornielle :coffee:
Brian
@Cornielle
Jun 01 2017 12:24
@baseballpoetess :)
Adrian Padurean
@Securiteru
Jun 01 2017 12:24
@Jhinox, yes, that would be it, ty!
CamperBot
@camperbot
Jun 01 2017 12:24
securiteru sends brownie points to @jhinox :sparkles: :thumbsup: :sparkles:
:cookie: 246 | @jhinox |http://www.freecodecamp.com/jhinox
Brian
@Cornielle
Jun 01 2017 12:26
@baseballpoetess mag , i want to make 3 rounded buttons , but i cant keep in the center these buttons i want the buttons are in center with margin and full responsive , you know about a code that works perfectly? look that template
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:26
Okay, in the center of your <div> ?
Brian
@Cornielle
Jun 01 2017 12:27
look
uhmm yess
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:28
Are you trying to replicate that?
Brian
@Cornielle
Jun 01 2017 12:28
in the bottom we have 3 buttons and if you resize you will see that have responsive perfectly i want to make that
yes
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:29
Brian
@Cornielle
Jun 01 2017 12:29
:/ my work is to strange , and my objetive is try to replicate that section
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:29
(in terms of positioning? ) if so, yes, I know how.
Brian
@Cornielle
Jun 01 2017 12:30
ok looks good but look that when i open the html or js , the buttons change your structure
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:30
YOu have to click it -- the preview is wrong and shows them on the left
Brian
@Cornielle
Jun 01 2017 12:30
i think is positioning , you re right thats my basic big problem
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:31
Okay, if you look at the CSS in my codepen .... i have a <buttons> div and 3 buttons.
Brian
@Cornielle
Jun 01 2017 12:31
@baseballpoetess oh is true
right
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:31
*2
typo
You could add more buttons and they'd spread in the space alloted.
Fork it and copy one of the buttons and you'll see it work.
Brian
@Cornielle
Jun 01 2017 12:32
let me see okay
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:32
The css for each button shows how it's constructed....they're different IDs becuase they do different things but they're the same .... stuff inside.
Brian
@Cornielle
Jun 01 2017 12:33
@baseballpoetess works pretty nice
what is the different bewteen percent and pixels in the case of margins and paddings?
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:33
I was gonna do facebook but decided to move on, that's how I know 3 buttons or 4 or whatever would work.
% is a percentage of the ...space. pixels is number of pixels.
Brian
@Cornielle
Jun 01 2017 12:35
ok , understood
thanks @baseballpoetess
CamperBot
@camperbot
Jun 01 2017 12:35
cornielle sends brownie points to @baseballpoetess :sparkles: :thumbsup: :sparkles:
:cookie: 443 | @baseballpoetess |http://www.freecodecamp.com/baseballpoetess
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:35
you're welcome.
Brian
@Cornielle
Jun 01 2017 12:35
i will to study your structure in css more and i will try with that
the js is mandatory?
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:35
The js is for the random quote and tweeting it, not for the spacing of the buttons.
so you don't need to look at it.
Brian
@Cornielle
Jun 01 2017 12:36
@baseballpoetess Good :smile:
@baseballpoetess omg align-items?? in the dom that property work for divs?
is the similar sentence like float:left, float:right? etc.?
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:40
Yeah, I'm just learning it. I read about it on w3schools
I think it's useful for .... multiples whereas left-right is good if you have two of something.
Brian
@Cornielle
Jun 01 2017 12:41
these things is when certainly persons cant understand , this part of my life is called happyness XD
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:41
:cake:
Brian
@Cornielle
Jun 01 2017 12:41
you say two things or more?
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:42
more than two.
But 2 is okay.
I originally had 3 cuz I was gonna do facebook too.
I decided to move forward since facebook wasn't in the user story.
Brian
@Cornielle
Jun 01 2017 12:43
okay
goo
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:44
One would be okay. It's ... you can scale it if you start it out with one.
Brian
@Cornielle
Jun 01 2017 12:46
okay , good
but look in this case i try to coment the align but i didnt see the effect
i try to look it
for example right now i dont have align-item , and works fine
but i just have the 3 buttons
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:48
Oh, okay.
Brian
@Cornielle
Jun 01 2017 12:49
i see the display flex is more important
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:49
Yes.
Brian
@Cornielle
Jun 01 2017 12:49
i will read about align and display , is too important
J-Mag Guthrie
@baseballpoetess
Jun 01 2017 12:49
I have to go. I'll be back on later though.
It's 7:50ish here and I need to shower ... lol
Brian
@Cornielle
Jun 01 2017 12:50
@baseballpoetess ok thanks for all
CamperBot
@camperbot
Jun 01 2017 12:50
cornielle sends brownie points to @baseballpoetess :sparkles: :thumbsup: :sparkles:
:warning: cornielle already gave baseballpoetess points
Brian
@Cornielle
Jun 01 2017 12:50
jejeje good
kirbyedy
@kirbyedy
Jun 01 2017 13:00
@ergumayagay maybe here: http://youmightnotneedjquery.com/
Tardigra
@Tardigra
Jun 01 2017 13:18
Hi there, I am currently working on the "local Weather" app. How do you deal with Icons? Did you upgrade CodePen to Pro or can you recommend weather-icons ready to use without downloading them? --- Thank's for your help.
Nikola Mitrovic
@mitar06
Jun 01 2017 13:48
Hello, I am no the local weather app too, and a can't seem to get anything form the API, any ideas why?
Brandon Blackwell
@Radlerz1
Jun 01 2017 13:48
send your pen
h1tag
@h1tag
Jun 01 2017 13:52
@mitar06 if you're using openweather, use another one like: darksky or apixu
Brandon Blackwell
@Radlerz1
Jun 01 2017 13:55
your using the sample call?
h1tag
@h1tag
Jun 01 2017 13:56
add ?callback=? at the end
@mitar06
if you check the browser you're getting a CORS error, this fixes it
Nikola Mitrovic
@mitar06
Jun 01 2017 13:58
Thanks, that did the trick, why is this necessary?
h1tag
@h1tag
Jun 01 2017 14:04
@mitar06 read the comments in this code: https://codepen.io/skycoder/pen/EmdVBL
Thanks @SkyC0der
CamperBot
@camperbot
Jun 01 2017 14:06
h1tag sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1572 | @skyc0der |http://www.freecodecamp.com/skyc0der
Nikola Mitrovic
@mitar06
Jun 01 2017 14:07
Thanks @h1tag
CamperBot
@camperbot
Jun 01 2017 14:07
mitar06 sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 820 | @h1tag |http://www.freecodecamp.com/h1tag
rfvergeldedios
@rfvergeldedios
Jun 01 2017 14:11
Hi, Having trouble getting the logic down on the Twitch Tv API. So, I can now display if an account is inactive or does not exist and if the stream is online. What I'm stuck in is would I have to nest getJSONs to retrieve /users/ data and /streams/ data to display users with existing accounts but are offline?
Brandon Blackwell
@Radlerz1
Jun 01 2017 14:14
can you rephrase that question? I don't fully understand what your asking @rfvergeldedios
rfvergeldedios
@rfvergeldedios
Jun 01 2017 14:16
So, to get the non-existing account, I accessed /users/ to figure out which accounts in the given array are inactive/non-existing. To get the active and currently online streams, I went to /streams/.
What I'm stuck in right now is how to filter and display the accounts that exist but are offline?
prince verma
@verma-o
Jun 01 2017 14:25
<header >

 <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
     <div class="navbar-header">
        <a href="#" class="navbar-brand">
         <img src="https://openclipart.org/download/244323/ColoredMandala.svg" alt="image " class="svg-img img-responsive" />
         </a>
        <div class="collapse navbar-collapse navbarHeader">
         <ul class="nav navbar-nav navbar-right">
            <a href="#">About</a>
            </ul>
         </div>
        </div>

     </div>

    </nav>

</header>
Why is that "about " is not showing ?
on the screen
rfvergeldedios
@rfvergeldedios
Jun 01 2017 14:26
@verma-o try to add <li> before and </li> after
prince verma
@verma-o
Jun 01 2017 14:27
i just did, still not showing
i am facing this problem for like 4 hour and frustrated now
Brandon Blackwell
@Radlerz1
Jun 01 2017 14:30
<li><a>whatever goes here</a></li>
prince verma
@verma-o
Jun 01 2017 14:30

 <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
     <div class="navbar-header">
        <a href="#" class="navbar-brand">
         <img src="https://openclipart.org/download/244323/ColoredMandala.svg" alt="image " class="svg-img img-responsive" />
         </a>
        <div class="collapse navbar-collapse navbarHeader">
         <ul class="nav navbar-nav navbar-right">
            <li><a href="#">About</a></li>
            </ul>
         </div>
        </div>

     </div>

    </nav>
i did still not working :worried:
Brandon Blackwell
@Radlerz1
Jun 01 2017 14:31
@rfvergeldedios try calling and api with a user offline and a user online. Than use that info to manipulate what data you want to retrieve/display
Idk I was up to late. I'm drawing blanks myself today quite a lot
rfvergeldedios
@rfvergeldedios
Jun 01 2017 14:36
@Radlerz1 Going through /users/ and /channels/ to see if i missed something. Is there a way to view the api data so that it doesn't look like a one line of text that came from notepad.exe? At least have the variables and data arranged like an xml file.
Brandon Blackwell
@Radlerz1
Jun 01 2017 14:37
something like this maybe
what I use
rfvergeldedios
@rfvergeldedios
Jun 01 2017 14:38
@Radlerz1 Thanks. I was running out of eyedrops. :)
CamperBot
@camperbot
Jun 01 2017 14:38
rfvergeldedios sends brownie points to @radlerz1 :sparkles: :thumbsup: :sparkles:
:cookie: 298 | @radlerz1 |http://www.freecodecamp.com/radlerz1
Brandon Blackwell
@Radlerz1
Jun 01 2017 14:38
haha yeah that makes thing way easier
Brian
@Cornielle
Jun 01 2017 14:42
HELLO friends , i have a questions
question*
What is necesary to know and to have , for make a webpage like freepik , pixabay etc?
Ayush Kumar
@Gr8ayu
Jun 01 2017 14:51
what is the link of bootstrap that should be added in head ??
Ken Haduch
@khaduch
Jun 01 2017 14:58
@Gr8ayu - you probably want Version 3? this link: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
Gulsvi
@gulsvi
Jun 01 2017 14:59
@Gr8ayu It depends on which version you want to use. Here is the documentation for Bootstrap 3 and 4 - the links to the CSS and JS for those versions can be found in the getting started sections:
Ayush Kumar
@Gr8ayu
Jun 01 2017 14:59
@SkyC0der @khaduch thnx
CamperBot
@camperbot
Jun 01 2017 14:59
gr8ayu sends brownie points to @skyc0der and @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1573 | @skyc0der |http://www.freecodecamp.com/skyc0der
:star2: 2933 | @khaduch |http://www.freecodecamp.com/khaduch
Gulsvi
@gulsvi
Jun 01 2017 15:00
@Cornielle Most people here use https://postimage.org for images
Ayush Kumar
@Gr8ayu
Jun 01 2017 15:00
I am coding on codepen and someone told me that its default bootstrap version doesnt support much
Brian
@Cornielle
Jun 01 2017 15:01
@SkyC0der ok , i see that :)
@SkyC0der but im talking about how works that business
Gulsvi
@gulsvi
Jun 01 2017 15:01

@Gr8ayu Correct, the default is version 4, we learn version 3 at Free Code Camp. Click "Settings", then "CSS" and add this one:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

Then click "JavaScript" and add these two libraries (the order is important, jQuery must go first):
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

Ayush Kumar
@Gr8ayu
Jun 01 2017 15:02
@SkyC0der what is the use of these javascript library ??
Gulsvi
@gulsvi
Jun 01 2017 15:03
@Cornielle Maybe this will help :) http://www.wikihow.com/Set-up-an-Image-Hosting-Site
@Gr8ayu Bootstrap has some features that require JavaScript. Their javascript library uses jQuery: http://getbootstrap.com/javascript/
If you don't use those features, you don't need to add jQuery or Bootstrap.js
Ken Haduch
@khaduch
Jun 01 2017 15:06
@Gr8ayu - the default for CodePen's bootstrap "quick adds" is V4. It supports a lot (maybe most) of the previous version, but you have to account for several differences that exist. Some of the changes are significant. Since the lessons are based on V3, it's best to stay with that for now. In addition, V4 is "alpha" version, so it might change as time goes on. There is a migration document that lists differences, if you want to see what's there. https://v4-alpha.getbootstrap.com/migration/ - if you are up for making the switch, and tracking ongoing changes that might happen, using V4 is fine. I would say that V3 is the path of least resistance at this point in time?
Gulsvi
@gulsvi
Jun 01 2017 15:06
@Cornielle As far as making money - I'm guessing most image hosting sites use ads and harvest data about what users are doing on their site.
Brian
@Cornielle
Jun 01 2017 15:07
@SkyC0der is true , i agree
Ayush Kumar
@Gr8ayu
Jun 01 2017 15:13
@khaduch @SkyC0der thnx for telling me these in detail.
CamperBot
@camperbot
Jun 01 2017 15:13
gr8ayu sends brownie points to @khaduch and @skyc0der :sparkles: :thumbsup: :sparkles:
:warning: gr8ayu already gave skyc0der points
:warning: gr8ayu already gave khaduch points
Ken Haduch
@khaduch
Jun 01 2017 15:15
@Gr8ayu :+1:
Kevin
@mybaseball52
Jun 01 2017 15:18
HI, I want to ask the challenge Build a Random Quote Machine, hoiw can I make the post be tweet? I wrote like this
$("#tweet").click(function(){
    if(!inIframe()) {
      openURL('https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" ' + currentAuthor));
    }
  })
Ayush Kumar
@Gr8ayu
Jun 01 2017 15:19
@khaduch is there any code to make <div> appear in center of screen vertically?
@SkyC0der
Gulsvi
@gulsvi
Jun 01 2017 15:20
@Gr8ayu What code have you tried so far?
Happy to help you fix it if it isn't working for you
@mybaseball52 What does inIframe() do?
Ayush Kumar
@Gr8ayu
Jun 01 2017 15:21
@SkyC0der I dont know anything like that for vertical , for horizontal align:auto;
PipsChips
@PipsChips
Jun 01 2017 15:21
Hi! Could someone pls check my JS code, and help me getting JSON object for the 'Show the Local Weather' project:
https://codepen.io/PipsChips/pen/XpYvdm
Give that stuff a try first, if it doesn't work, show us your code and we can see how to help ^^ :)
Kevin
@mybaseball52
Jun 01 2017 15:22
@SkyC0der
It does
function inIframe () { try { return window.self !== window.top; } catch (e) { return true; } }
Gulsvi
@gulsvi
Jun 01 2017 15:23
@mybaseball52 I'm curious, what is the purpose of that code?
PipsChips
@PipsChips
Jun 01 2017 15:23
srry, pls check this one: https://codepen.io/PipsChips/pen/XpYvdm
Gulsvi
@gulsvi
Jun 01 2017 15:23
(I didn't need anything like that for my Tweet button)
Kevin
@mybaseball52
Jun 01 2017 15:24
@SkyC0der Oh, I just learn from the sample code.
Gulsvi
@gulsvi
Jun 01 2017 15:25
@PipsChips Open your browser's debug console (Ctrl+Shift+J on Windows/Linux, Command + Option + J on Mac)
@Securiteru You're welcome
@mybaseball52 Your code looks good to me - I just don't understand what your inIframe function is used for.
Kevin
@mybaseball52
Jun 01 2017 15:30
@SkyC0der I courious how can you tweet the quote, is there any guide to follow it?
I search the words "tweet a post" and yet get what I want
Andrew Hickman
@ahickman3
Jun 01 2017 15:30
quick question, when i use vh it sets the height of that text box in relation to (even tho the parent does not have position: relative) the parent block, but when i use rem, it sets the text block in relation to the web page. Any idea why that is so?
Gulsvi
@gulsvi
Jun 01 2017 15:30
@mybaseball52 This is the documentation on the twitter website: https://dev.twitter.com/web/tweet-button/web-intent
Basically: https://twitter.com/intent/tweet?text=hello world to tweet the text "hello world"
Kevin
@mybaseball52
Jun 01 2017 15:31
@SkyC0der
Oh, thank you!
CamperBot
@camperbot
Jun 01 2017 15:31
mybaseball52 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1574 | @skyc0der |http://www.freecodecamp.com/skyc0der
Andrew Hickman
@ahickman3
Jun 01 2017 15:32
trying to learn responsive design and its goin eh lol anyone know the logic?
Gulsvi
@gulsvi
Jun 01 2017 15:32
@fullmetal7777 vh should be relative to the viewport, rem should be relative to the font size you have set for html or body
Andrew Hickman
@ahickman3
Jun 01 2017 15:33
@SkyC0der the text is in a div block, and thats what getting the property. So top: 34rem with change the position relative to the viewport, while #vh will change the position relative to its div block parent
Gulsvi
@gulsvi
Jun 01 2017 15:34
@fullmetal7777 Change the font-size of your body element and see how your top: 34rem changes
vh has no relation to a div block or parent element - it is completely relative to your viewport (the size of your browser window)
5vh = 5% the height of your window
Andrew Hickman
@ahickman3
Jun 01 2017 15:36
@SkyC0der i do understand that part, ive done a little research on em and rem to atleast understand how they work, but its changing the view in relation to different elements thats confusing me.
@SkyC0der I think i may have figure it out. my background picture actually going above the viewport, but i guess its still technically in html? so the top of the page is farther up than the viewport? im not sure. Bottom with vh works but top with vh does not work as id expect it
@fullmetal7777 basically with top: #vh its acting like the page goes higher than can actually be viewed
Gulsvi
@gulsvi
Jun 01 2017 15:38
@fullmetal7777 I'm not sure what you're looking at :) but if you can show me what's going on, I can try and help explain it better
Andrew Hickman
@ahickman3
Jun 01 2017 15:38
@SkyC0der codepen messes up my view completely, but i can atleast put my code in there and you can throw it on your ide and view it? sorry for the trouble lol
@fullmetal7777 so bascially, bottom: #vh under .scuba-text works as you would think, but top: #vh does not
Gulsvi
@gulsvi
Jun 01 2017 15:40
@fullmetal7777 Codepen is "messing up your code" because you aren't using the settings correctly.
Andrew Hickman
@ahickman3
Jun 01 2017 15:40
@fullmetal7777 i have no clue why codepen fudged up the view so much, but it looks fine when i open it through chrome, also all the images are getting from urls. Here the code on a website im hosting http://andrewsawesomesite.com/
Ejikemeuwa Eric Nnanna
@melete90
Jun 01 2017 15:40
Hi guys, <div class="jumbotron"></div> doesn't work. please what do I do?
Gulsvi
@gulsvi
Jun 01 2017 15:41

All of this:

<script src="https://use.fontawesome.com/717f3e0b5b.js"></script>
<link rel="stylesheet" href="main.css">
<link href='https://fonts.googleapis.com/css?family=Cinzel|Alegreya SC' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Cinzel' rel='stylesheet'>

<html>
    <head>
        <title>Tribute to My Father</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

Needs to go in the settings section

Andrew Hickman
@ahickman3
Jun 01 2017 15:41
@SkyC0der It loads correctly on the website though? Seems to be codepen to me, but maybe im missing something
@SkyC0der id trust it working on chrome than codepen lol
Gulsvi
@gulsvi
Jun 01 2017 15:41
@fullmetal7777 codepen's HTML panel should only have the stuff between your <body> tags.
everything else goes in settings - then it will work like anywhere else
Andrew Hickman
@ahickman3
Jun 01 2017 15:42
@SkyC0der ahh im sure there was a reason, i just had no clue. Sorry about that, never knew that lol
Gulsvi
@gulsvi
Jun 01 2017 15:43
Plus, I'm not sure how your website is working elsewhere when you have fonts and stylesheets defined outside of your <html> tags
JD Tadlock
@jdtdesigns
Jun 01 2017 15:43
@fullmetal7777 You should also avoid the use of floats these days. Flexbox's support is strong ;)
Gulsvi
@gulsvi
Jun 01 2017 15:44
@fullmetal7777 Set it up this way for starters and see if you're noticing the same behavior: https://codepen.io/skycoder/pen/RgbKLq?editors=1000
Andrew Hickman
@ahickman3
Jun 01 2017 15:45
@SkyC0der i took off the scripts in the html and still no change :/ also i linked them correctly in the settings first. I always figured you linked everything outside of the html tag. See, these are the important things that i need to be learning, so thank you lol
CamperBot
@camperbot
Jun 01 2017 15:45
fullmetal7777 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1575 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Jun 01 2017 15:46
@fullmetal7777 This is a good reference: https://github.com/joshbuchea/HEAD
Andrew Hickman
@ahickman3
Jun 01 2017 15:47
@jdtdesigns which part do yo umean by floats?
Ejikemeuwa Eric Nnanna
@melete90
Jun 01 2017 15:47
<div class="jumbotron"></div> does not work on my computer, what do i do?
Gulsvi
@gulsvi
Jun 01 2017 15:48
And, yeah, as long as you don't care about Internet Explorer, you can use flexbox and ditch the floats. Otherwise, it gets messy.
Think JD's referring to:
#nav-head-text{
    float: left;
    margin: 1px 0 0 0;
}
PipsChips
@PipsChips
Jun 01 2017 15:48
@SkyC0der
srry, this one is the last version:
https://codepen.io/PipsChips/pen/XpYvdm
Andrew Hickman
@ahickman3
Jun 01 2017 15:48
@SkyC0der so removie the head, html and body tag? is that the only changes you made? aside from adding all the external links in the settings, which i did
Gulsvi
@gulsvi
Jun 01 2017 15:49
@fullmetal7777 And I put your <script> at the very bottom of the HTML panel
@PipsChips Everything must use HTTPS now in codepen - your HTTPS proxy is blocked because it's ultimately going through a HTTP endpoint.
PipsChips
@PipsChips
Jun 01 2017 15:50
I've changed the http-image with a htttps-animation, and tried to get json using https://crossorigin.me/ as an url's prefix
Andrew Hickman
@ahickman3
Jun 01 2017 15:51
@SkyC0der what i would set the display to flex and use margin to move the div objects?
Gulsvi
@gulsvi
Jun 01 2017 15:51
Mixed Content: The page at 'https://s.codepen.io/PipsChips/pen/XpYvdm?editors=0010' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.openweathermap.org/data/2.5/weather?......'. This request has been blocked; the content must be served over HTTPS.
@fullmetal7777 You would use flexbox justify-content I believe: https://css-tricks.com/almanac/properties/j/justify-content/
@PipsChips The only fix for your weather app is to host it on a different server or use a different Weather API that supports HTTPS for free (like Dark Sky)
Andrew Hickman
@ahickman3
Jun 01 2017 15:54
@SkyC0der okie doke, i fixed that, lemme re-upload my stuff, one sec.
PipsChips
@PipsChips
Jun 01 2017 15:55
@SkyC0der
ok, thnx. gonna try that site
CamperBot
@camperbot
Jun 01 2017 15:55
pipschips sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1576 | @skyc0der |http://www.freecodecamp.com/skyc0der
JD Tadlock
@jdtdesigns
Jun 01 2017 15:55
Here's some global stats for browser usage. Unless your site is directed towards an older clientele, there's no reason to support ie 10 and below. IE11 supports flexbox with prefixes. http://gs.statcounter.com/
Gulsvi
@gulsvi
Jun 01 2017 15:55
@PipsChips Good luck :+1: this is a pain for many people right now :(
Andrew Hickman
@ahickman3
Jun 01 2017 15:56
@SkyC0der https://codepen.io/fullmetal7777/pen/bWzegK things are atleast showing up now, but still trash view lol http://andrewsawesomesite.com/ is what it should look like
@SkyC0der i think its not showing that first background images. I had a lot of trouble getting images to show up on codepen until i eventually just gave up on it
@SkyC0der i used like 4 different image hosting website and still nothing
Gulsvi
@gulsvi
Jun 01 2017 15:57
@fullmetal7777 with class names like this <li class="nav-links">, are you supposed to have bootstrap in your project? Or just using the same class names?
Andrew Hickman
@ahickman3
Jun 01 2017 15:58
@SkyC0der no bootstrap, wanted to do this all without it so i could learn as much as possible. Id say worth it so far though, i have learned a lot. Want to try to get the responsive design solo on the first shot
@SkyC0der its just coincidence, i didnt even know that was a class name on bootstrap lol
Gulsvi
@gulsvi
Jun 01 2017 15:58
I learned that by using bootstrap, getting comfortable with it, and then by studying how bootstrap did it. :)
@fullmetal7777 This conversation started around vh and rem - what are you looking for help with exactly? :p
JD Tadlock
@jdtdesigns
Jun 01 2017 15:59
I always recommend starting with vanilla css, then moving to BS. If you don't know what BS is doing, you can kind of get the mindset that it's what css is.
Gulsvi
@gulsvi
Jun 01 2017 16:00
And you did say it was a quick question lol
Top down, or bottom up. Different ways to learn things I guess
JD Tadlock
@jdtdesigns
Jun 01 2017 16:00
I do recommend learning jQuery before vanilla though ;)
Gulsvi
@gulsvi
Jun 01 2017 16:01
Free Code Camp goes Top down by teaching Bootstrap + jQuery I guess
Many would argue that just creates devs who don't know how to code though...
JD Tadlock
@jdtdesigns
Jun 01 2017 16:02
It gives you an understanding in human words what javascript is doing
so when you jump into vanilla document.body.style.display = 'none'; makes a little sense ;)
Deepanshu Chug
@deepanshuchg
Jun 01 2017 16:03
can somebody help me with some css? I want to display 4 boxes align as in microsoft's logo.
Andrew Hickman
@ahickman3
Jun 01 2017 16:04
@SkyC0der yeah you can bet ill be using it from now on. but if i had used it i doubt i would have ever even realized how responsive design works. okay so the original question was regarding the text in front of the first background image (which isnt showing up on codepen at all, i guess just look at my website). When i try to position the text with top= #vh, and minimize the page, it acts like the top of the page goes beyond the browser and positions it with respect to that. But when i use bottom=#vh, it works as you would expect with mizmizzing (always stays #vh away from the bottom of the viewport). Now, i know that a good bit of the first background image goes above the page, so its hidden, but the viewport doesnt extend to that i thought?
Gulsvi
@gulsvi
Jun 01 2017 16:04
@fullmetal7777 I didn't mean to scare you away, happy to help by the way :)
Andrew Hickman
@ahickman3
Jun 01 2017 16:04
@SkyC0der was just writing a huge block a text haha your a great help. Any bit of information i get down helps me a ton
Gulsvi
@gulsvi
Jun 01 2017 16:04
lol, okay
Andrew Hickman
@ahickman3
Jun 01 2017 16:05
@SkyC0der Just trying to be a sponge-like as possible. I am one with the knowledge-sponge
Gulsvi
@gulsvi
Jun 01 2017 16:05
I am one with the sponge, the sponge is with me
@fullmetal7777 To answer that vh question, I think it'll help to have less code. You have a lot of complicated things going on in your web page right now.
(Just to explain the concept and see the conflicts)
Like this, seems overly-complex:
.scuba-bg{
    background-image: url("http://res.cloudinary.com/dfnn1jyt7/image/upload/v1495832716/pic1_lulilj.jpg");
    background-position: center;           /*this will keep the background picture centered no matter the browser size*/
    background-size: cover;                /*scale background image so that it completely covers the background (may crop image)*/
    background-repeat: no-repeat; 
    background-attachment: fixed;          /*create parallax scrolling affect by fixing image to background block*/
    transform: translateY(-173px);         /*used to move picture up, margins wouldnt work because picture is fixed*/
    margin-bottom: -270px;                 /*crop bottom of picture*/
    height: 100%</