These are chat archives for FreeCodeCamp/HelpFrontEnd

25th
Jan 2017
Coy Sanders
@coymeetsworld
Jan 25 2017 00:02
@VanAmoVe looks good so far, I would recommend using a different font and color for your test though
Dan Anderson
@Danderson1603
Jan 25 2017 00:03
Hey! Just about finished my tribute page. Could you have a look and give me some feedback. I just need to center the video at the bottom (any tips) and also add a caption to the picture. Thanks https://codepen.io/Danderson1603/full/WROZao
Coy Sanders
@coymeetsworld
Jan 25 2017 00:03
the color doesn't contrast well with the background and a serif type font would be easier to read a description
looks clean @Danderson1603
maybe put a little space between the main picture and description above but besides that looks good to me
Salomon
@zarruk
Jan 25 2017 00:37
@jdtdesigns Thanks for your help! However, what I want to know is how you did for the elements to be in the center
CamperBot
@camperbot
Jan 25 2017 00:37
:cookie: 883 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
zarruk sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
Salomon
@zarruk
Jan 25 2017 00:48
@jdtdesigns ok nevermind, i already found out
hernanfinucci
@hernanfinucci
Jan 25 2017 00:51
heyy guys im doing the build a quote generator and i dont know if im supposed to write 300 quotes or there is an algorithm or something
does someone know im really stuck
Tom
@moT01
Jan 25 2017 00:58
@hernanfinucci use a quote api, -it will give you a random quote from their site
check out quotesondesign.com --check out their api docs, they give a pretty good explanation on how to use it
Karla N Aguilar
@knaguilar
Jan 25 2017 01:15
hey guys! So I'm about to start the Local Weather Project and I was just wondering if anyone knew whether the best way to tackle this project is to use a weather api or if there is a simpler way like by grabbing the geolocation and somehow finding out the weather? Thanks :)
Tyler Moeller
@TylerMoeller
Jan 25 2017 01:25
@Toffanelly If you have your codepen loaded via https:// you cannot call an API over HTTP. If you want to use Open Weather Map over HTTPS, you have to pay :( so it's best to use a different weather API, a different location API, or both: https://forum.freecodecamp.com/t/show-the-local-weather-openweathermap-warning/60292
:point_up: January 24, 2017 1:00 PM
@nikkilr88 You'll have to right-click the page and select "view source" to see how they are incorporating bootstrap.
@vberrios To use font awesome, do this:
<!DOCTYPE html>
<html >
  <head>
   <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
  </head>
  <body>
  </body>
</html>
Tyler Moeller
@TylerMoeller
Jan 25 2017 01:32
@artoodeeto No, bootstrap doesn't make it so you don't media queries.
It really depends on what you want to do - bootstrap mainly helps with the responsive grid, which takes care of some of the media query logic. Take a look at their .css file to see what they do: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css
@knaguilar Depending on the weather API you use, you'll likely have to get the location first, and then get the weather using the location. To avoid headaches, choose a weather API that supports HTTPS, like Weather Underground, Apixu, or Dark Sky.
Salomon
@zarruk
Jan 25 2017 01:37
@zarruk
Does anybody know why my variables are not being displayed? https://codepen.io/zarruk/pen/VPWrWL?editors=1010
for example, after $(".defTiempo").html(definirTiempo);, definirTiempo is not being displayed in the defTiempo class div
Coy Sanders
@coymeetsworld
Jan 25 2017 01:40
typo @zarruk var definirTiempo: "4";
Jessi L Wasell
@JessiW
Jan 25 2017 01:41
Hi - I'm needing some help with a DataViz React project - but there doesn't seem to be anyone in that room - could someone help me?
I'm working on my Camper Leaderboard - and right now I'm trying to get just one username to display on the page at the moment to test my code. Problem is its not displaying on the page and I'm not sure why. I don't have any errors to show me why.
Here's my pen if anyone would like to take a look:
Salomon
@zarruk
Jan 25 2017 01:44
@coymeetsworld argggghh hahahaha i was having a tough time. thanks!
CamperBot
@camperbot
Jan 25 2017 01:44
zarruk sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 1923 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
Jessi L Wasell
@JessiW
Jan 25 2017 01:44
I wondered if things are rendering before its received the info from the API - but I kind of don't think so because I can console.log() any of the info and get it back from the API in the console.
Tyler Moeller
@TylerMoeller
Jan 25 2017 01:46
blob
@JessiW I haven't started looking at your code yet, but what are you trying to do with these resources?
Plus, you have html, head, and body tags in your html - codepen can do some odd things if you include those.
Jessi L Wasell
@JessiW
Jan 25 2017 01:48
Well, I don't really need the jquery library anymore - I had been working with jquery until another camper told me that wasn't a good idea to do with react - I'll remove that one and come back - hold on.
@TylerMoeller
Okay - its removed - anyway - I had the non minified version of react in there to get more descriptive error messages
I eventually planned on taking all but minified out for the finished product - the non-minified versions are just there for debugging purposes right now - does that make sense?
@TylerMoeller
Tyler Moeller
@TylerMoeller
Jan 25 2017 01:51
Yes, I just saw both minified and uniminifed, from different sources and thought you might want to clean it up before debugging further
Jessi L Wasell
@JessiW
Jan 25 2017 01:51
Well, they are actually there for debugging - should I take the non-minified out now?
@TylerMoeller
Tyler Moeller
@TylerMoeller
Jan 25 2017 01:52
@JessiW From what I know, you shouldn't use the minified react and react-dom until you are finished with the code
Jessi L Wasell
@JessiW
Jan 25 2017 01:53
okay - I'll take it out and we'll see what happens then :) @TylerMoeller
Tyler Moeller
@TylerMoeller
Jan 25 2017 01:53
Hopefully, it provides some meaningful message :)
I will try to take a look in a bit - just noticed that right away as I was going to eat dinner :pizza:
Salomon
@zarruk
Jan 25 2017 01:54
would you guys use the setInterval() function for the pomodoro clock project?
Jessi L Wasell
@JessiW
Jan 25 2017 01:54
okay just the non-minified there now.... I have no error tho! okay - Thank you and have a great dinner :) @TylerMoeller
CamperBot
@camperbot
Jan 25 2017 01:54
jessiw sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1403 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tom
@moT01
Jan 25 2017 01:57
@zarruk i think thats what i used
it is
John Nunns
@johnnunns
Jan 25 2017 02:18
var obj = {
  key: [1000, 10, 50, 10]
}
function getElementsThatEqual10AtProperty(obj, key){
for (var i = 0; i<obj[key].length; i++){
    return i
}

return i
}
getElementsThatEqual10AtProperty(obj, 'key');
why am I returning 0 here?
Tom
@moT01
Jan 25 2017 02:20
@johnnunns the second return i ...i shouldn't be available there
Brandon Armstrong
@calmcoolcollected
Jan 25 2017 02:21
Could someone help me with my pomodoro clock? Right now the problem is that when the clock switches to the break time ("Relax"), I can't seem to pause the clock (done by clicking the big button) and then clicking it again makes it go faster. There's something wrong with the break interval but I can't seem to figure it out. Possibly a scope problem or things being out of order? http://codepen.io/brandon327/pen/mREZaN/?editors=0010
Tom
@moT01
Jan 25 2017 02:22
youre not testing anything, it just returns 0 in the first loop
@calmcoolcollected you got it working for the session, you would think you could replicate it for the break
Tom
@moT01
Jan 25 2017 02:28
@calmcoolcollected i feel like something is slipping through in the logic on your pomo.click
Brandon Armstrong
@calmcoolcollected
Jan 25 2017 02:30
Definitely possible. I'm not following with the returning 0 part, what do you mean exactly?
Tom
@moT01
Jan 25 2017 02:32
ha, yea that's for the previous question
Brandon Armstrong
@calmcoolcollected
Jan 25 2017 02:34
Ah ok. But yeah, for some reason clearInterval() doesn't work on the break part. It does have an effect, but not the one that's intended. I've messing with it for a while but I'm getting nowhere.
themixedcoder
@themixedcoder
Jan 25 2017 02:36
Set the placeholder value of your text input to "cat photo URL?
some help
Tom
@moT01
Jan 25 2017 02:38
@calmcoolcollected yea, im taking a look, ...let me know if you figure it out
Brandon Armstrong
@calmcoolcollected
Jan 25 2017 02:40
@moT01 Ok, will do.
Chadd Williams
@chaddd980
Jan 25 2017 02:40
hey everyone. i am new to react and i'm having an issue with something that seems simple enough, but i just can't fully get it.
render() {
    var className = this.state.currentTurn === "X" ? "red" : "blue"
    return (
      <div className="board">
        {this.state.board.map((cell, index) => {
          return <div onClick={() => this.handleClick(index)} className={"square " + className}>{cell}</div>;
        })}
      </div>
    );
  }
so basically whats supposed to happen here, is that on click the currentTurn state changes from X to Y and vice versa. and then if its X i give the div a classname of red or blue if its Y. All of that is happening, except every single div is getting the red or blue classname. So basically it seems that every div is getting re-rendered. and i can't for the life of me figure out how to get it done for just one
Tom
@moT01
Jan 25 2017 02:43
@calmcoolcollected im getting close i think
alexbuster
@alexbuster
Jan 25 2017 02:43
I have a question in my attribute page my picture no longer shows can somebody tell my why?
Salomon
@zarruk
Jan 25 2017 02:44
Hello. Does anybody know why my clock is starting to run without me pressing the botonoabutton (start button)?
alexbuster
@alexbuster
Jan 25 2017 02:45
And also in my portfolio page my picture doesn't appear either only the icon can somebody help me pls.
Brandon Armstrong
@calmcoolcollected
Jan 25 2017 02:46
@moT01 Ok good, keep me updated.
Tom
@moT01
Jan 25 2017 02:48
its kind of a pain to troubleshoot
gotta wait
Brandon Armstrong
@calmcoolcollected
Jan 25 2017 02:49
@moT01 Yeah absolutely, no rush at all. Thanks for the help.
CamperBot
@camperbot
Jan 25 2017 02:49
calmcoolcollected sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 469 | @mot01 |http://www.freecodecamp.com/mot01
Tom
@moT01
Jan 25 2017 02:51
i mean, i gotta wait for the timer to go down to troubleshoot it
Brandon Armstrong
@calmcoolcollected
Jan 25 2017 02:54
@zarruk The problem is somewhere in your setInterval() function. Not sure exactly what yet.
Amit Patel
@AmitP88
Jan 25 2017 02:55
hey guys, about how much experience do I need in order to have a good chance at landing a jr front end dev position? I started freelancing november of last year...
Tom
@moT01
Jan 25 2017 02:57
@calmcoolcollected well, i got it working... at least on this test it worked. not sure what i did
i think its from taking the var out of the when you set the break
in the session
Brandon Armstrong
@calmcoolcollected
Jan 25 2017 02:59
@zarruk If I comment out this line at the start of your setInterval(): $(".transcurrido").html(mins + ":" + secs--);, the clock doesn't start. I'm going to guess that it's in the wrong place.
@moT01 Ok, one sec.
Salomon
@zarruk
Jan 25 2017 03:01
@calmcoolcollected no because if i press start, it wont start either
Tom
@moT01
Jan 25 2017 03:03
@calmcoolcollected yea, that seems to do the trick
Brandon Armstrong
@calmcoolcollected
Jan 25 2017 03:03
@moT01 Wow that seems to be it haha, I really should have caught that. So much headache over one small thing. Thank you again for the help.
CamperBot
@camperbot
Jan 25 2017 03:03
calmcoolcollected sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:warning: calmcoolcollected already gave mot01 points
Tom
@moT01
Jan 25 2017 03:03
man thats rough, 3 letters blew it all out of whack
there was at least one other thing i think you might need to add
setting session back to true at the end of the break
Brandon Armstrong
@calmcoolcollected
Jan 25 2017 03:06
@zarruk Ah ok, sorry the line isn't the problem. The problem is that your setInterval() isn't in another function so it starts once you load the page.
Salomon
@zarruk
Jan 25 2017 03:07
@calmcoolcollected so I have to put it inside another function?
Brandon Armstrong
@calmcoolcollected
Jan 25 2017 03:09
@moT01 Ok let me see, but yeah that's the next step. I want it to eventually loop at the end.
@zarruk I think you should. For example, in my clock my setInterval() is in my click(), so that it'll start once you hit the button.
yes you were right! thanks for your guidance!
@calmcoolcollected thanks!
CamperBot
@camperbot
Jan 25 2017 03:11
zarruk sends brownie points to @calmcoolcollected :sparkles: :thumbsup: :sparkles:
:cookie: 299 | @calmcoolcollected |http://www.freecodecamp.com/calmcoolcollected
Brandon Armstrong
@calmcoolcollected
Jan 25 2017 03:12
No problem :smile: . That was my first time helping someone, it was fun haha.
Drew Stonebraker
@drstonebraker
Jan 25 2017 03:46
I've been through all the entire section on JSON APIs and AJAX multiple times and I still have no idea what ajax is or how I used it or am supposed to use it for the projects. Looking at the zipline projects, I feel like I am completely lost and have no idea where to begin. I'm guessing I'm supposed to find my own API that provides random quotes? I found one but it talks about HTTP requests and I don't remember learning about that at all. I felt like all of the other lessons were very straightforward... even into the intermediate algorithms scripting I haven't had any trouble understanding what should be done. But I feel so lost on the ajax, HTTP requests, and APIs... and I can't figure out what lessons I'm even supposed to be looking at. Can anyone help?
Brandon Armstrong
@calmcoolcollected
Jan 25 2017 03:50
@drstonebraker I can try. What project are you trying to do exactly?
Drew Stonebraker
@drstonebraker
Jan 25 2017 03:51
@calmcoolcollected i was going to start with the random quote machine
Brandon Armstrong
@calmcoolcollected
Jan 25 2017 03:53
@drstonebraker Ok. You don't need an API for that one but you could use one.
Drew Stonebraker
@drstonebraker
Jan 25 2017 03:54
@calmcoolcollected when you say I don't need an api, are you just referring to hardcoding the different quotes?
Brandon Armstrong
@calmcoolcollected
Jan 25 2017 03:56
@drstonebraker Yup exactly. You can put a bunch in an array and randomly sort through it. Unless you're set on using an API.
Tom
@moT01
Jan 25 2017 03:56
@drstonebraker youre not crazy, they didn't give much direction or explanation with that section
i felt the same
Brandon Armstrong
@calmcoolcollected
Jan 25 2017 03:57
@moT01 Yeah definitely, I was lost when I got to the Twitch one.
Drew Stonebraker
@drstonebraker
Jan 25 2017 03:57
@moT01 thank you. They say in the first lesson that I'm going to learn about ajax, and I going through every lesson over and over and can't find anything at all about ajax.
CamperBot
@camperbot
Jan 25 2017 03:57
drstonebraker sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 471 | @mot01 |http://www.freecodecamp.com/mot01
Tom
@moT01
Jan 25 2017 03:57
i used quotesondesign.com , their api docs give some pretty good examples i tihnk
Drew Stonebraker
@drstonebraker
Jan 25 2017 03:59

@calmcoolcollected I would still need to use and API for the twitter thing tho, right?

Also, I would prefer to learn how to use an API for the quotes... because it's apparently something I should learn, and I have no idea about it. I'm confident I know how to randomly select a quote from a hardcoded array

@moT01 thank you I'll look into that
CamperBot
@camperbot
Jan 25 2017 03:59
drstonebraker sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:warning: drstonebraker already gave mot01 points
Tom
@moT01
Jan 25 2017 04:01
@drstonebraker for the twitter thing i just used a link
twitter link, with the info in the url
Brandon Armstrong
@calmcoolcollected
Jan 25 2017 04:02
@drstonebraker Yeah you don't need it for that either.
Drew Stonebraker
@drstonebraker
Jan 25 2017 04:02
ok ty
Brandon Armstrong
@calmcoolcollected
Jan 25 2017 04:03
@drstonebraker Good luck with AJAX and API's. Yeah learning it now will at least help with the later projects.
Darryl Lardizabal
@dsteven12
Jan 25 2017 04:04

Having trouble with an embedded video on my tribute site. After I put in the CSS code to position better, the video won't play.

https://codepen.io/dsteven12/pen/LxjWgy

afc9996
@afc9996
Jan 25 2017 04:07
Haha I was literally about to ask if someone has done the tribute page and how long it took them, how long has it taken you to write this code?
Darryl Lardizabal
@dsteven12
Jan 25 2017 04:08
Took me probably about 2 hours @afc9996.
Tom
@moT01
Jan 25 2017 04:08
@dsteven12 video works for me
Brandon Armstrong
@calmcoolcollected
Jan 25 2017 04:09
@dsteven12 The padding in your h3 element at the bottom is blocking the video.
Darryl Lardizabal
@dsteven12
Jan 25 2017 04:09
I scratched my old tribute page though @afc9996 and redid it. This is my first time through.
Brandon Armstrong
@calmcoolcollected
Jan 25 2017 04:10
@dsteven12 Try margin-top instead of padding-top.
Nice job by the way.
@dsteven12 Works for me now.
afc9996
@afc9996
Jan 25 2017 04:11
@dsteven12 Alright man thanks! Im going to go start one too, but im still stuck on the easy stuff, like i forget alot of things.
CamperBot
@camperbot
Jan 25 2017 04:11
afc9996 sends brownie points to @dsteven12 :sparkles: :thumbsup: :sparkles:
:cookie: 119 | @dsteven12 |http://www.freecodecamp.com/dsteven12
Darryl Lardizabal
@dsteven12
Jan 25 2017 04:12
thanks @calmcoolcollected
CamperBot
@camperbot
Jan 25 2017 04:12
:cookie: 300 | @calmcoolcollected |http://www.freecodecamp.com/calmcoolcollected
dsteven12 sends brownie points to @calmcoolcollected :sparkles: :thumbsup: :sparkles:
Sam
@Samwise12
Jan 25 2017 04:58
Does anyone know how to create a new directory via a button such as you click a button then it takes you from home '/' to '/1' or '/2' if 1 has been created??
Bikal Khawas
@bikalkhawas
Jan 25 2017 05:27
Yay finally! local weather app finished. http://codepen.io/bikal/pen/egRorN
JD Tadlock
@jdtdesigns
Jan 25 2017 05:28
@Samwise12 Are you talking about the url route?
@bikalkhawas Good job!
Bikal Khawas
@bikalkhawas
Jan 25 2017 05:29
@jdtdesigns Thank you. :smile:
CamperBot
@camperbot
Jan 25 2017 05:29
bikalkhawas sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 884 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Sam
@Samwise12
Jan 25 2017 05:30
@jdtdesigns yes the url route
JD Tadlock
@jdtdesigns
Jan 25 2017 05:31
@Samwise12 On codepen, you'd have to some tricky code to do it from scratch
That kind of thing is handled easily on a server for different html files
for a more complex routing setup, you'd use a framework
Tyler Moeller
@TylerMoeller
Jan 25 2017 05:32

@dsteven12 If you're trying to center it, just use the 'center-block' class:

<div class="row">
  <iframe id="themusk" class="center-block" src="https://www.youtube.com/embed/IgKWPdJWuBQ" width="360" height="230" frameborder="0" allowfullscreen??autoplay=1></iframe>
</div>

If you want to make it responsive, check out: http://getbootstrap.com/components/#responsive-embed

Sam
@Samwise12
Jan 25 2017 05:32
@jdtdesigns so lets say I create an array using a submit form via react, then I want that array to be pushed to mongodb then I want to be sent to the new link created such as /1 where i can view that array
i figured out how to do the mongodb parts i just need to figure out how to create new pages via a button
JD Tadlock
@jdtdesigns
Jan 25 2017 05:33
@Samwise12 In react you'd just create a route with a wildcard like '/projects/{id}'
and the wildcard would be the id of the current project clicked
then in the single view /project/2, you'd access the request params which would contain the id '2'
and use that to grab that single project from mongo
Sam
@Samwise12
Jan 25 2017 05:36
How do I go about creating the route though I think you have to use react-router + express
JD Tadlock
@jdtdesigns
Jan 25 2017 05:36
i'm not up on my react at this time lol
i'm all about Vuejs right now
i can look it up and get back with ya in a min
all the frameworks work in the same sorta fashion
they have a router that handles url routing/passing data and such
h1tag
@h1tag
Jan 25 2017 05:40
@jdtdesigns do you remember what I asked about yesterday?
JD Tadlock
@jdtdesigns
Jan 25 2017 05:41
@fortMaximus you'll have to refresh my memory
h1tag
@h1tag
Jan 25 2017 05:44
@jdtdesigns I asked about how to create html elements using jQuery for the WikiViewer project and you gave me a solution to clear the output first and then iterate through the object and append each value from the object
JD Tadlock
@jdtdesigns
Jan 25 2017 05:44
ah, right
h1tag
@h1tag
Jan 25 2017 05:44
I want to ask about iterating through the object
JD Tadlock
@jdtdesigns
Jan 25 2017 05:45
ok, what's your issue?
h1tag
@h1tag
Jan 25 2017 05:46
which method do I use to iterate? because "for...in loop" iterates in an arbitrary order
JD Tadlock
@jdtdesigns
Jan 25 2017 05:47
@fortMaximus There's many ways to do it depending on the situation
are you asking how to retrieve the data from the wikipedia response?
h1tag
@h1tag
Jan 25 2017 05:48
no, i'm asking about which iterating method to use
JD Tadlock
@jdtdesigns
Jan 25 2017 05:49
for in would work fine or jQuery .each() or you could get a little more advanced with .map()
h1tag
@h1tag
Jan 25 2017 05:53
@jdtdesigns but I'm not sure which one to use because "for in" iterates over the properties of the object in an arbitrary order and I don't want that because I want the links to the wiki pages to display on the page in order
Michael J Kusdya
@michael-kusdya
Jan 25 2017 05:54
hello, can anyone help me fix my dropdown navbar on my portfolio project ? the button won't work when i clicked it it and i dont know why
JD Tadlock
@jdtdesigns
Jan 25 2017 05:54
@fortMaximus Wiki sends you an object with each result in it. What order are you wanting it?
h1tag
@h1tag
Jan 25 2017 05:56
@jdtdesigns the order of the links to the wiki pages inside the returned object
JD Tadlock
@jdtdesigns
Jan 25 2017 05:57
not following you
you can just use the pageId in each result to link to each of the wiki pages
xemexpress
@xemexpress
Jan 25 2017 06:11
hi, i am doing personal portfolio.
When the navbar collapsed, the nav menu doesn't appear even I clicked it. What I've done wrong?
http://codepen.io/xemexpress/pen/VPbVmv
xemexpress
@xemexpress
Jan 25 2017 06:19
Can anyone help?? Thanks..
h1tag
@h1tag
Jan 25 2017 06:21
@jdtdesigns what does data do here? And where did .query and .pages come from (because in the Wiki API sandbox in the returned object there's no keys for the objects inside the main object) ?
Sorin Ruse
@sorinr
Jan 25 2017 06:22
@xemexpress you need to load jquery and bootstrap.js after it
JD Tadlock
@jdtdesigns
Jan 25 2017 06:23
@fortMaximus data refers to the data returned in the request
if you look at the console (ctrl shift j), you'll see that query is an object in the result and inside of that is pages
and inside of pages is each of the search results
h1tag
@h1tag
Jan 25 2017 06:26
@jdtdesigns why they (query, pages) doesn't appear in the Wiki API sandbox? Or why they don't show them there?
JD Tadlock
@jdtdesigns
Jan 25 2017 06:27
@fortMaximus Why are you worried about the sandbox lol
you're trying to request the data yourself
the sandbox just shows what the wiki can return in many many many different ways
Sorin Ruse
@sorinr
Jan 25 2017 06:28
@xemexpress if you want to have same color for the collapsed menu as the main nav you should add in css:
.navbar-collapse{
  background-color: purple;
}
h1tag
@h1tag
Jan 25 2017 06:28
idk, I think they should show it because I thought that there's no keys and I have to use the bracket notation object[i]
@jdtdesigns
Hi @sorinr
you'll see the basic way to build up a request
a request is just a url with params
Sorin Ruse
@sorinr
Jan 25 2017 06:31
@fortMaximus hi
JD Tadlock
@jdtdesigns
Jan 25 2017 06:31
each one of the params tells the api what to send to you
h1tag
@h1tag
Jan 25 2017 06:31
@jdtdesigns yea, I know that
JD Tadlock
@jdtdesigns
Jan 25 2017 06:31
So why are you still in the sandbox?
get out of there lol
h1tag
@h1tag
Jan 25 2017 06:31
lol
JD Tadlock
@jdtdesigns
Jan 25 2017 06:31
go request some data and use it ;)
h1tag
@h1tag
Jan 25 2017 06:33
OK, sure :smile: Again, thank you so much @jdtdesigns :smile:
CamperBot
@camperbot
Jan 25 2017 06:33
fortmaximus sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 885 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
xemexpress
@xemexpress
Jan 25 2017 06:46
@sorinr Thank you Sorin Ruse!!! So helpful
CamperBot
@camperbot
Jan 25 2017 06:46
xemexpress sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1141 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jan 25 2017 06:48
@xemexpress welcome
xemexpress
@xemexpress
Jan 25 2017 06:49
@sorinr oh, a follow-up:
which part of the codes requires jQuery actually??
Sorin Ruse
@sorinr
Jan 25 2017 06:50
@xemexpress the collapse part
@xemexpress read their docs here: http://getbootstrap.com/components/#navbar
xemexpress
@xemexpress
Jan 25 2017 06:55
@sorinr does it mean that JavaScript plugin == JQuery?
or the plugin just needs jquery to support?
Sorin Ruse
@sorinr
Jan 25 2017 06:57
@xemexpress bootstrap.js is based on jquery not vanilla javascript. so in pen settings->javascript part quick add first jquery and after add bootstrap. then save&close and u r off to go
xemexpress
@xemexpress
Jan 25 2017 06:59
thanks @sorinr
CamperBot
@camperbot
Jan 25 2017 06:59
xemexpress sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: xemexpress already gave sorinr points
xemexpress
@xemexpress
Jan 25 2017 07:15

http://codepen.io/xemexpress/pen/VPbVmv

why there is a gap between intro and portfo??

I know the gap could be eliminated by negative margin (or any better way?), but where the gap comes from??
Ern
@HTMLiFE
Jan 25 2017 07:52
I just a tribute to Jolly man Santa. Could you guys give me a lil feedback?
AHMED ADEL
@ahmedaldabagh
Jan 25 2017 08:28
i write this css line's to give the header special color
but why the entire page take the same color
header {
background:#aaa;
border-color:#000;
}
Veronika
@Veronika853
Jan 25 2017 08:30
You must use 16bit charset, #aaaaaa for example
6 numbers
AHMED ADEL
@ahmedaldabagh
Jan 25 2017 08:31
i do it
no change
Sorin Ruse
@sorinr
Jan 25 2017 08:34
@ahmedaldabagh can you share ur pen?
Veronika
@Veronika853
Jan 25 2017 08:37
try border: 1px solid #000000;
You didnt point border's width and it dont display
AHMED ADEL
@ahmedaldabagh
Jan 25 2017 08:40
iam not type in the pen
i will copy all my css
a {
text-decoration:none;
color:#fff;
    }

#logo { 
text-align:center;
margin:0;

}

header {

background:#aaa;
border-color:#000;
}
    h1 , h2 {
color:#fff;

}
nav{
background:#599a68;

}
nav a {
color:#fff;

}
@Veronika853
Veronika
@Veronika853
Jan 25 2017 08:45
@ahmedaldabagh border: 1px solid;
border-color: #000000; or border: 1px solid #000000;
AHMED ADEL
@ahmedaldabagh
Jan 25 2017 08:45
thank you I found the error
Veronika
@Veronika853
Jan 25 2017 08:45
Good luck)
AHMED ADEL
@ahmedaldabagh
Jan 25 2017 08:46
the error was that the closing tag of the header is worng
Sorin Ruse
@sorinr
Jan 25 2017 08:46
@ahmedaldabagh more interesting is the html part only what u have between <body></body> tags
AHMED ADEL
@ahmedaldabagh
Jan 25 2017 08:49
thank you @sor\
CamperBot
@camperbot
Jan 25 2017 08:49
ahmedaldabagh sends brownie points to @sor :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for sor
AHMED ADEL
@ahmedaldabagh
Jan 25 2017 08:50
thank you @sorinr & @Veronika853
CamperBot
@camperbot
Jan 25 2017 08:50
ahmedaldabagh sends brownie points to @sorinr and @veronika853 :sparkles: :thumbsup: :sparkles:
:cookie: 52 | @veronika853 |http://www.freecodecamp.com/veronika853
:star2: 1142 | @sorinr |http://www.freecodecamp.com/sorinr
Veronika
@Veronika853
Jan 25 2017 08:51
@ahmedaldabagh yw
Vaidotas
@unreality23
Jan 25 2017 10:07
Hello, im almost at the end of twitchtv api exercise but i have last problem. i dont how to check if channel is undefined, because stream channel can be only null( if its offline or not existing) and not null( if existing and online) but i cant make undefined( if not existing) how to do that? im using ajax
this is my work so far
i have a dumb problem but i'm not sure why its happening
my search icon is positioned absolute
input text relative
but my search box gets positioned to body
Ayush Bahuguna
@relentless-coder
Jan 25 2017 10:12
does anyone have experience with adminLTE template?
Vaidotas
@unreality23
Jan 25 2017 10:13
@sennator2 your input text is not set relative, you set relative position for input submit, which is not even existing in your work
Ayush Bahuguna
@relentless-coder
Jan 25 2017 10:14
@unreality23 how about just check for whether the value is truthy or falsy
Vaidotas
@unreality23
Jan 25 2017 10:17
@relentless-coder what do you mean ?
Ayush Bahuguna
@relentless-coder
Jan 25 2017 10:19

undefined, null, false, "" etc are falsy values. so something like

if(someVal){
 then do this
}

here if someVal is not falsy then code block will be executed

Vaidotas
@unreality23
Jan 25 2017 10:20
but you can see in my code im already checking if my function is null, not null or undefined
Ayush Bahuguna
@relentless-coder
Jan 25 2017 10:21
don't check for null individually, you can check for all the falsy values at once, instead of checking for individual falsy value
sennator
@sennator2
Jan 25 2017 10:22
@unreality23 hahhah i had it earlier than removed it
@unreality23 thanks
CamperBot
@camperbot
Jan 25 2017 10:23
sennator2 sends brownie points to @unreality23 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for unreality23
Ayush Bahuguna
@relentless-coder
Jan 25 2017 10:25
@unreality23 you can do this
if(!data.stream) {
  //then do this
}
this would check for all the falsey values of data.stream. it would always be null though, because you don't assign undefined to variable, but even if you want to check for undefined too then just do this
Vaidotas
@unreality23
Jan 25 2017 10:27
sorry but none of your answers are correct im getting totaly the same answers.
Ayush Bahuguna
@relentless-coder
Jan 25 2017 10:29
what is it that you are trying to achieve?
Vaidotas
@unreality23
Jan 25 2017 10:29
you always have to check if your channel stream is null or not null. even in example showing the same thing
Ayush Bahuguna
@relentless-coder
Jan 25 2017 10:29
so why do you want to check for undefined?
Vaidotas
@unreality23
Jan 25 2017 10:30
because its one of the tasks in twitchtv json api
Ayush Bahuguna
@relentless-coder
Jan 25 2017 10:31
where? it just asks for whether online or not.
Vaidotas
@unreality23
Jan 25 2017 10:31
User Story: I will see a placeholder notification if a streamer has closed their Twitch account (or the account never existed). You can verify this works by adding brunofin and comster404 to your array of Twitch streamers.
Ayush Bahuguna
@relentless-coder
Jan 25 2017 10:37
@unreality23 i logged your data, but nowhere did I find an objects property as undefined
now, this is what I meant. Why are you looking for undefined?
Vaidotas
@unreality23
Jan 25 2017 10:40
i told you. because its in the task
Ayush Bahuguna
@relentless-coder
Jan 25 2017 10:41
@unreality23 you are supposed to check the status code.
if the status code is 404. you don't have to check for undefined because if the channel doesn't exist why would the api send it's data, you'd simply get 404 error. So, use .error() method to check for the status code and if it's 404 then do what you are supposed to do
look in you dev console too. You'd be getting 404 error for comstar404.
and why aren't you using asynchronous call? this froze my browser for at least 10 - 15 seconds.
Vaidotas
@unreality23
Jan 25 2017 10:46
because it wont be in the order i want
Ayush Bahuguna
@relentless-coder
Jan 25 2017 10:47
again, you can use if statement to check for whether the ajax request is complete and then display your data.
Leo
@leozulfiu
Jan 25 2017 10:48
hi, i'm not sure if i can ask here but i got some big problems with my iframe...
i'm trying to embed a survey into my page but it just doesn't work.
here-> https://plnkr.co/edit/CDJVwg6JAtW71KG4ZPiJ?p=preview
i just don't understand why there are TWO scrollbars...could maybe someone have a look?
sennator
@sennator2
Jan 25 2017 10:52
it still aligns with body :D
Ayush Bahuguna
@relentless-coder
Jan 25 2017 10:55
you can use overflow: hidden on body, uless you intend to put more elements below the iframe
@sennator2 what do you want?
Vaidotas
@unreality23
Jan 25 2017 10:57
@relentless-coder check if data1.status == 422 or 404 still no results
checked*
sennator
@sennator2
Jan 25 2017 10:58
@relentless-coder my material icon to be positioned next to search bar
Ayush Bahuguna
@relentless-coder
Jan 25 2017 10:59
@unreality23 dude no. what?? that's not how you check for status code. jQuery provide the error method.
sennator
@sennator2
Jan 25 2017 10:59
but it gets positioned according to body eventhough i gave input position relative
Ayush Bahuguna
@relentless-coder
Jan 25 2017 11:00
@sennator2 okay let me check
Vaidotas
@unreality23
Jan 25 2017 11:00
@sennator2 write in html,body overflow:hidden
@leozulfiu write in html,body overflow:hidden
sorry not sennator2 lol
Ayush Bahuguna
@relentless-coder
Jan 25 2017 11:01
@sennator2 your material icon is positioned absolute, and is position at top right corner.
sennator
@sennator2
Jan 25 2017 11:02
@relentless-coder right, but shouldn that be in relation to first relative positioned element
Ayush Bahuguna
@relentless-coder
Jan 25 2017 11:03
@sennator2 if you want it to to be present next to the search bar, then put search bar and the icon inside a div. give that div a position: relative, and then use position absolute on your icon and search bar. although float is a better option
@sennator2 positioning input as relative would have no effect on icon because icon is not inside the input tag
sennator
@sennator2
Jan 25 2017 11:06
@relentless-coder makes sense... thanks ;)
CamperBot
@camperbot
Jan 25 2017 11:06
sennator2 sends brownie points to @relentless-coder :sparkles: :thumbsup: :sparkles:
:cookie: 331 | @relentless-coder |http://www.freecodecamp.com/relentless-coder
Vaidotas
@unreality23
Jan 25 2017 11:27
@relentless-coder the thing is, that my code is checking through https://api.twitch.tv/kraken/streams/ESL_SC2?client_id=swakdn0m7ayikkn4ibpzslwqaihbwx through this link. and through this link if you will write existing channel which is ESL_SC2 and hes online. offline one is cretetion and then write brunofin which is not existing and you will see that at the end there is no difference in a call between cretetion and brunofin
Ayush Bahuguna
@relentless-coder
Jan 25 2017 11:28
@unreality23 let me check again
@unreality23 you are not checking for error.
Vaidotas
@unreality23
Jan 25 2017 11:35
but how he going to understand which of these two are error ?
Ayush Bahuguna
@relentless-coder
Jan 25 2017 11:36
@unreality23 the channel that doesn't exist, for that ajax request would give a 404 error, because it wouldn't exist on twitcher's database
Leo
@leozulfiu
Jan 25 2017 11:37
@relentless-coder what i'm trying to do is that the whole page should behave like its one element. if i add overflow hidden to my style then the h1 stays always on top but i want that the whole page should behave like one div
Vaidotas
@unreality23
Jan 25 2017 11:37
yea i understand that. but on the link which i gave you, its not showing if it doesnt exist or if its offline instead of that it gives the same answer
@leozulfiu in html,body css write overflow: hidden. checked in your code and it worked fine
Leo
@leozulfiu
Jan 25 2017 11:39
@unreality23 yes but then when i scroll the h1 stays at the same position. do you understand what i mean? :/
Vaidotas
@unreality23
Jan 25 2017 11:41
@leozulfiu in iframe in html write scrolling="no"
it will fix the problem
Muhammad Hasham
@MohammadHasham
Jan 25 2017 11:42
actually i want to make a clock but when i would increase its margin-top through jquery after each second it would move out of .small-circle
can you help me so that the one end of needles stay there
http://jsbin.com/secidewocu/edit?html,css,output
do anyone know why there is a gap in between?
Intro section and Portfolio section
Vaidotas
@unreality23
Jan 25 2017 11:46
@leozulfiu
<!DOCTYPE html>
<html>

  <head>
        <style>
    * { margin:0 padding:0; line-height: 0; }
    body { margin:0; padding:0;}
    html, body {

  min-height: 100% !important;
  height: 100%;
}
    </style>
  </head>

  <body>
    <h1>hello</h1>
    <h1>hello2</h1>
    <iframe scrolling="no" src="https://www.surveygizmo.com/s3/3316899/Eating-Survey" frameborder="0"
    style="overflow: hidden; height: 100%; width: 100%; position: absolute;"
    height="100%" width="100%"></iframe>
  </body>

</html>
Leo
@leozulfiu
Jan 25 2017 11:49
@unreality23 yes but now i cannot reach the submit button:/
Vaidotas
@unreality23
Jan 25 2017 11:49
and if you want that your all iframe would fit in page just edit height to 150%
or less just, it depends from how much you want to see of iframe
Leo
@leozulfiu
Jan 25 2017 11:50
@unreality23 i want to show the whole iframe
Vaidotas
@unreality23
Jan 25 2017 11:50
so set to 150% , it will show all frame
Leo
@leozulfiu
Jan 25 2017 11:51
@unreality23 which height? on the iframe style?
Vaidotas
@unreality23
Jan 25 2017 11:51
yes
Leo
@leozulfiu
Jan 25 2017 11:52
@unreality23 yeah now it works. i wonder if it will also work if the questions will change. thank you!
CamperBot
@camperbot
Jan 25 2017 11:52
:warning: could not find receiver for unreality23
leozulfiu sends brownie points to @unreality23 :sparkles: :thumbsup: :sparkles:
Vaidotas
@unreality23
Jan 25 2017 11:54
well you will never know if you will never try
Leo
@leozulfiu
Jan 25 2017 11:55
@unreality23 hmm nope. if there are more questions it doesnt resize corretly :(
or if it is for example only question then the page is unnecessary long
Vaidotas
@unreality23
Jan 25 2017 12:17
@leozulfiu u will need to use probably jquery to do that as far as i tried to search some info, it seems the only way is with jquery or other language
Muhammad Hasham
@MohammadHasham
Jan 25 2017 12:29
how can i make my clock needles to move is there something to rotate in html
Sorin Ruse
@sorinr
Jan 25 2017 12:30
@MohammadHasham there is transform: rotate(1deg) in css
can you see where am i doing it wrong
Sorin Ruse
@sorinr
Jan 25 2017 12:35
@MohammadHasham let me think. i have something to do now but i'll take a look later
Muhammad Hasham
@MohammadHasham
Jan 25 2017 12:35
ok sure thanks
@sorinr thanks
CamperBot
@camperbot
Jan 25 2017 12:35
mohammadhasham sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1143 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jan 25 2017 12:56
@MohammadHasham think the best way to do it is using canvas
xemexpress
@xemexpress
Jan 25 2017 13:00

http://codepen.io/xemexpress/pen/VPbVmv

At the bottom of the html, how to vertically align that text?

Clyde Lobo
@oppiniated
Jan 25 2017 13:02
@xemexpress add line-height: 60px; to css rule of .footer
Muhammad Hasham
@MohammadHasham
Jan 25 2017 13:03
@sorinr did that.Actually i used transform-origin along with transform
now going to apply js
but it was better to use svg or canvas
xemexpress
@xemexpress
Jan 25 2017 13:05
@oppiniated oh yes! Thanks!
CamperBot
@camperbot
Jan 25 2017 13:05
:cookie: 524 | @oppiniated |http://www.freecodecamp.com/oppiniated
xemexpress sends brownie points to @oppiniated :sparkles: :thumbsup: :sparkles:
hernanfinucci
@hernanfinucci
Jan 25 2017 13:10
heyy guys i know it's a very stupid question but how do i make an element in html/css stay in the same place without being interrupted by the flow of other elements?
Sorin Ruse
@sorinr
Jan 25 2017 13:13
@hernanfinucci position: fixed in css
hernanfinucci
@hernanfinucci
Jan 25 2017 13:14
@sorinr yeah but wont that stay in the same place dispite scrolling the page
??
i want it to stay in the same place but move if i scroll the page
Sorin Ruse
@sorinr
Jan 25 2017 13:14
@hernanfinucci yes. its not what u want?
@hernanfinucci then make it display: absolute
hernanfinucci
@hernanfinucci
Jan 25 2017 13:15
@sorinr if the div is nested inside another does div which contains the nested one need to have position:relative?
kinda mouthful
Sorin Ruse
@sorinr
Jan 25 2017 13:22
@hernanfinucci yes
@hernanfinucci the parent one
hernanfinucci
@hernanfinucci
Jan 25 2017 13:28
okk thanks @sorinr
CamperBot
@camperbot
Jan 25 2017 13:28
hernanfinucci sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1144 | @sorinr |http://www.freecodecamp.com/sorinr
xemexpress
@xemexpress
Jan 25 2017 13:28

http://codepen.io/xemexpress/pen/VPbVmv

How to add transition-duration effect to navigation bar?
(I mean when clicking the <a> tag in navbar, it takes some time, say 2 sec, to transit?

I add the effect to <a> but doesn't work
Mykj23
@Mykj23
Jan 25 2017 13:33
Hey guys need some help with my javascript calculator. I'm trying to get my AC and = buttons to function correctly as well as get my calculator to pass multiple digit numbers. http://codepen.io/Mykj23/pen/LxxGKv
hernanfinucci
@hernanfinucci
Jan 25 2017 13:39
@Mykj23 wow man thats really good
Wang Han
@timi-daddy
Jan 25 2017 13:50
Hey guys. Is there anybody can help me with the Tribute Page? I'd like to know how can I use bootstrap to set the background color, box shadow, and many other styles that without using css directly? Thanks a lot!
What I know about Bootstrap is just "text-center", "col-md-x", "img-responsive", just a couple of the class names.
Mokkants
@Mokkants
Jan 25 2017 13:51
@timi-daddy bootstrap is only used for placing items a certain way, it can't be used to color things
@timi-daddy why wouldn't you use css directly?
Wang Han
@timi-daddy
Jan 25 2017 13:52
But I watched the tutoring video, which said that he only use a css rule "body margin", and all the other styles are set by Bootstrap. So how can I do it?
Mokkants
@Mokkants
Jan 25 2017 13:53
bootstrap has its own stylesheet, so if you use bootstrap it will default to that and you'll have to overwrite it if you want things to be in a different way
Wang Han
@timi-daddy
Jan 25 2017 13:53
@Mokkants Have you watched the video?
You can view the source CSS of the sample page, and you'll see the only one rule is: body {
margin-top: 60px;
}
Mokkants
@Mokkants
Jan 25 2017 13:55
can you specify which video? i am quite familiar with bootstrap
i think i know what you mean
This is the video url.
Mykj23
@Mykj23
Jan 25 2017 13:56
@hernanfinucci thanks! just got to work out few kinks
CamperBot
@camperbot
Jan 25 2017 13:56
mykj23 sends brownie points to @hernanfinucci :sparkles: :thumbsup: :sparkles:
:cookie: 262 | @hernanfinucci |http://www.freecodecamp.com/hernanfinucci
Mokkants
@Mokkants
Jan 25 2017 13:57
its true, free code camp doesn't do a great job explaining bootstrap, i had to research a lot until i understood what it really did
Wang Han
@timi-daddy
Jan 25 2017 13:58
@Mokkants So may I know what happened here? Why did he just use only one css rule and the page can have so many styles?
Mykj23
@Mykj23
Jan 25 2017 13:59
@timi-daddy those are the default coloring with bootstrap.. if you want anything besides white, grey, blue or red you have to change the color in css
Mokkants
@Mokkants
Jan 25 2017 13:59
in this video quincy says you CAN do this project using only html, no css or javascript is required
but there's no reason not to use css, in fact, i highly encourage you to do so, get familiar with it, mess around
you will be using it a lot in the next project anyway
Sorin Ruse
@sorinr
Jan 25 2017 14:03
@xemexpress search for smooth scrolling
Wang Han
@timi-daddy
Jan 25 2017 14:03
@Mykj23 Thanks. But I don't think bootstrap can add the box shadows on the page, as my own page is so ugly.
CamperBot
@camperbot
Jan 25 2017 14:03
timi-daddy sends brownie points to @mykj23 :sparkles: :thumbsup: :sparkles:
:cookie: 292 | @mykj23 |http://www.freecodecamp.com/mykj23
@Mokkants Thanks, so I'll add some css rules.
CamperBot
@camperbot
Jan 25 2017 14:03
timi-daddy sends brownie points to @mokkants :sparkles: :thumbsup: :sparkles:
:cookie: 264 | @mokkants |http://www.freecodecamp.com/mokkants
Jeremy Fleshman
@JFles
Jan 25 2017 14:08
I'm having issues with the Random Quote project. The API I have selected returns errors when I try to grab the JSON. As far as I've researched, it's a CORS request issue, but I can't get JSONP or any CORS proxy to work either.
Mokkants
@Mokkants
Jan 25 2017 14:08
@JFles link it
kirbyedy
@kirbyedy
Jan 25 2017 14:08
callback=?
buiphuking
@buiphuking
Jan 25 2017 14:08
if anyone from Viet Nam, i wanna say happy new year!
Mykj23
@Mykj23
Jan 25 2017 14:08
@timi-daddy try adding some divs to your html and see what bootstrap components could help... for example put all your html inside this div and see what happens <div class="jumbotron"> </div>
Jeremy Fleshman
@JFles
Jan 25 2017 14:08
Same issue with callback=? appended to the URL
Wang Han
@timi-daddy
Jan 25 2017 14:09
@buiphuking Does Viet Nam people celebrate Chinese New Year?
@Mykj23 Thank you. I'll do it right now!
CamperBot
@camperbot
Jan 25 2017 14:10
timi-daddy sends brownie points to @mykj23 :sparkles: :thumbsup: :sparkles:
:warning: timi-daddy already gave mykj23 points
buiphuking
@buiphuking
Jan 25 2017 14:10
@timi-daddy Viet Nam New Year , we call Tet holiday
Icah Banton
@remdata
Jan 25 2017 14:10
Hello. My browser says the following has a syntax error. Can someone help me to resolve this: <button onClick=”alert(‘Aha! An Event!’);”>Click this to test an event handler</button>
MaxLAB
@Max-LAB
Jan 25 2017 14:10
@JFles why don't you use ajax like this
    $.ajax( {
        url: "http://api.forismatic.com/api/1.0/",
         jsonp: "jsonp",
         dataType: "jsonp",
         data: {
            method: "getQuote",
             lang: "en",
             format: "jsonp"
        }
    } ).done( 
        }

    } ).fail( 
    } );
Mykj23
@Mykj23
Jan 25 2017 14:11
@timi-daddy http://codepen.io/Mykj23/pen/bgrjVe just added two bootstrap properties
Jeremy Fleshman
@JFles
Jan 25 2017 14:13
@Max-LAB I'll try that. Haven't delved too far into the .Ajax document. Thanks.
CamperBot
@camperbot
Jan 25 2017 14:13
:cookie: 288 | @max-lab |http://www.freecodecamp.com/max-lab
jfles sends brownie points to @max-lab :sparkles: :thumbsup: :sparkles:
Wang Han
@timi-daddy
Jan 25 2017 14:13
@Mykj23 It's awesome! Thank you! But how can you know such "jumbotron" class name, but I don't? I mean, how can I know such useful infos from the web?
CamperBot
@camperbot
Jan 25 2017 14:13
timi-daddy sends brownie points to @mykj23 :sparkles: :thumbsup: :sparkles:
:warning: timi-daddy already gave mykj23 points
MaxLAB
@Max-LAB
Jan 25 2017 14:14
@JFles you need to remember if you would like to use api.forismatic.com you wont be able to load codepen.io https version
Mokkants
@Mokkants
Jan 25 2017 14:14
has anyone completed the weather app challenge? I'm having a problem
kirbyedy
@kirbyedy
Jan 25 2017 14:15
?
Jeremy Fleshman
@JFles
Jan 25 2017 14:15
@Max-LAB I'll keep that in mind. One of my earlier errors was that.
Mokkants
@Mokkants
Jan 25 2017 14:16
it works fine on my localhost, but i cant transfer it to codepen
Mokkants
@Mokkants
Jan 25 2017 14:16
openweather doesn't respond with https call, but with regular http call, codepen throws an error, blocking the request because it's not secure
Eric-Kyeo
@Eric-Kyeo
Jan 25 2017 14:18
Hey guys, I'm working on the Simon game and I've just drawn the color shapes and wondering if there's any way to change the opacity of shapes in a canvas
kirbyedy
@kirbyedy
Jan 25 2017 14:20
@Mokkants yes, thats a known issue
MaxLAB
@Max-LAB
Jan 25 2017 14:20
@JFles read this post if you have time, it is very helpful. Good luck https://forum.freecodecamp.com/t/cross-domain-error-i-thought-im-using-jsonp-so-whats-wrong/11012/5
kirbyedy
@kirbyedy
Jan 25 2017 14:20
@Mokkants change the api to darksky, or wunderground, or use ip location instead of geolocation
Mokkants
@Mokkants
Jan 25 2017 14:23
@kirbyedy thanks, I'll see if it works
CamperBot
@camperbot
Jan 25 2017 14:23
mokkants sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1708 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Jeremy Fleshman
@JFles
Jan 25 2017 14:25
@Max-LAB I tried the unmodified solution posted earlier and I was met with either an unhandled error from syntax or the same CORS header issue from before depending on the parameters passed with the API call. If I use the correct object properties on the Ajax call, do you think it'll work?
sennator
@sennator2
Jan 25 2017 14:32
I have a function that calculates something and displays it in html element, but every time I call function again it adds result instead of reseting and displaying
what should i do?
Clyde Lobo
@oppiniated
Jan 25 2017 14:33
@sennator2 show us your code
sennator
@sennator2
Jan 25 2017 14:33
http://codepen.io/sennator/pen/NdpxgW?editors=1111
its not freecode camp stuff but i hope thats not breaking rules
@oppiniated
MaxLAB
@Max-LAB
Jan 25 2017 14:35
@JFles sure it will, I just looked at your codepen, replace jsonp=foo with jsonp=? and try again
Clyde Lobo
@oppiniated
Jan 25 2017 14:39
@sennator2 It's because you have defined var sum=0 at the top and its now a global function. Instead move it inside the multiples function. http://codepen.io/clydelobo/pen/apyjPx
sennator
@sennator2
Jan 25 2017 14:40
@oppiniated thanks man
CamperBot
@camperbot
Jan 25 2017 14:40
:cookie: 525 | @oppiniated |http://www.freecodecamp.com/oppiniated
sennator2 sends brownie points to @oppiniated :sparkles: :thumbsup: :sparkles:
Jeremy Fleshman
@JFles
Jan 25 2017 14:40
:|
sennator
@sennator2
Jan 25 2017 14:41
didn't even cross my mind
Jeremy Fleshman
@JFles
Jan 25 2017 14:41
@Max-LAB Of all the combinations I've tried, I did not try jsonp=?. Thanks for the help :P
CamperBot
@camperbot
Jan 25 2017 14:41
jfles sends brownie points to @max-lab :sparkles: :thumbsup: :sparkles:
:warning: jfles already gave max-lab points
6thSen
@6thSen
Jan 25 2017 14:44

anybody else having issues with the twitch api? I've been getting this error:

failed to start application on wind-bow.gomix.me

This is most likely because your project has a code error.
Check your project logs, fix the error and try again.

I'm just trying to get a response from https://wind-bow.gomix.me/twitch-api/users/freecodecamp but it's konking out.

Tom
@moT01
Jan 25 2017 14:45
@6thSen yea im having the same problem
MaxLAB
@Max-LAB
Jan 25 2017 14:45
@JFles :+1: any time
Tom
@moT01
Jan 25 2017 14:45
it was working like yesterday
6thSen
@6thSen
Jan 25 2017 14:46
@moT01 thank you! i thought I was going crazy...
CamperBot
@camperbot
Jan 25 2017 14:46
6thsen sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 472 | @mot01 |http://www.freecodecamp.com/mot01
Tom
@moT01
Jan 25 2017 14:48
oh, i got one stream on this refresh @6thSen
JD Tadlock
@jdtdesigns
Jan 25 2017 14:51
@6thSen You can take on the more challenging solution and use the twitch api instead. It doesn't go down. ;)
chiphip
@chiphip
Jan 25 2017 14:52
How can I force the callback function to get the data first from the json....I am having trouble with the weather app project
JD Tadlock
@jdtdesigns
Jan 25 2017 14:55
sounds like you need to follow the asynchronous pattern @chiphip
the data doesn't come instantly, so you need to make sure you have it before running other code
you can do this in a few ways
call a function from inside the getJSON callback
or use jQuery .then() after the getJSON
chiphip
@chiphip
Jan 25 2017 14:57
@jdtdesigns Yea that's what I figured, do you have any example I can look at?
6thSen
@6thSen
Jan 25 2017 14:59
@jdtdesigns didn't want to sign up for a twitch account unless I absolutely had to...now I absolutely have to :D
aenila
@aenila
Jan 25 2017 15:00
I'm working on the local weather app and trying to make a button that allows the user to search weather by zip code. But for some reason even though I confirmed the button fires the .click() function with an alert('Button Fired'); command, the console.log command doesn't register and it doesn't call the function it's supposed to. Can somebody take a look and help me figure out what's wrong, please?
http://codepen.io/aenila/pen/EZmYPL
JD Tadlock
@jdtdesigns
Jan 25 2017 15:01
@aenila Open the browser console (ctrl shift j)
you'll see your errors ;)
Clyde Lobo
@oppiniated
Jan 25 2017 15:03
@aenila js is case sensitive zip and Zip are not the same. You declare Zip in var Zip = document.getElementById('zipCode').value; and use zip in the api call
aenila
@aenila
Jan 25 2017 15:05
That made it pretty obvious JD. Thank you. And yes, I just found that myself Clyde. Thank you as well. How come that info doesn't show up in the web console though, just out of curiosity?
chiphip
@chiphip
Jan 25 2017 15:06
@jdtdesigns The example you show does not have a .then or a function call inside the json function
or am I not seeing right?
JD Tadlock
@jdtdesigns
Jan 25 2017 15:07
@chiphip navigator is async as well
so you can see inside the getlocation just how you do the same thing inside getJSON
@aenila Codepen filters out some data
the only way to see all the errors is to use the browser's console
chiphip
@chiphip
Jan 25 2017 15:09
@jdtdesigns so you mean inside getLocation() you are calling showWeather()?
JD Tadlock
@jdtdesigns
Jan 25 2017 15:10
yes
chiphip
@chiphip
Jan 25 2017 15:10
Okay, let me give this a try. Thanks @jdtdesigns
CamperBot
@camperbot
Jan 25 2017 15:10
chiphip sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 886 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Jan 25 2017 15:11
@chiphip welcome
Icah Banton
@remdata
Jan 25 2017 15:13

hello. help. The following code is producing a "Uncaught SyntaxError: Invalid or unexpected token" in chrome. What am I doing wrong: <html>

<head>

<title>Event Test</title>
</head>

<body>

<h1>Event Test</h1>
<p>
<button onClick=alert("Aha! An Event!")>Click this to test an event handler</button>
</p>
</body>
</html>

JD Tadlock
@jdtdesigns
Jan 25 2017 15:15
@chiphip I added a little code to show you how .then() works ;) https://jsbin.com/wikeked/edit?js,output
chiphip
@chiphip
Jan 25 2017 15:16
@jdtdesigns BTW, dude your Weather App is hot as hell. Great job :-) I am really jealous.
JD Tadlock
@jdtdesigns
Jan 25 2017 15:17
@remdata the alert needs to be inside quotes
@chiphip The one on jsbin? lol
chiphip
@chiphip
Jan 25 2017 15:18
no....the one codepen, the green one
JD Tadlock
@jdtdesigns
Jan 25 2017 15:18
ah, thanks :) @chiphip
CamperBot
@camperbot
Jan 25 2017 15:18
:cookie: 265 | @chiphip |http://www.freecodecamp.com/chiphip
jdtdesigns sends brownie points to @chiphip :sparkles: :thumbsup: :sparkles:
Icah Banton
@remdata
Jan 25 2017 15:19
@jdtdesigns . With the quotes I get the following error: alertTest.html:9 Uncaught SyntaxError: Unexpected token }
chiphip
@chiphip
Jan 25 2017 15:19
How long did you work on that project?
JD Tadlock
@jdtdesigns
Jan 25 2017 15:20
hmm, probably 2 hours or so
@remdata Post your pen
Patrick Black
@Mortiferr
Jan 25 2017 15:25
http://codepen.io/Mortiferr/pen/oBZJzp?editors=1010
My document.write for the celcius and Fahrenheit isn't appearing
Icah Banton
@remdata
Jan 25 2017 15:26

@jdtdesigns . It's not a pen but here is the code: <html>

<head>

<title>Event Test</title>
</head>

<body>

<h1>Event Test</h1>
<p>
<button onClick="alert("Aha! An Event!")">Click this to test an event handler</button>
</p>
</body>
</html>

Patrick Black
@Mortiferr
Jan 25 2017 15:26
I added an if statement to make sure it wouldn't print until its ready but the function still isn;t calling correctly
Eric Chung
@chungeric
Jan 25 2017 15:33
Hi guys, I'm trying to build the random quote generator using an external API, but i'm having trouble getting the data
$(document).ready( function(){
  $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en", function(json){
    $(".quote").html(json.quoteText);
  });
});
This is what i've got for the javascript, and I have a div with class quote but it's not changing. Any help? Thanks!
sennator
@sennator2
Jan 25 2017 15:36
@chungeric i would suggest that you first take a look at this video https://www.youtube.com/watch?v=5xeDQ1-ZfcQ
calit nicely explains how you call api and how to manipulate data you get
you are going to need that in chalenges to come
Kantra
@removed~kantrakantra
Jan 25 2017 15:44

Hey guys, can anybody help me figure out why this code is working in jsfiddle but not in codepen.

I figure since it's the exact same code it should work just fine. I added jquery and bootstrap to the codepen code.

here's the jsfiddle: http://jsfiddle.net/Kantra/qz0x4rLw/1/

here's the codepen: http://codepen.io/kantrakantra/pen/qRXJRV

Darth Skywalker
@adityaparab
Jan 25 2017 15:47

@chungeric try changing your url from

http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en

to

http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en&callback=?
added &callback=? at the end of the url as this is cross domain request and you will need jsonp
Eric Chung
@chungeric
Jan 25 2017 15:49
Didn't work, thanks though. I'm just watching the video sent above
Nathan
@Nathandim
Jan 25 2017 15:55
I feel you. I'm in the next project and I'm struggling to make openweathermap API behave on codepen
JD Tadlock
@jdtdesigns
Jan 25 2017 15:56
@remdata Just had a look at it. First, there's no good reason to use vanilla js to do ajax. It's clunky and requires a lot of code to clean the response. You'll continually get errors until you have a page of code just for a simple ajax request. Second, you have script in the html which has no connection to your js in the JS panel. Delete the html script and that'll remove one error.
Third codepen is picky with what data can be requested, so just understand you'll prob get errors no matter what you do, when using vanilla for ajax.
Eric Chung
@chungeric
Jan 25 2017 16:00
Haha yeah I've been putting this off for a while, cause I didn't want to hard code the quotes but didn't know how not to. jsonp I see. I'll have a look into it :) Thanks for the info guys
JD Tadlock
@jdtdesigns
Jan 25 2017 16:02
@chungeric If you look at Forismatic's api documentation page, you'll see this 'jsonp=<string> — callback function name, used for jsonp format only (usage example)'
every api that supports jsonp has a way of telling the api to send jsonp instead of json
the typical convention is callback=?
but for forismatic they decided to go with jsonp=?
Eric Chung
@chungeric
Jan 25 2017 16:05
Hm okay, but the data doesn't differ in any way? Between json and jsonp
JD Tadlock
@jdtdesigns
Jan 25 2017 16:06
both return a json object
Eric Chung
@chungeric
Jan 25 2017 16:06
And do I have to use ajax instead of what i've done?
JD Tadlock
@jdtdesigns
Jan 25 2017 16:06
jsonp is just insecure
@chungeric .getJSON() is the shorthand for .ajax()
same thing, just less code
Nathan
@Nathandim
Jan 25 2017 16:08
should we use .ajax instead of .getJSON for queries on codepen then?
JD Tadlock
@jdtdesigns
Jan 25 2017 16:08
nope
like i said, .getJSON() is the shorthand that does a few things for you that you'd have to hard code in .ajax()
Nathan
@Nathandim
Jan 25 2017 16:09
Tom
@moT01
Jan 25 2017 16:10
@Nathandim didnt declare the variable?
JD Tadlock
@jdtdesigns
Jan 25 2017 16:10
@Nathandim Simply add '&callback=?' to the end of the url
Nathan
@Nathandim
Jan 25 2017 16:10
oh the callback
JD Tadlock
@jdtdesigns
Jan 25 2017 16:10
codepen requires the api return jsonp if the api server has a CORS header present
Nathan
@Nathandim
Jan 25 2017 16:11
it works now :thinking: hmm
I think I should learn more about jsonp and CORS headers
thank you @moT01 @jdtdesigns
CamperBot
@camperbot
Jan 25 2017 16:11
nathandim sends brownie points to @mot01 and @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 887 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
:cookie: 473 | @mot01 |http://www.freecodecamp.com/mot01
JD Tadlock
@jdtdesigns
Jan 25 2017 16:11
don't worry, you will lol
a lot of your life in coding a web app will be dealing with CORS issues :D
Nathan
@Nathandim
Jan 25 2017 16:12
lol :D
Eric Chung
@chungeric
Jan 25 2017 16:13
$(document).ready( function(){
  $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en&jsonp=?", function(json){
    $(".quote").html(json.quoteText);
  });
});
I've done this, still won't work :/
Nathan
@Nathandim
Jan 25 2017 16:14
@chungeric Check this
$(document).ready(function(){

  var api = "http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139&appid=6d74d0390619e3ee3cfa85e3bc4ad80c&callback=?";

  $.getJSON(api, function(data){
    alert(data.coord.lon);
  });

});
CamperBot
@camperbot
Jan 25 2017 16:14
:bulb: to format code use backticks! ``` more info
Nathan
@Nathandim
Jan 25 2017 16:15
Basically it's what @jdtdesigns said, it needs the "&callback=?" at the end of the url to behave with codepen
JD Tadlock
@jdtdesigns
Jan 25 2017 16:15
@Nathandim Not for forismatic
they use 'jsonp=?' to return jsonp
Nathan
@Nathandim
Jan 25 2017 16:16
oh so it depends from the api :worried:
JD Tadlock
@jdtdesigns
Jan 25 2017 16:17
yep ;)
Nathan
@Nathandim
Jan 25 2017 16:17
but the goal is to get jsonp instead of just json
JD Tadlock
@jdtdesigns
Jan 25 2017 16:17
for codepen, sometimes you need it
Eric Chung
@chungeric
Jan 25 2017 16:17
$(document).ready( function(){
  $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&jsonp=?", function(response){
    console.log(response.quoteText);
  });
});
not working, maybe i'm doing something wrong
JD Tadlock
@jdtdesigns
Jan 25 2017 16:18
@chungeric
$(document).ready( function(){
  $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?", function(json){
    console.log(json);
  });
});
works fine for me ;)
@chungeric post your codepen
Eric Chung
@chungeric
Jan 25 2017 16:19
Lol even that doesn't work, ok hold on
JD Tadlock
@jdtdesigns
Jan 25 2017 16:21
@chungeric Thought so. You're loading codepen over https. Remove https from the url and you're good to go. ;)
You can't load a page over secure https and then request data through http. It will throw a 'Mixed Content' error
Eric Chung
@chungeric
Jan 25 2017 16:21
Oh wow, that's it?
Wait, would you happen to know why i'm on https?
JD Tadlock
@jdtdesigns
Jan 25 2017 16:22
your browser will show the errors by the way in the console
ctrl shift js
Eric Chung
@chungeric
Jan 25 2017 16:22
Yeah it was showing that error
JD Tadlock
@jdtdesigns
Jan 25 2017 16:22
ctrl shift j
MrMacy
@MrMacy
Jan 25 2017 16:22
Please help. I'm building my first portfolio page, and I'm can't seem to get any text to show belos my navigation bar. here's my code as is

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">

<style>
.orange-text {
color:#FF3D00!important;}
ul { background: #078; list-style-type: none;
margin: -4px;
padding: 0;
font-size: 25px;
border-color:#607D8B;

}
ul {position: fixed;
top: 5;
left:.4%;
right:.4%;
width: 100%;
}
h2 {display: inline-block;}
h2 {text-decoration: "none"; margin: -5px;}
h2 {font-family: 'Pacifico'; font-size: 40px;}
#navcontainer ul li { display: inline; }
#navcontainer ul li a { text-decoration: none; float: right; padding: 5px; margin: 5px; }


</style>

<nav class="container-fluid" id="navcontainer">

<ul class="form"> <h2 id="MrMacy"><li><a class="orange-text" href=#>MrMacy</a></li></h2><li><a class="orange-text" href=#>About</a></li><li><a class="orange-text" href=#>Portfolio</a></li><li><a class="orange-text" href=#>Contact</a></li><li><a class="orange-text" href=#>Links</a></li>
</ul></nav>

<div>


<p>aslkdjfasdfoj</p>

</div>

JD Tadlock
@jdtdesigns
Jan 25 2017 16:22
codepen might have automatically loaded you through https @chungeric
Eric Chung
@chungeric
Jan 25 2017 16:23
Hm okay, well thanks for the big help :) @jdtdesigns
CamperBot
@camperbot
Jan 25 2017 16:23
chungeric sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 888 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Jan 25 2017 16:24
@chungeric welcome
MrMacy
@MrMacy
Jan 25 2017 16:26
any help, anybody?
Nathan
@Nathandim
Jan 25 2017 16:28
well now my problem is to make openworldmap get called in https then, since Chrome won't allow grabbing lat and longitude with plain http due to mixed content error
playingwithinfinity
@playingwithinfinity
Jan 25 2017 16:28
@Nathandim Just open CodePen using http instead
Nathan
@Nathandim
Jan 25 2017 16:29
navigator.geolocation won't work in Chrome with plain http
my other option I guess is to use an API to get lat and lon
playingwithinfinity
@playingwithinfinity
Jan 25 2017 16:30
Use another API then
Erd
@alboz1
Jan 25 2017 16:32
did anyone experience the same problem?
I have a background image which is fixed and is attached to a header which is height: 100vh and it works perfectly in desktop but on mobile it keeps zooming in randomly
MrMacy
@MrMacy
Jan 25 2017 16:33

@MrMacy
Please help. I'm building my first portfolio page, and I'm can't seem to get any text to show belos my navigation bar. here's my code as is

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">

<style>
.orange-text {
color:#FF3D00!important;}
ul { background: #078; list-style-type: none;
margin: -4px;
padding: 0;
font-size: 25px;
border-color:#607D8B;

}
ul {position: fixed;
top: 5;
left:.4%;
right:.4%;
width: 100%;
}
h2 {display: inline-block;}
h2 {text-decoration: "none"; margin: -5px;}
h2 {font-family: 'Pacifico'; font-size: 40px;}
#navcontainer ul li { display: inline; }
#navcontainer ul li a { text-decoration: none; float: right; padding: 5px; margin: 5px; }


</style>

<nav class="container-fluid" id="navcontainer">

<ul class="form"> <h2 id="MrMacy"><li><a class="orange-text" href=#>MrMacy</a></li></h2><li><a class="orange-text" href=#>About</a></li><li><a class="orange-text" href=#>Portfolio</a></li><li><a class="orange-text" href=#>Contact</a></li><li><a class="orange-text" href=#>Links</a></li>
</ul></nav>

<div>


<p>aslkdjfasdfoj</p>

</div>

Eric Chung
@chungeric
Jan 25 2017 16:33
@MrMacy can you post the codepen link instead?
Travmatth
@Travmatth
Jan 25 2017 16:34
so i’m looking at the responses of the twitchtv api, and i’m not sure how to differentiate a nonexistent user from an offline user. i’m not sure if we need to do so in the project
Eric Chung
@chungeric
Jan 25 2017 16:37
@MrMacy Your text is just appearing behind your navigation bar, since it's fixed to the top
@MrMacy Maybe add some padding to the top of the div to push the text below the navigation bar
hernanfinucci
@hernanfinucci
Jan 25 2017 16:39
heyy does someone know why doesn´t this js code work?
MrMacy
@MrMacy
Jan 25 2017 16:40
@chungeric thank you, that worked. First time I wasn't able to figure it out by googling
CamperBot
@camperbot
Jan 25 2017 16:40
mrmacy sends brownie points to @chungeric :sparkles: :thumbsup: :sparkles:
hernanfinucci
@hernanfinucci
Jan 25 2017 16:40
sorry i uploaded another page....
CamperBot
@camperbot
Jan 25 2017 16:40
:cookie: 262 | @chungeric |http://www.freecodecamp.com/chungeric
Icah Banton
@remdata
Jan 25 2017 16:41
@jdtdesigns . There is no javascript in my code, just HTML. This is simply a HTML script. I am not using codepen to test it.
Erd
@alboz1
Jan 25 2017 16:41
@hernanfinucci u have to remove this + Math.round(new Date().getTime() / 1000) after the callback json
hernanfinucci
@hernanfinucci
Jan 25 2017 16:45
@alboz1 lol i accidentally uploaded another pen
i meant the second one
Travmatth
@Travmatth
Jan 25 2017 16:47
for the twitchtv project: does anyone know if it’s necessary to diff btw non-existent users and offline users?
Jason Luboff
@JLuboff
Jan 25 2017 16:49
@Travmatth Yes
Travmatth
@Travmatth
Jan 25 2017 16:50
JLuboff: thank you. running curl’s on nonexistent and offline users is showing the same json object response and same response status (200). do you know a way in which to diff them?
Jason Luboff
@JLuboff
Jan 25 2017 16:51
@Travmatth Its been a while since I've done the project. I recall I had used the status to determine if they were online/offline/account closed. Can't remember exactly the verbage though
Travmatth
@Travmatth
Jan 25 2017 16:53
yea i’m rewriting a project from react to vanilla js + flow, and looking at my code it looks as though i’m switching off based on the response.status
but looking at the curl’s everything is returning 200
looking at some repos on github looks like others are doing that as well… i wonder why the curl isn’t reporting this
Tom
@moT01
Jan 25 2017 16:55
@Travmatth i used a call to the /channel api url, and there's an error object or key that gives like a not found if it doesn't exist
Icah Banton
@remdata
Jan 25 2017 16:59

Hello. Dose anyone know why the following HTML code is producing an error: <html>

<head>

<title>Event Test</title>
</head>

<body>

<h1>Event Test</h1>

<p>

<button onClick="alert("Aha! An Event!")">Click this to test an event handler</button>
</p>
</body>
</html>

Travmatth
@Travmatth
Jan 25 2017 16:59
@remdata: try changing onclick=“alert(“here”)” to onclick=“alert(‘here’)"
aenila
@aenila
Jan 25 2017 16:59
Need single quotes inside the parenthesis
Icah Banton
@remdata
Jan 25 2017 17:03
@Travmatth . Thanks. I did that before but it did not work. Now it does. That's why I was so confused.
CamperBot
@camperbot
Jan 25 2017 17:03
remdata sends brownie points to @travmatth :sparkles: :thumbsup: :sparkles:
:cookie: 297 | @travmatth |http://www.freecodecamp.com/travmatth
playingwithinfinity
@playingwithinfinity
Jan 25 2017 17:03
@remdata You need to escape the quotes inside onClick inside the alert
Icah Banton
@remdata
Jan 25 2017 17:08
@playingwithinfinity . Suggestion by travmatth worked.
Ve Vanderpool
@VanAmoVe
Jan 25 2017 17:13
okay! I think I am done with my tribute page! If anyone could take a look and tell me their thoughst, I would really appreciate it! Thanks! http://codepen.io/VanAmoVe/full/LxyqVr/
kirbyedy
@kirbyedy
Jan 25 2017 17:39
@VanAmoVe looks allright, a bit hard to read for me, aaand its not very responsive once you resize the browser window to a mobile size
Ve Vanderpool
@VanAmoVe
Jan 25 2017 17:44
@kirbyedy I'm not sure what you mean because it resizes fine in mine. I havent learned responsive design yet so as far as mobile goes I dont know how to make it function better
@kirbyedy it seems you like simple interface so this wouldnt be your thing anyways
kirbyedy
@kirbyedy
Jan 25 2017 17:46
Screen Shot 2017-01-25 at 19.45.18.png
@VanAmoVe looks like this
Ve Vanderpool
@VanAmoVe
Jan 25 2017 17:47
on your browser?
kirbyedy
@kirbyedy
Jan 25 2017 17:47
what browser do you use ?
yes
Ve Vanderpool
@VanAmoVe
Jan 25 2017 17:47
chrome
kirbyedy
@kirbyedy
Jan 25 2017 17:47
ok do you know how to open the developer tools ?
Ve Vanderpool
@VanAmoVe
Jan 25 2017 17:47
yes
kirbyedy
@kirbyedy
Jan 25 2017 17:48
good, open it and chek in the bottom left corner
there should be a small icon which looks like a mobile phone/tablet
and click on it
second from left
in the same row where says Elements, Console, sources...
once you click on it, your page will show how does it look on mobile device, different devices can be changed in the dropdown list
Ve Vanderpool
@VanAmoVe
Jan 25 2017 17:54
my computer is being extra slow but when I see the mobile view on mine the only problem I see is the background image not sizing
Cduffy098
@Cduffy098
Jan 25 2017 17:54
When you are designing your portfolio do you have to include your own personal apps/websites made or can you just take for e.g. images off google of a website that you didn't make? just curious incase I have to come back and design my portfolio later or if I can do it now.
kirbyedy
@kirbyedy
Jan 25 2017 17:55
Screen Shot 2017-01-25 at 19.55.17.png
@VanAmoVe
@Cduffy098 well if its your portfolio I guess you should have your own work there
Ve Vanderpool
@VanAmoVe
Jan 25 2017 17:56
@kirbyedy i think its something wrong with codepen. if you look at it in editor view it doesnt do that
kirbyedy
@kirbyedy
Jan 25 2017 17:56
no worries if you dont have any at the moment, just put some temporary placeholder images, and once you finish the projects on fcc, you can put those
Cduffy098
@Cduffy098
Jan 25 2017 17:57
@kirbyedy eh ok I just needed to know if it was required, guess I'll have to continue the work and design the apps and come back to it later on thanks
CamperBot
@camperbot
Jan 25 2017 17:57
cduffy098 sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1709 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
kirbyedy
@kirbyedy
Jan 25 2017 17:57
@Cduffy098 yes, just make a rough skeleton, and finish it up later on
mohzo
@mohzo
Jan 25 2017 17:58
hello !
kirbyedy
@kirbyedy
Jan 25 2017 17:58
@VanAmoVe nope its fine, the problem is in that responsiveness I was talking about, it is up to you if you want to explore deeper or not
mohzo
@mohzo
Jan 25 2017 17:59
i tried loading picture from my pc but its not showing the picture . any help pls. <img class="img-responsive thick-green-border" src="C:\Users\mohzo\Desktop\freecodecamp\m.jpg" alt="mohzo's picture ">
kirbyedy
@kirbyedy
Jan 25 2017 17:59
@VanAmoVe if you are interested check this out: https://www.youtube.com/watch?v=BIz02qY5BRA
@mohzo I think you should upload the picture somewhere on the internet in order for everybody to access it
because we can not access your computer :)
mohzo
@mohzo
Jan 25 2017 18:01
to where should i upload the image? github?
kirbyedy
@kirbyedy
Jan 25 2017 18:03
yes you can use github
or any other cloud service that supports public access
mohzo
@mohzo
Jan 25 2017 18:03
@kirbyedy thanks
CamperBot
@camperbot
Jan 25 2017 18:03
mohzo sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1710 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Gulsvi
@gulsvi
Jan 25 2017 18:10

@VanAmoVe This seems to work better for me:

body {
  background: url("https://static-wp.lonewolfmag.com/140717134225-frida-kahlo-photo-horizontal-large-gallery.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Source: https://css-tricks.com/perfect-full-page-background-image/

Your computer might load images more quickly if you use an image hosting service rather than hotlinking
mohzo
@mohzo
Jan 25 2017 18:15
@kirbyedy <img class="img-responsive thick-green-border" src="https://github.com/mohzo/repo1/m.jpg" alt="mohzo's picture "> . this image refused to display
Axiomteck
@axiomteck
Jan 25 2017 18:16
hey how can i add google feed or reviews to my wordpress website
kirbyedy
@kirbyedy
Jan 25 2017 18:17
@mohzo are you sure that is the correct way of linking picture from github ?
cause when I try to enter that link into the browser I get not found
so I am guessing the link is not right
mohzo
@mohzo
Jan 25 2017 18:18
ok
down at the bottom should be the example I think
Ve Vanderpool
@VanAmoVe
Jan 25 2017 18:19
@SkyCoder01 that seemed to make it worse
Alexey Mikhaylov
@plxel
Jan 25 2017 18:23
hi, can anybody help with adding link to react-toolbox dist js file to codepen? where I can find it? or how can i use npm react libraryies without cdn like bootstrap
Josh Chatfield
@joshchatfield
Jan 25 2017 18:31
Hello, can someone help please? when I use .getJSON to connect with wikipedia's api I get the console error "No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access."
Ghulam Shabir
@ghulamshabir
Jan 25 2017 18:32
@joshchatfield try adding &origin=* to the url
Josh Chatfield
@joshchatfield
Jan 25 2017 18:33
@ghulamshabir ok I will try
@ghulamshabir That did it, you're a genius, thank you :-)
CamperBot
@camperbot
Jan 25 2017 18:35
:star2: 1758 | @ghulamshabir |http://www.freecodecamp.com/ghulamshabir
joshchatfield sends brownie points to @ghulamshabir :sparkles: :thumbsup: :sparkles:
Ghulam Shabir
@ghulamshabir
Jan 25 2017 18:35
@joshchatfield :smile:
Gulsvi
@gulsvi
Jan 25 2017 18:39
image.png
@VanAmoVe This is the difference for me - the one on the left uses the code I gave, the one on the right is the original. All it does is center the background:
I'm going through some of the responsive challenges now, so can't help too much on fixing your text (yet)
lastix
@lastix
Jan 25 2017 18:56
Hi guys, stupid question probably but. I'm trying to set a full height/width background image for the body. But when i add anything to my page, the page get's longer and i see a scrollbar? Like, even a single h1 makes a scrollbar appear. Why is this happening?
aenila
@aenila
Jan 25 2017 19:01
background-size: 100% is what I used on the Local Weather challenge and it worked fine for me. Perhaps that will work?
Cristina Jean Donato
@cristinajeandonato
Jan 25 2017 19:06
@lastix try styling the body to overflow: hidden; margin: 0;
lastix
@lastix
Jan 25 2017 19:08
@cristinajeandonato fixed it, seems like the h1 margin caused the problem. Did it only caused a problem because it was on the edge of the viewport?
Brian Dodwell
@dodwellwebdev
Jan 25 2017 19:11

<style>
body {
background-color: black;
font-family: Monospace;
color: green;
.pink-text {
color:pink;
}

}
</style>

<h1 class="pink-text">Hello World!</h1>

Naterroy1
@Naterroy1
Jan 25 2017 19:14

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine">

<div class="violet-background">
<h1>Nate's Porfolio</h1>
<div class="line-height row">
<button class="btn-primary btn pull-right btn-lg col-lg-2">Contact</button>
<button class="btn-primary btn pull-right btn-lg col-lg-2">Portfolio</button>
<button class="btn-primary btn pull-right btn-lg col-lg-2">About</button>
</div>
</div>

<body>
<div class="boxed">
<h2><span>About me!<span><h2>
<p>I am just a young man. I am just starting out on Free Code Camp, which means I have no prior coding experience. One day I hope to make websites for people to make bank.</p>
<img src="http://bit.ly/2i5tuxr" alt="Picture of my favorite rapper">Me and my identical twin brother. I am on the right.</img>

why wont my image work??
Ghulam Shabir
@ghulamshabir
Jan 25 2017 19:15
hello dear campers please review my wikipedia viewer project http://codepen.io/ghulamshabir/full/GrvLrE/
Cristina Jean Donato
@cristinajeandonato
Jan 25 2017 19:16
@thedodwellemporium you place the style pink-text within body style which is causing the error
Tyler Moeller
@TylerMoeller
Jan 25 2017 19:16
@lastix @cristinajeandonato overflow:hidden will make it so you cannot scroll your page, so be sure that's what you want on smaller screens. To visualize what's going on, try giving a different background color to html:
html {
  box-sizing: border-box;
  background-color: black;
}
Cristina Jean Donato
@cristinajeandonato
Jan 25 2017 19:17
@thedodwellemporium <style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
.pink-text {
color:pink;
}
</style>
sennator
@sennator2
Jan 25 2017 19:17
why isn't anything showing in console when i call my wiki function
Naterroy1
@Naterroy1
Jan 25 2017 19:18
nevermind the image address was invalid
kirbyedy
@kirbyedy
Jan 25 2017 19:19
@sennator2 it does
Uncaught ReferenceError: json is not defined
line 6
Cristina Jean Donato
@cristinajeandonato
Jan 25 2017 19:20
@Naterroy1 nat <img> tag doesnt need closing tag or if you want to close it for xml or html 4 it will look like this <img src""/>
kirbyedy
@kirbyedy
Jan 25 2017 19:20
@sennator2 don`t use codepens console, always use the browsers console
sennator
@sennator2
Jan 25 2017 19:21
@kirbyedy thanks
CamperBot
@camperbot
Jan 25 2017 19:22
sennator2 sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1711 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
kirbyedy
@kirbyedy
Jan 25 2017 19:24
in the ajax call check the line format: it should be in ' '
I think
Yaroslav Paslavskiy
@YariSPB
Jan 25 2017 19:25
Hi! I need help with the "Build a Wikipedia Viewer". My codepen is finished, but it doesn't search through some queries. For example, it finds paris, moscow, a, church, holy, vladimir, but it fails to find other titles, like putin, holy roman etc...there must some kind of mistake, eigher in getting JSON or maybe some mistakes happens when JSON is used to make outputs... here is my codepen, much appreciated if you can find a mistake. http://codepen.io/YariSPB/pen/dOEovJ
Yaroslav Paslavskiy
@YariSPB
Jan 25 2017 19:34
anybody? :)
Tyler Moeller
@TylerMoeller
Jan 25 2017 19:36
@ghulamshabir Nice work - it would be good to make it responsive. the Text + icon in the navbar overlap on smaller screens and the images overlap the text in the search results. Plus, the images are very small. For your JS, your api and url variables don't need to be global and there's no need to have both a submit and a keypress event listener.
Ghulam Shabir
@ghulamshabir
Jan 25 2017 19:39
@TylerMoeller :smile: impressive review :smile: thanks alot
CamperBot
@camperbot
Jan 25 2017 19:39
ghulamshabir sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1404 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jan 25 2017 19:40
@ghulamshabir Tried not to give direct answers, but if you need a hint for some of the changes, let me know :)
kirbyedy
@kirbyedy
Jan 25 2017 19:41
@ghulamshabir hmmm works only once for me
first search gives result but then each additional does not
how do you clear the results ?
Ghulam Shabir
@ghulamshabir
Jan 25 2017 19:42
@TylerMoeller yeah sure I will get back to you if I am stuck again :smile:
ErezT
@ErezT
Jan 25 2017 19:43

Working on tweeting a quote, it worked when i used a hardcoded text, however when i try to add the url + encodedURI it doesn't work. Any ideas?

https://codepen.io/oldmanwithbeer/pen/rjMLLW?editors=1011

Ghulam Shabir
@ghulamshabir
Jan 25 2017 19:43
@kirbyedy yeah I realized it works only for once, I will check it again
Tyler Moeller
@TylerMoeller
Jan 25 2017 19:43
@YariSPB It seems that some of the searches return results without a thumbnail image, so your for loop runs into errors on pages[i].thumbnail.source. You should check if that property exists before trying to get the value
Ghulam Shabir
@ghulamshabir
Jan 25 2017 19:44
@kirbyedy thank you for catching that
CamperBot
@camperbot
Jan 25 2017 19:44
ghulamshabir sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1712 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Yaroslav Paslavskiy
@YariSPB
Jan 25 2017 19:45
@TylerMoeller . Suspected that! Thank you! I will fix it now:)
CamperBot
@camperbot
Jan 25 2017 19:45
yarispb sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1405 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jan 25 2017 19:48

@ErezT To help debug, add a console.log(tweetText) to your tweet button click function:

  $("#tweet").on("click", function() {
    finalTweet = titleElm.text() + " " + contentElm.text();
    console.log(tweetText)
    // window.open(tweetText, '_blank');
  });

You'll see that there is no text after the URL.

Patrick Black
@Mortiferr
Jan 25 2017 19:49
http://codepen.io/Mortiferr/pen/oBZJzp?editors=1011
I have no idea how I can toggle the from the metric system using a button
sennator
@sennator2
Jan 25 2017 19:52
@Mortiferr connect your toogle to variables
Patrick Black
@Mortiferr
Jan 25 2017 19:53
Yeah but then how can I toggle from there
sennator
@sennator2
Jan 25 2017 19:55
@Mortiferr your button should work like this
it have some class initally but when clicked class change
thats your toogle
so then you can check if your button have one class
do one thing
if it have other class do other thing
Gulsvi
@gulsvi
Jan 25 2017 20:00
@Mortiferr There is a series of challenges that talk about using a click event handler on a button to run code. Start here: https://www.freecodecamp.com/challenges/trigger-click-events-with-jquery
Patrick Black
@Mortiferr
Jan 25 2017 20:05
thanks @sennator2 and @SkyCoder01
CamperBot
@camperbot
Jan 25 2017 20:05
mortiferr sends brownie points to @sennator2 and @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 267 | @sennator2 |http://www.freecodecamp.com/sennator2
:cookie: 39 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Joakim Vercaemst
@Jverc
Jan 25 2017 20:06
Hello everybody
I'm working on my portfolio page and want to add some images to the page; but want to set them to a max certain height, which I'm struggling with because the images remain very large
This sounds like a very basic problem, what it is but I've started coding with hml and css just since 2 weeks so still struggling with these basic things, sorry
Patrick Black
@Mortiferr
Jan 25 2017 20:08
No problem, how can we help?
Joakim Vercaemst
@Jverc
Jan 25 2017 20:09

<p data-height="265" data-theme-id="0" data-slug-hash="xgLNmY" data-default-tab="html,result" data-user="Jverc" data-embed-version="2" data-pen-title="Personal Portfolio WebPage" class="codepen">See the Pen <a href="http://codepen.io/Jverc/pen/xgLNmY/">Personal Portfolio WebPage</a> by Joakim Vercaemst (<a href="http://codepen.io/Jverc">@Jverc</a>) on <a href="http://codepen.io">CodePen</a>.</p>

<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

how can I show you what I have?
sennator
@sennator2
Jan 25 2017 20:10
give link to your codepen @Jverc
as you can see the 2 images under the homer simpson one are very large
Hello911
@Hello911
Jan 25 2017 20:12

var Car = function(wheels, seats, engines) {
  //Change this constructor
  this.wheels = 4;
  this.seats = 5;
  this.engines = 1;
};

//Try it out here
var myCar = new Car(6, 3, 1);
Why doesn't my code work? I checked it multiple times. The window is not displaying 6 wheels, 3 seats, and 1 engines.
Joakim Vercaemst
@Jverc
Jan 25 2017 20:12
and I thought that with putting the div class="container" with max-height and max-width to 10%; the images would be smaller; but they seem to stay the same
sennator
@sennator2
Jan 25 2017 20:13
give your image divs height and width you want
and give it object-fit : contain or cover
Patrick Black
@Mortiferr
Jan 25 2017 20:13
http://codepen.io/Mortiferr/pen/oBZJzp?editors=1010
okay, so if you take a look at my code, I'm trying to get it so that when the variable units equals the variable metric it prints it where the F is right now
sennator
@sennator2
Jan 25 2017 20:13
depending what you want
Hello911
@Hello911
Jan 25 2017 20:13
<img height=40px width=30px>
try this
Joakim Vercaemst
@Jverc
Jan 25 2017 20:14
directly in the html?
is there no way to do this in the css?
sennator
@sennator2
Jan 25 2017 20:16
@Jverc in css
Hello911
@Hello911
Jan 25 2017 20:16
@Jverc Make a class. and
put in your div class containing in image
.size{
width=3px;
height=5px;
}
<div class=size></div>
Joakim Vercaemst
@Jverc
Jan 25 2017 20:18
that is similar to how I have it now
<div class="container-fluid">
<div class="container responsive">
<div class="col-xs-6 img-responsive img-portfolio">
<img src="http://www.coloradocreativedesigns.com/images/portfolio.png"/>
</div>
and I made this in css
.container {
width: 10px;
height: 10px;
}
so I suppose the second div class (container) should set the max size to my images, no?
Tyler Moeller
@TylerMoeller
Jan 25 2017 20:19
@Jverc img-responsive is meant for the <img> tag.
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6">
      <img class="portfolio-image img-responsive center-block" src="http://www.coloradocreativedesigns.com/images/portfolio.png">
    </div>
    <div class="col-xs-6">
      <img class="portfolio-image img-responsive center-block" src="https://cdn.colorlib.com/wp/wp-content/uploads/sites/2/hind-fullscreen-digital-portfolio-theme.jpg">
    </div>
  </div>
</div>
ErezT
@ErezT
Jan 25 2017 20:20
@TylerMoeller So i see.. thanks
hmmm question is why is there a space there instead of the encoded string...
CamperBot
@camperbot
Jan 25 2017 20:20
erezt sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1406 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jan 25 2017 20:20
You can then do something like this with CSS @Jverc:
.portfolio-image  {
  max-height: 200px;
}
But it's hard to get it right, because both images are different sizes...best to use images that are the same size if possible.
@ErezT Because you define tweeText before you get the text back from the API. When you call an API, it takes time to visit the URL and get the response back.
Joakim Vercaemst
@Jverc
Jan 25 2017 20:23
ok; that seemed to work @TylerMoeller thanks a lot!!!
CamperBot
@camperbot
Jan 25 2017 20:23
jverc sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1407 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Joakim Vercaemst
@Jverc
Jan 25 2017 20:24
thanks to everybody else as well for helping!
ErezT
@ErezT
Jan 25 2017 20:32
@TylerMoeller Thanks for the help, I moved tweetText to inside the tweet function and it works :)
CamperBot
@camperbot
Jan 25 2017 20:32
erezt sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: erezt already gave tylermoeller points
Yaroslav Paslavskiy
@YariSPB
Jan 25 2017 20:42
opps , found it...sorry
Justin Kishbaugh
@jkishbaugh
Jan 25 2017 21:06
Hey everyone, I am working on my pomodoro timer. Trying to set the alarm sound but I am not sure where to get my mp3 or ogg from. Anybody have a good resource to access alert sounds?
Ivan Ngundela
@ingundela
Jan 25 2017 21:07
hello everyone... i can I move a list of content to the the right side of my page
<div id='menu'>

    <ul class = "nav nav-pills">

        <li>
              <a href="a">Vodacom Mozambique</a>
        </li>

        <li class = "pull-right">
              <a href="a">contact us</a>
        </li>

        <li class = "pull-right">
              <a href="a">How we do it</a>
        </li>

        <li class = "pull-right">
              <a href="a">What we do</a>
        </li>

        <li class = "pull-right">
              <a href="a">Who we are</a>
        </li>

      </ul>

</div>
when I use the "pull-right" it does not work help me
Hello911
@Hello911
Jan 25 2017 21:14
Can map and filter method be used to alter the original array? Or only sort method can?
Charles Williams
@cfunkles
Jan 25 2017 21:23
Hello, i'm building a portfolio. I am not very impressed with how my bootstrap navigation bar looks. I know I can built one using bootstrap or CSS. Is there another way I can built one, knowing i'm still a beginner? If not not which way gives your better customization, bootstrap or CSS?
@ingundela i'm still new and I'm not sure if this will work, but did you try "float-right" instead?
Cristina Jean Donato
@cristinajeandonato
Jan 25 2017 21:28
@cfunkles make your own CSS for you nav bar if you want better customization
its just that bootstrap can make everything built fast
Michael Tolu Davies
@TMDav007
Jan 25 2017 21:29
Hello, I'm Building a portfolio, looked at the example, got totally confused, dunno how to go about it, pls can anyone help???
Adel
@AdelMahjoub
Jan 25 2017 21:29
Hello, i'm building a portfolio. I am not very impressed with how my bootstrap navigation bar looks. I know I can built one using bootstrap or CSS. Is there another way I can built one, knowing i'm still a beginner? If not not which way gives your better customization, bootstrap or CSS?
@cfunkles bootstrap or CSS??
@cfunkles isn't bootstrap a css framework ?
Charles Williams
@cfunkles
Jan 25 2017 21:36
@AdelMahjoub Here is what I am basing my understanding off of. I learned to do it this way- http://www.w3schools.com/css/css_navbar.asp
@cristinajeandonato Great!
Adel
@AdelMahjoub
Jan 25 2017 21:37
@cfunkles I guess no where in that sites is mention about css different than bootstrap,
Cristina Jean Donato
@cristinajeandonato
Jan 25 2017 21:40
actually they skip a lot of info too about html and css
Charles Williams
@cfunkles
Jan 25 2017 21:40
@AdelMahjoub All I know is I found two ways to do it, and each one looked different
Gulsvi
@gulsvi
Jan 25 2017 21:40
@cfunkles You can do both. For example, build the default bootstrap navbar, and then use CSS to customize it. Bootstrap is just a CSS framework, so in the end, you are using CSS behind the scenes when using bootstrap.
I'm figuring it out as I go along too - there's a lot to learn in the bootstrap.css file and shows how to customize the way bootstrap looks
Adel
@AdelMahjoub
Jan 25 2017 21:45
@cfunkles so if I follow your logic this is a third way to do it http://foundation.zurb.com/ and this is a forth way http://materializecss.com/
@cfunkles and for each library I count a different way to do it
@cfunkles consider I know absolutly nothing, can you tell me what is CSS ?
JD Tadlock
@jdtdesigns
Jan 25 2017 21:48
@AdelMahjoub I'd skip the frameworks for right now and learn css. Without at least a basic understanding of the basics of html/css, frameworks will not make any sense and just give you headaches.
Adel
@AdelMahjoub
Jan 25 2017 21:49
@jdtdesigns it was a question for @cfunkles , it seems he think that bootstrap and CSS are two different "things"
JD Tadlock
@jdtdesigns
Jan 25 2017 21:49
There's plenty of free sources for learning html/css. Youtube is big one. Codecademy has a free course. For a little money you can buy great courses as well.
Charles Williams
@cfunkles
Jan 25 2017 21:49
@SkyCoder01 Great
JD Tadlock
@jdtdesigns
Jan 25 2017 21:50
ah*
Adel
@AdelMahjoub
Jan 25 2017 21:50

@cfunkles

Hello, i'm building a portfolio. I am not very impressed with how my bootstrap navigation bar looks. I know I can built one using bootstrap or CSS. Is there another way I can built one, knowing i'm still a beginner? If not not which way gives your better customization, bootstrap or CSS?

Charles Williams
@cfunkles
Jan 25 2017 21:50
@AdelMahjoub not exactly what I was thinking
JD Tadlock
@jdtdesigns
Jan 25 2017 21:50
@cfunkles Read my comment to @AdelMahjoub above
that's for you ;)
Charles Williams
@cfunkles
Jan 25 2017 21:50
@AdelMahjoub I am only a few weeks in
JD Tadlock
@jdtdesigns
Jan 25 2017 21:51
which means you need to dive into the basics and not skip around
i wish i had people telling me a direct path when i started
Charles Williams
@cfunkles
Jan 25 2017 21:51
Yes, I am going in order the the camp
JD Tadlock
@jdtdesigns
Jan 25 2017 21:52
fcc doesn't teach you much of anything
it's just to challenge you
the learning is up to you and how much you push yourself
Adel
@AdelMahjoub
Jan 25 2017 21:53
for a total beginner my advice is to spend some money on books, tutorials are not good ressources for beginners
JD Tadlock
@jdtdesigns
Jan 25 2017 21:53
@AdelMahjoub It depends on how you learn
some people don't learn at all from books
they need visuals
Adel
@AdelMahjoub
Jan 25 2017 21:55
@jdtdesigns true, but a lot of book authors are very experienced, and their books full of useful content and advice
JD Tadlock
@jdtdesigns
Jan 25 2017 21:56
@AdelMahjoub There's a ton of different great outlets for learning. Books are just one. ;)
Adel
@AdelMahjoub
Jan 25 2017 21:59
@jdtdesigns agree with you, just a personel preference
Charles Williams
@cfunkles
Jan 25 2017 22:00
Just be careful when assuming what another persons knowledge is. I admit I need build a few more basics. But for what I am trying to do I now have a better uderstanding
Adel
@AdelMahjoub
Jan 25 2017 22:02
I'm not assuming anything, ask some other people what do they understand when they read this "If not not which way gives your better customization, bootstrap or CSS?"
John Nunns
@johnnunns
Jan 25 2017 22:02
var obj = {
  key: [2, 1, 5]
};

function square(number){
    return number*number;
}

function getSquaredElementsAtProperty(obj, key) {
     var x = [];
    if(!obj[key]){
        return x;
    }else if(obj[key].length === 0){
        return x;
    }else if(!Array.isArray(obj[key])){
        return x;
    }
    return square(obj[key]);

}
Tyler Moeller
@TylerMoeller
Jan 25 2017 22:02
@cfunkles CSS will give you more customization than using Bootstrap's HTML classes alone
John Nunns
@johnnunns
Jan 25 2017 22:02
trying to square all the numbers in the array
return square(obj[key]) returns NaN
Adel
@AdelMahjoub
Jan 25 2017 22:02
@cfunkles because for me, bootstrap is CSS
John Nunns
@johnnunns
Jan 25 2017 22:02
any advice here?
JD Tadlock
@jdtdesigns
Jan 25 2017 22:03
@johnnunns back at it again lol
John Nunns
@johnnunns
Jan 25 2017 22:03
with the white vans
JD Tadlock
@jdtdesigns
Jan 25 2017 22:03
@TylerMoeller you help this time :D
John Nunns
@johnnunns
Jan 25 2017 22:03
I'm doing good at the property problems, ran into a roadblock here on this one though
Tyler Moeller
@TylerMoeller
Jan 25 2017 22:03
I was going to recommend: https://gitter.im/Codewars/codewars.com :)
John Nunns
@johnnunns
Jan 25 2017 22:03
I wasn't sure if a high order function works here.
I'm in that group
looks a little inactive though compared to java and front end though so I cam here
my go to :)
JD Tadlock
@jdtdesigns
Jan 25 2017 22:05
@johnnunns if me and tyler weren't here, you'd probably be fresh out of luck lol
John Nunns
@johnnunns
Jan 25 2017 22:05
haha this is true!
JD Tadlock
@jdtdesigns
Jan 25 2017 22:05
@johnnunns What's the challenge description again?
John Nunns
@johnnunns
Jan 25 2017 22:06
I'll carry you guys in my resume as "Taught by:"
Write a function called "getSquaredElementsAtProperty".

Given an object and a key, "getSquaredElementsAtProperty" returns an array containing all the squared elements of the array located at the given key. 

Notes:
* If the array is empty, it should return an empty array.
* If the property at the given key is not an array, it should return an empty array.
* If there is no property at the key, it should return an empty array.

var obj = {
  key: [2, 1, 5]
};
var output = getSquaredElementsAtProperty(obj, 'key');
console.log(output); // --> [4, 1, 25]

Starter Code :
function getSquaredElementsAtProperty(obj, key) {
  // your code here
}
so my code as of right now passes all the if it's not an array, no property, blah blah
doesn't pass the main req of squaring the numbers though
I've used filter and reduce on the other ones pretty well actually
JD Tadlock
@jdtdesigns
Jan 25 2017 22:08
.reduce() would work again for this
John Nunns
@johnnunns
Jan 25 2017 22:08
maybe I'm letting the term get in my head i've kind of seen reduce as something that actually makes something smaller :)
ok let me give it a shot
Charles Williams
@cfunkles
Jan 25 2017 22:10
@AdelMahjoub I understand what your saying. I was confused about the differences
JD Tadlock
@jdtdesigns
Jan 25 2017 22:11
@cfunkles The basic explanation is Bootstrap is CSS
CSS is what Bootstrap is made with
Charles Williams
@cfunkles
Jan 25 2017 22:11
@jdtdesigns I understand that
JD Tadlock
@jdtdesigns
Jan 25 2017 22:11
so if you know css, then Bootstrap will make sense
which is why i recommend learning css first ;)
John Nunns
@johnnunns
Jan 25 2017 22:12
yeah jd with reduce I'm afraid I'm just adding them all together?
I'm squaring them
but not keeping separate
so i'm getting 30 right now
2, 1 ,5 = 30
Charles Williams
@cfunkles
Jan 25 2017 22:13
@jdtdesigns I get it now,
I am learning CSS too
John Nunns
@johnnunns
Jan 25 2017 22:14
var obj = {
  key: [2, 1, 5]
};

function square(number){
    return number*number;
}

function getSquaredElementsAtProperty(obj, key) {
     var x = [];
    if(!obj[key]){
        return x;
    }else if(obj[key].length === 0){
        return x;
    }else if(!Array.isArray(obj[key])){
        return x;
    }
    return obj[key].reduce(function(a, b){
    return b*b+a
    }, 0);

}

getSquaredElementsAtProperty(obj, 'key')
JD Tadlock
@jdtdesigns
Jan 25 2017 22:14
@johnnunns You need to return an array, not a number
so {, 0); should be {, []);
John Nunns
@johnnunns
Jan 25 2017 22:16
lets give that a shot
var obj = {
  key: [2, 1, 5]
};

function square(number){
    return number*number;
}

function getSquaredElementsAtProperty(obj, key) {
     var x = [];
    if(!obj[key]){
        return x;
    }else if(obj[key].length === 0){
        return x;
    }else if(!Array.isArray(obj[key])){
        return x;
    }
    return obj[key].reduce(function(a, b){
    return b+a
    }, []);

}

getSquaredElementsAtProperty(obj, 'key')
with the [] i
i'm returning 512
JD Tadlock
@jdtdesigns
Jan 25 2017 22:17
are you posting wins or each step? :D
John Nunns
@johnnunns
Jan 25 2017 22:18
what's wins?
Janina Pohorecki
@janepohorecka
Jan 25 2017 22:18
Can someone please help me fix my navigation bar? This is the second website I have ever made (besides my portfolio page) and I really dont understand my problem.
The mobile view of it.
JD Tadlock
@jdtdesigns
Jan 25 2017 22:18
wins as in code that completes the challenge lol @johnnunns
Cameron Stacy
@TheDoctorCam
Jan 25 2017 22:18
Running my personal portfolio through codepen on a mobile browser is causing the page to jump when scrolling... can anyone help? http://codepen.io/TheDoctorCam/pen/jyLRWK
@janepohorecka hi, what specific issues are you having?
John Nunns
@johnnunns
Jan 25 2017 22:19
the code that will complete the challenge is taking and array like [2, 1, 5] and returning [4, 1, 25]
@jdtdesigns
Janina Pohorecki
@janepohorecka
Jan 25 2017 22:21
@TheDoctorCam When I click the three line bar on the top right side of the page, the navigation expands in a funky way. I really dont understand this issue.
Cameron Stacy
@TheDoctorCam
Jan 25 2017 22:23
@janepohorecka oh I see it now... it's hard for me to help without seeing your code. But whenever I want a responsive navbar, I use a media query like this :
@media screen and (max-width:680px) {
ul.topnav.responsive {
position: relative;
}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
Lallo Vigil
@lalov1
Jan 25 2017 22:24
I'm working on the Twitch project and having a little problems with the API. I want to bring back multiple users, but I only get one at a time. Is there a way to get multiple at the same time? https://wind-bow.gomix.me/twitch-api/streams/Day9TV
Janina Pohorecki
@janepohorecka
Jan 25 2017 22:24
@TheDoctorCam my code is right here: https://github.com/janepohorecka/Test-Northwest
And thanks!! Let me look over that code
Cameron Stacy
@TheDoctorCam
Jan 25 2017 22:24
@janepohorecka just posted my personal portfolio which features this... http://codepen.io/TheDoctorCam/pen/jyLRWK
Tyler Moeller
@TylerMoeller
Jan 25 2017 22:27
@lalov1 Unfortunately, no, you'll have to loop through the users array and call the API for each one unless you use the standard Twitch API and get an API key.
JD Tadlock
@jdtdesigns
Jan 25 2017 22:27
@johnnunns I just did it using .map() ;)
Tyler Moeller
@TylerMoeller
Jan 25 2017 22:28
Was going to say ^^ .map returns a new array. probably a better way to go over .reduce()
JD Tadlock
@jdtdesigns
Jan 25 2017 22:28
after reading the challenge rules, i decided .map was better ;)
John Nunns
@johnnunns
Jan 25 2017 22:32
var obj = {
  key: [2, 1, 5]
};

function square(arr) {

    var x = [];

    for (var i = 0; i< arr.length; i++) {
        x.push(arr[i] * arr[i]);
    }

    return x;     
}

function getSquaredElementsAtProperty(obj, key) {
     var x = [];
    if(!obj[key]){
        return x;
    }else if(obj[key].length === 0){
        return x;
    }else if(!Array.isArray(obj[key])){
        return x;
    }
    return square(obj[key])

}

getSquaredElementsAtProperty(obj, 'key')
JD Tadlock
@jdtdesigns
Jan 25 2017 22:32
@johnnunns You're way over complicating it lol
John Nunns
@johnnunns
Jan 25 2017 22:32
I looked up some info on google and came up with this
as usual! :)
show me your solution
JD Tadlock
@jdtdesigns
Jan 25 2017 22:33
function getSquaredElementsAtProperty(obj, key) {
  if ( !obj[key] || !Array.isArray(obj[key]) || !obj[key].length ) return []

  return obj[key].map(val => val * val)
}
John Nunns
@johnnunns
Jan 25 2017 22:33
oh so you didn't like all my if statements huh??
:) haha
yeah that looks much better
can you write the map without the =>
just so I know what that looks like
it works. And I'd hate to see the character comparison there lol
JD Tadlock
@jdtdesigns
Jan 25 2017 22:37
return obj[key].map(function(val) { return  val * val; });
John Nunns
@johnnunns
Jan 25 2017 22:41
ok so very similar to filter
in syntax
thanks @jdtdesigns
CamperBot
@camperbot
Jan 25 2017 22:41
:cookie: 889 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
johnnunns sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
JD Tadlock
@jdtdesigns
Jan 25 2017 22:42
@johnnunns Your goal should always be to avoid any i
'if else'
John Nunns
@johnnunns
Jan 25 2017 22:42
ok so exact same problem pretty much but using filter here, just have to take an array and return only the odd numbers. Are you able to make this shorter or have I not overcomplicated this time?
var obj = {
  key: [1, 2, 3, 4, 5]
};

function odd(number){
    return number%2 === 1;
}

function getOddElementsAtProperty(obj, key) {

if( !obj[key] || !Array.isArray(obj[key]) || !obj[key].length){
    return [];
}
return obj[key].filter(function(number){
    return odd(number);
});
}

getOddElementsAtProperty(obj,'key')
JD Tadlock
@jdtdesigns
Jan 25 2017 22:42
if you're chaining 'if else' then you know you can DRY your code up
John Nunns
@johnnunns
Jan 25 2017 22:42
gotcha
using the ||
JD Tadlock
@jdtdesigns
Jan 25 2017 22:43
just move the number%2 === 1; to the return in getOdd...
no reason to have a second function
John Nunns
@johnnunns
Jan 25 2017 22:46
yeap you're right
the growth is real though. Having a good day today
Thanks man @jdtdesigns
CamperBot
@camperbot
Jan 25 2017 22:46
johnnunns sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: johnnunns already gave jdtdesigns points
JD Tadlock
@jdtdesigns
Jan 25 2017 22:47
@johnnunns welcome ;)
Janina Pohorecki
@janepohorecka
Jan 25 2017 22:48
In mobile/tablet size, why does my navigation bar only open 90%?? https://janepohorecka.github.io/Test-Northwest/ Please, please help me
:((
JD Tadlock
@jdtdesigns
Jan 25 2017 22:52
@janepohorecka You have a few issues, but one glaring one is you have a <li> outside the <ul>
<h1 id="header-title">
          <img src="logo.svg">
          <a href="#"> Test Northwest</a>
        </h1>
        <ul class="topnav responsive" id="nav">
          <!-- <h1 id="header-title">
            <img src="logo.svg">
            <a href="#"> Test Northwest</a>
          </h1> -->
          <li><a href="#">Welcome</a></li>
          <li><a href="#">LD Screening</a></li>
          <li><a href="#">ADHD Screening</a></li>
          <li><a href="#">Appointments</a></li>
          <li><a href="#">About</a></li>
        </ul>

        <li class="icon">
          <a href="javascript:void(0)ow ;" onclick="myFunction()"></a>
        </li>
Also, h1's aren't meant to be wrappers for content
you should be using a div
Janina Pohorecki
@janepohorecka
Jan 25 2017 22:55
@jdtdesigns Thank you for your response ;) Let me see what I can do now that you mention this.
CamperBot
@camperbot
Jan 25 2017 22:55
janepohorecka sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 890 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Janina Pohorecki
@janepohorecka
Jan 25 2017 22:55
I don't see my three tab navigation button when I place it inside the UL
@jdtdesigns
@jdtdesigns I think thats why I orginally must have placed it outside the UL
bstiles00
@bstiles00
Jan 25 2017 22:59
I'm working on the "Build a Tribute Page" FCC challenge. I've finished my page, but I don't understand what this line in Quincy's example page actually does: <div class="col-xs-12">
I took the line out and reran the code and nothing I can see changes.
Janina Pohorecki
@janepohorecka
Jan 25 2017 23:03
@jdtdesigns So I am experimenting with it. I updated the code so that the nav icon appeared within the UL and also outside of it. Take a look at how it appears twice: https://janepohorecka.github.io/Test-Northwest/
JD Tadlock
@jdtdesigns
Jan 25 2017 23:04
@janepohorecka Here's an example of how to layout your header with just regular css using flexbox. http://jsbin.com/futuhec/edit?html,css,output
The nav should be absolute to fill the browser width
and you should use top and left properties to align it ;)
John Nunns
@johnnunns
Jan 25 2017 23:08
alright, another wall haha. small one though
var obj = {
  key: [2, 1, 5]
};



function getSmallestElementAtProperty(obj, key) {
  if(!obj[key] || !Array.isArray(obj[key]) || !obj[key].length){
      return undefined;
  }
  return obj[key].map(function(min){
      return Math.min(...obj[key])
  })


}

getSmallestElementAtProperty(obj, 'key')
I'm returning [1, 1, 1]
when I only want to return 1
sorry, i think i see the problem is using map
Janina Pohorecki
@janepohorecka
Jan 25 2017 23:12
@jdtdesigns Thank you for doing that for me. I am still confused as heck but I am sure I will figure it out.
CamperBot
@camperbot
Jan 25 2017 23:12
janepohorecka sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: janepohorecka already gave jdtdesigns points
John Nunns
@johnnunns
Jan 25 2017 23:12
yean no need for the high order function at all
JD Tadlock
@jdtdesigns
Jan 25 2017 23:19
@johnnunns they're not always needed ;)
Janina Pohorecki
@janepohorecka
Jan 25 2017 23:22
@jdtdesigns Where would be the best place to put my UL within that code? Does this matter?
Sorry for taking your time with my questions :/
John Nunns
@johnnunns
Jan 25 2017 23:24
var obj = {
  key: [1, 2, 3]
};


function getAllButLastElementOfProperty(obj, key) {
  if(!obj[key] || !Array.isArray(obj[key]) || !obj[key].length) {
      return [];
  }
 for(var i = 0; i<obj[key].length-1; i++){
     return i
 }
}

getAllButLastElementOfProperty(obj, 'key')
trying to return everything but the last element in an array
but right now I'm returning 0
John Nunns
@johnnunns
Jan 25 2017 23:32
nvm have found .slice() method
JD Tadlock
@jdtdesigns
Jan 25 2017 23:34
John Nunns
@johnnunns
Jan 25 2017 23:49
var obj = {
  a: 8,
  b: 2,
  c: 'montana'
}


function removeNumbersLessThan(num, obj) {
return obj.filter(function(number){
    return number >= num;
})
}


removeNumbersLessThan(5, obj)
themixedcoder
@themixedcoder
Jan 25 2017 23:49
Your h1 element should have the class pink-text.
Your <style> should have a pink-text CSS class with its color set to pink.
Your h1 element should be pink.
John Nunns
@johnnunns
Jan 25 2017 23:49
any ideas why I'm getting obj.filter is not a function?
themixedcoder
@themixedcoder
Jan 25 2017 23:49

<style>
pink-text {
color:pink;
}
body {
background-color: black;
font-family: Monospace;
color: green;
}
</style>

<h1 class=pink-text>Hello World!</h1>

why is it not prioritizing pink over green
requirements are Your h1 element should have the class pink-text.
Your <style> should have a pink-text CSS class with its color set to pink.
Your h1 element should be pink.
Janina Pohorecki
@janepohorecka
Jan 25 2017 23:52
@jdtdesigns OMG! Thank you!! I am going to study this code and try to emulate it so that I can learn it.
CamperBot
@camperbot
Jan 25 2017 23:52
janepohorecka sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: janepohorecka already gave jdtdesigns points
JD Tadlock
@jdtdesigns
Jan 25 2017 23:55
@janepohorecka welcome ;)
themixedcoder
@themixedcoder
Jan 25 2017 23:56
huh how do i put both blue and pink text in the class of a h1 element while still getting the h1 to be blue

<style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}

</style>

<h1 class="pink-text" class="blue-text">Hello World!</h1>

Your h1 element should have the class pink-text.
Your h1 element should have the class blue-text.
Both blue-text and pink-text should belong to the same h1 element.
Your h1 element should be blue. what am i doing wrong
Moisés Man
@moigithub
Jan 25 2017 23:58
use only 1 class attribute.. put all classes on the same set of quotes
class = "one two boo" @themixedcoder
and play with the order...
Walid Ashri
@walidashri
Jan 25 2017 23:58
@themixedcoder to add two classes class=' class1 class2'
themixedcoder
@themixedcoder
Jan 25 2017 23:59
hmm
and how do i make it only use one class
ie the blue text