These are chat archives for FreeCodeCamp/HelpFrontEnd

21st
Apr 2016
Reginald Davis
@madblkman
Apr 21 2016 00:18
On the wikipedia search viewer does anyone have an idea on how to add a link to the divs? I'm struggling with this last part of the project. Here's my pen...
http://codepen.io/madblkman/full/VadWoJ/
vínαч puppαl
@vinaypuppal
Apr 21 2016 00:20
@LanesGood i did not understand you layout in that pen , but if u want center an elemnet vertially do this
#parent-div{
    position: relative;
}
// parent need to have some height 

#child-div{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

//and both vertically and horizontally 

#child-div{
    position: absolute;
    top: 50%;
    left: 50%
    transform: translate(-50%,-50%);
}
Frank XC
@tenkdayz
Apr 21 2016 00:21
@madblkman use this url https://en.wikipedia.org/wiki/
@madblkman and += the query.title to it
Reginald Davis
@madblkman
Apr 21 2016 00:24
@tenkdayz I'm going to throw it in my map function and see if that works.
Frank XC
@tenkdayz
Apr 21 2016 00:25
@madblkman yeah it worked..
Reginald Davis
@madblkman
Apr 21 2016 00:27
Where did you add the link? @tenkdayz because I'm putting it in my map function and it's not working
Frank XC
@tenkdayz
Apr 21 2016 00:28
@madblkman
$('<p><a href="https://en.wikipedia.org/wiki/'+query.title+'">' + query.snippet + '...' + '</a></p>').appendTo(box);
Reginald Davis
@madblkman
Apr 21 2016 00:33
AHHHHHHHHHHHH!!!!!!!!!!! @tenkdayz Thanks a lot for that!! I hate that I completely overlooked that simple solution
CamperBot
@camperbot
Apr 21 2016 00:33
madblkman sends brownie points to @tenkdayz :sparkles: :thumbsup: :sparkles:
:star: 428 | @tenkdayz | http://www.freecodecamp.com/tenkdayz
Frank XC
@tenkdayz
Apr 21 2016 00:34
@madblkman np! it happens to all of us.
Zachary
@mczstudios
Apr 21 2016 00:36
Help
CamperBot
@camperbot
Apr 21 2016 00:36

Hi, I'm CamperBot! I can help you in this chatroom :smile:

Basic Commands:

  • find TOPIC find all entries about topic. ex: find js
  • wiki TOPIC show contents of topic page
  • thanks @username send brownie points to another user
  • about @username shows info on that user
  • Algorithm BONFIRENAME info on a Algorithm

:speech_balloon: meet CamperBot in this room!

:pencil: read more about camperbot on the FCC Wiki

Zachary
@mczstudios
Apr 21 2016 00:36
Hey, anyone want to rate my website design?
Frank XC
@tenkdayz
Apr 21 2016 00:39
@mczstudios post the url
Zachary
@mczstudios
Apr 21 2016 00:40
Ok
Frank XC
@tenkdayz
Apr 21 2016 00:41
@mczstudios look at it using firefox margin is way of for some reason
Zachary
@mczstudios
Apr 21 2016 00:42
Oh you mean not centered?
I dunno how to center things w/o using a thing mainly built for chroem
Frank XC
@tenkdayz
Apr 21 2016 00:46
@mczstudios aside from that look good.. guessing youre not done with the links
Zachary
@mczstudios
Apr 21 2016 00:46
nope.
Do you know how I can center vertically?
Frank XC
@tenkdayz
Apr 21 2016 00:51
@mczstudios it could be different reason with it isn't..
Zachary
@mczstudios
Apr 21 2016 00:51
It is because I'm using flexbox
Not yet supported by FireFox
Frank XC
@tenkdayz
Apr 21 2016 00:52
@mczstudios not too familiar with bootstrap..
Zachary
@mczstudios
Apr 21 2016 00:52
Not using Bootstrap to center
xD
I'm using flexbox
Reginald Davis
@madblkman
Apr 21 2016 00:53
@mczstudios it looks good to me
What were you trying to center
?
Zachary
@mczstudios
Apr 21 2016 00:53
It centers fine in Android, Apple, and Chrome
but not in Firefox or IE
Reginald Davis?
Frank XC
@tenkdayz
Apr 21 2016 00:54
@mczstudios oh well that shows you how unfamiliar I'm with it.. I just saw the btn classes and I just walk away if anyone asks for help :fearful:
Zachary
@mczstudios
Apr 21 2016 00:54
xD
Frank?
Do you know how to add like -webkit-flex and -moz-flex at the same time?
Reginald Davis
@madblkman
Apr 21 2016 00:56
@mczstudios I'm on chrome and it looks centered
Zachary
@mczstudios
Apr 21 2016 00:56
Reginald?
How can I have like -moz-flex and -webkit-flex in the same thing
Reginald Davis
@madblkman
Apr 21 2016 00:57
.a {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background: -webkit-linear-gradient(red, green);
  background: linear-gradient(red, green);
}
Zachary
@mczstudios
Apr 21 2016 00:58
ah k thanks.
Reginald Davis
@madblkman
Apr 21 2016 00:58
@mczstudios it would look something like that...
Zachary
@mczstudios
Apr 21 2016 00:58
Thats what I thought
Reginald Davis
@madblkman
Apr 21 2016 00:58
In fact...here's a website I like to use that automatically does it for you
Zachary
@mczstudios
Apr 21 2016 00:59
Thanks, fixed
Reginald Davis
@madblkman
Apr 21 2016 01:00
Nice...
Zachary
@mczstudios
Apr 21 2016 01:00
Reginald?
Do you want to join our team? We're working on designing a coding language from scratch
Reginald Davis
@madblkman
Apr 21 2016 01:01
Sounds fun...I'm down
Zachary
@mczstudios
Apr 21 2016 01:01
mk.
I'll invite you to our github group
Reginald Davis
@madblkman
Apr 21 2016 01:01
Cool
Zachary
@mczstudios
Apr 21 2016 01:01
Wait can't rn because the owner isn't on but will do later
Reginald Davis
@madblkman
Apr 21 2016 01:02
No problem
Zachary
@mczstudios
Apr 21 2016 01:11
Reginald?
Should I have the background image or no?
Frank XC
@tenkdayz
Apr 21 2016 01:19
@mczstudios he cant hear you if you dont use @username
rphares
@rphares
Apr 21 2016 01:19
he knows that, check sidebar... shrug @tenkdayz
Qstreet
@Qstreet
Apr 21 2016 01:31
help
CamperBot
@camperbot
Apr 21 2016 01:31

Hi, I'm CamperBot! I can help you in this chatroom :smile:

Basic Commands:

  • find TOPIC find all entries about topic. ex: find js
  • wiki TOPIC show contents of topic page
  • thanks @username send brownie points to another user
  • about @username shows info on that user
  • Algorithm BONFIRENAME info on a Algorithm

:speech_balloon: meet CamperBot in this room!

:pencil: read more about camperbot on the FCC Wiki

Qstreet
@Qstreet
Apr 21 2016 01:33
wiki Weather
CamperBot
@camperbot
Apr 21 2016 01:33
no wiki entry for: weather
Qstreet
@Qstreet
Apr 21 2016 01:34
wiki Show the Local Weather
CamperBot
@camperbot
Apr 21 2016 01:34
no wiki entry for: show the local weather
Qstreet
@Qstreet
Apr 21 2016 01:34
algorithm
Algorithm BONFIRENAME
rphares
@rphares
Apr 21 2016 01:34
i dont think there is one for that (that i have been).... there is a link for geolocation, will that help? https://github.com/freecodecamp/freecodecamp/wiki/challenge-get-geo-location-data @Qstreet
Qstreet
@Qstreet
Apr 21 2016 01:36
@rphares I am trying to follow the help menu and making a mess of it
rphares
@rphares
Apr 21 2016 01:36
this is the room you are sent to for project help, you are in the right place,
but i have never seen anyone successfully pull up a wiki for that project, dont know if there is one--
(that doesn't mean there isn't, m a newbie and not an authority :blush: )
You can ask questions to the campers here (not me, newbie)
or check out related links, perhaps?
Qstreet
@Qstreet
Apr 21 2016 01:37
I don't know either, I guess what I am looking for is a list of wikis or some kind of directory. or is the only solution to just keep guess-type and maybe I stumble over it?
rphares
@rphares
Apr 21 2016 01:38
for the projects? no example code--
once you get there, research google, try, research, google, ask, repeat :blush:
Qstreet
@Qstreet
Apr 21 2016 01:39
as for the "Algorithm" (must be upper case A?) do i type in Algo.. and then if-else of some other standard construct?
Algorithm if-else
rphares
@rphares
Apr 21 2016 01:39
oh, how to use bot?
example:
help exact change
CamperBot
@camperbot
Apr 21 2016 01:39

:point_right: algorithm exact change [wiki]

Problem Explanation:

  • You have to create a program that will handle when the register does not have
    enough cash or will have no cash after the transaction. Other than that it
    needs to return an array of the change in the form of an array, so that will
    be a 2D array.
:pencil: read more about algorithm exact change on the FCC Wiki
rphares
@rphares
Apr 21 2016 01:40
help/wiki/explain + name
Qstreet
@Qstreet
Apr 21 2016 01:40
what is "name"? you? or some topic?
Bruce Young
@mutantspore
Apr 21 2016 01:40
explain schwarzschild radius
CamperBot
@camperbot
Apr 21 2016 01:40
no wiki entry for: schwarzschild radius
rphares
@rphares
Apr 21 2016 01:40
name of the challenge,
Bruce Young
@mutantspore
Apr 21 2016 01:41
lol
rphares
@rphares
Apr 21 2016 01:41
example two:
Stephen Leung
@stephenjleung
Apr 21 2016 01:41
hey folks. just started my simon project today and i'm stuck with SVG stacking issues. the buttons light up when mouse hover, but do not when i un-comment lines 20-22 (adding a center piece). How do i add a black circle on top and maintain working buttons? Thanks! http://codepen.io/stephenjleung/pen/XdYedW
rphares
@rphares
Apr 21 2016 01:41
wiki smallest common multiple
CamperBot
@camperbot
Apr 21 2016 01:41

:point_right: algorithm smallest common multiple [wiki]

Explanation:

The smallest common multiple between two numbers is the smallest number that
both numbers can divide into. This concept can be extended to more than two
numbers as well.

We can first start with just finding the smallest common multiple between two
numbers. Naively, you can start writing out multiple of each number until you
write a multiple that exists from both numbers.

An example would be the numbers 3 and 4. The multiples of 3 are 3, 6, 9, 12, 15, 18, ... and the multiples of 4 are 4, 8, 12, 16, 20, .... The
first smallest number we run into in both lists is 12 so this is the smallest
common multiple between 3 and 4.

This problem can be confusing because most people look for the smallest common
multiple of just the two numbers but forget the keyword range. However, this
means that if you are given [1,5], then you have to check for the smallest
common multiple for all the numbers [1,2,3,4,5] that is evenly divisible by
all of them.

:pencil: read more about algorithm smallest common multiple on the FCC Wiki

rphares
@rphares
Apr 21 2016 01:42
:point_up: April 20, 2016 6:39 PM :point_up: April 20, 2016 6:41 PM in those two examples, i typed help NAME OF ALGORITHM CHALLENGE and wiki NAME OF ALGORITHM CHALLENGE @Qstreet
Qstreet
@Qstreet
Apr 21 2016 01:42
ok, thanks. so if i get this right, to invoke bot or camperbot, i preceed it with 'wiki' ? is it all the same thing?
wiki weather
CamperBot
@camperbot
Apr 21 2016 01:43
no wiki entry for: weather
rphares
@rphares
Apr 21 2016 01:43
close, the results are slightly different (and find will also work, but again, slightly different results)
but yes-- that , what you just did, would work
if there was a wiki page for weather
which, i have never seen anyone find, thats how this convo started... the closest one i know of is the geolocation link i sent you :blush:
for the algorithms, i think there is a page for each one, so wiki + name will work fine :)
Qstreet
@Qstreet
Apr 21 2016 01:44
got it. thanks for your help. I'll head over to that wiki page to see what I can learn.
rphares
@rphares
Apr 21 2016 01:45
Anytime! Happy coding~
Qstreet
@Qstreet
Apr 21 2016 01:45
help
CamperBot
@camperbot
Apr 21 2016 01:45

Hi, I'm CamperBot! I can help you in this chatroom :smile:

Basic Commands:

  • find TOPIC find all entries about topic. ex: find js
  • wiki TOPIC show contents of topic page
  • thanks @username send brownie points to another user
  • about @username shows info on that user
  • Algorithm BONFIRENAME info on a Algorithm

:speech_balloon: meet CamperBot in this room!

:pencil: read more about camperbot on the FCC Wiki

Stephen Leung
@stephenjleung
Apr 21 2016 01:49
anyone avail to assist with my Simon game? having SVG stacking issues.
guess i'll have dinner and try again later. ty chat!
Ken Haduch
@khaduch
Apr 21 2016 02:16
@stephenjleung - I'm not sure what is going on, I haven't done that much with any SVG, but it looks like your "center-box" covers the entire outline of the circle? I don't know how that is impacting the hover recognition? Is there a way to make that smaller? Or even make it a circle?
Nathan
@natertot12
Apr 21 2016 02:37
I have two problems that I can't figure out. The first is after someone wins if I readjust the screen size the boxes overlap. The second is sometimes after I click a box the computer doesn't animate its play. Any help would be appreciated. http://codepen.io/natertot12/pen/PZOmRg?editors=0010
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 02:46
Updated portfolio - if you guys could check this and give feedback I'd really appreciate it - http://andrewghc.github.io/
Nathan
@natertot12
Apr 21 2016 02:48
@AndrewGHC I would suggest you delay the intro animation until the image loads, and you menu buttons don't work, but It looks great
rphares
@rphares
Apr 21 2016 02:49
Hmm, @AndrewGHC , your nav doesn't work for me (safari). Otherwise, nice~
Paul Borawski
@iAmNawa
Apr 21 2016 02:49
@rphares Hello! How is your day?
rphares
@rphares
Apr 21 2016 02:50
Hiya, @iAmNawa ! Weird seeing you here, lol. Day is going well, thanks! ( if utterly unproductive) . You?
CamperBot
@camperbot
Apr 21 2016 02:50
rphares sends brownie points to @iamnawa :sparkles: :thumbsup: :sparkles:
:star: 487 | @iamnawa | http://www.freecodecamp.com/iamnawa
Paul Borawski
@iAmNawa
Apr 21 2016 02:51
@rphares Pretty unproductive as well lol. Thanks for asking
CamperBot
@camperbot
Apr 21 2016 02:51
iamnawa sends brownie points to @rphares :sparkles: :thumbsup: :sparkles:
:star: 4061 | @rphares | http://www.freecodecamp.com/rphares
Jeff
@adzam5
Apr 21 2016 02:51
@AndrewGHC Very nice!
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 02:52
@natertot12 @rphares @adzam5 Aye navbar seems to have gone to the wayside with my last commit and Safari doesn't play well. Thanks guys
CamperBot
@camperbot
Apr 21 2016 02:52
andrewghc sends brownie points to @natertot12 and @rphares and @adzam5 :sparkles: :thumbsup: :sparkles:
:star: 438 | @natertot12 | http://www.freecodecamp.com/natertot12
:star: 4062 | @rphares | http://www.freecodecamp.com/rphares
:star: 418 | @adzam5 | http://www.freecodecamp.com/adzam5
Andrew Charlebois
@andrewchar
Apr 21 2016 02:56
@AndrewGHC coming along nicely. couple things - 1- scroll hijacking... sad face. 2- Maybe you could add an on hover over effect to your nav buttons to indicate better that im hovering over it, right now all its got is the cursor, maybe add something there, doesnt have to be much. 3- As soon as you scroll the page down, your nav text turns black, you could use a tool such as waypoints.js to make that transition a little cleaner, make it change once it hits the the next page, instead of at the start of your hero. Maybe do something like background-color on your nav for once your past the hero image to make it a bit cleaner as well. 4- Font size could be increased all around with your layout since there is not much content per page. 5- There isnt really anything for color going on, pick a color that maybe matches your hero image and use it throughout your site, give it a little flavor.
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 03:00
@andrewchar Thanks for the feedback. Addressing points, 1. it uses fullpage.js so scroll hijacking is part of it. 2. - just rushed a commit to fix that one, navbar was messed up. 3. Think that's fixed with last commit, my bad! 4. Good point, it's as it is to make it responsive, but I could use media queries. 5. The theme is something sorely lacking, will definitely look into consistency. Finally I'll say that your portfolio kind of inspired this so thanks for your effort
CamperBot
@camperbot
Apr 21 2016 03:00
andrewghc sends brownie points to @andrewchar :sparkles: :thumbsup: :sparkles:
:star: 407 | @andrewchar | http://www.freecodecamp.com/andrewchar
Andrew Charlebois
@andrewchar
Apr 21 2016 03:01
@AndrewGHC my portfolio? you're to kind
i am seeking ideas right now to make something else. having trouble finding inspiration
im kind of digging making a mock-up for a bakery website lol
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 03:02
Did indeed, it's a very nice layout. Only thing I'd say is that your form has no validation - other than that it's very clean and reads very well
I'm not sure if it's obvious that on the portfolio slide of my page you can scroll left and right
Andrew Charlebois
@andrewchar
Apr 21 2016 03:04
@AndrewGHC yes you are correct there. i used formspree.io for the form since it was on github pages. But now i have it actually hosted. set it all up 2 nights ago so im going to learn how do all that now
@AndrewGHC oh, i wasn't aware.
oh wait, yes i was lol my bad
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 03:05
@andrewchar All good, I looked at your source code pretty intensely for ideas. I used formspree too for mine, hope you don't mind the imitation ;). Your page is rather good.
Andrew Charlebois
@andrewchar
Apr 21 2016 03:06
@AndrewGHC Not at all, i am actually really gratified that someone is
I am only a noobie, 4 months into coding.
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 03:07
Appears you're dedicated and have come along well
Definitely a solid effort for one of the beginning challenges
Andrew Charlebois
@andrewchar
Apr 21 2016 03:09
that was my second go at it
my re-design i guess
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 03:11
Looks very decent for a first shot though, my own was a fork of the fcc repo they no longer provide (I think)
You've a good eye for front end
Andrew Charlebois
@andrewchar
Apr 21 2016 03:13
maybe its just the carpenter in me, detail is my thing :P
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 03:13
Aye that's a good way to sell it
Andrew Charlebois
@andrewchar
Apr 21 2016 03:13
this is my attempt at a career switch
i just started applying to jobs
junior level or internship mind you
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 03:15
How's it going? Based on the fcc reddit I've seen people get in with less
Andrew Charlebois
@andrewchar
Apr 21 2016 03:16
yeah that's what ive been thinking
nothing back yet but ive been applying for less then 48 hours
once i got my new portfolio up and running i figured i would start
seeing the feedback i got from it, i thought i would start applying
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 03:17
Wouldn't fret, do think your comment on the carpenter & design angle is a good one
What prompted you to make the switch?
Andrew Charlebois
@andrewchar
Apr 21 2016 03:19
i got layed off for the winter. and one day painting my daughters soon i was listening to CBC radio and i heard this stuff about learning to code online. I became interested and searched it all up. Eventually found fcc and 4 months later here i am
discovered i actually really love coding i guess
ive been coding everyday (almost) since
while my daughter is at school or after she goes to bed, youll find me coding lol
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 03:21
@andrewchar Think that's really cool, more so as you've clearly an aptitude for it. Going for front end UI stuff?
Andrew Charlebois
@andrewchar
Apr 21 2016 03:22
yeah front-end dev. I love being able to see what im building as i build it and watch it progress into something beautiful
theres just something magic in it lol
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 03:22
You've also some great motivation stories to tell at an interview, both that about your daughter and the eye for detail carpenting schtick
Andrew Charlebois
@andrewchar
Apr 21 2016 03:23
yeah i think its something i can bring up, how i got into this gig
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 03:23
After hours of stackoverflow there's definitely some gratification in it
No doubt
Andrew Charlebois
@andrewchar
Apr 21 2016 03:24
thats why i started my about me page with "carpenter turned front end dev"
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 03:25
I'd push the angle you mentioned, about the lifelong eye for design and don't let them think it's an arbitrary switch from a trade
Bruce Young
@mutantspore
Apr 21 2016 03:27
@andrewchar .. I’ve had 2 ex-car mechanics work for me in the past
one as a network guy and the other as a full stack developer
Andrew Charlebois
@andrewchar
Apr 21 2016 03:28
from trades to development wooho!
Joshua Abu
@Absolutestunna
Apr 21 2016 03:38
@Absolutestunna
has anyone used materializecss as opposed to bootstrap? im having problems with the media query
thanks in advance
CamperBot
@camperbot
Apr 21 2016 03:38
sorry absolutestunna, you can't send brownie points to yourself! :sparkles: :sparkles:
RJsauce
@RJsauce
Apr 21 2016 04:13
Hi all! Why does my page have the ability to scroll left and right? Also how do I make the inset shadow for the portfolio only appear at the top and not on all 4 sides?
http://codepen.io/rjsauce/pen/MyXRwr?editors=1100
Stanley
@stanleyyylau
Apr 21 2016 04:28
i donno can't figure out this
why is the order of channels get messed up
my console shows the order of the ajax request sent is correct, but when data returns for input, the order gets messed up
can someone help take a look?
Greg D
@mosaic-greg
Apr 21 2016 04:38
@RJsauce i scrolled right and inspected the element, found an offset of -15: might have something to do with it
Irfan
@naprirfan
Apr 21 2016 04:51
@stanleyyylau It's because you called ajax. It's asynchronous, so it won't wait for one request to finish before another
@stanleyyylau that's why the order get messed up
Greg D
@mosaic-greg
Apr 21 2016 04:52
@RJsauce i changed the .Pbg css to position: relative;
now it doesnt need to scroll left & right
maybe absolute made it scroll
Kameron Robinson
@RobinsonKameron
Apr 21 2016 04:56
@stanleyyylau you need to make it synchronous.
Stanley
@stanleyyylau
Apr 21 2016 05:25
@RobinsonKameron i change all ajax request to synchronous
but still messed up
everything is all right except the last two, which one is account not exist, another is account not found
i change the code to synchronous, but look at the console.
i don't know why it gets me " watch out, this is 422, account closed, i= 12 count=11"
Randy Goldsmith
@Dueldrawer8
Apr 21 2016 05:29
bootstrap is used for responsive design correct? what else can you use or what is most popular for responsive design?
Stanley
@stanleyyylau
Apr 21 2016 05:29
both i = 12 count=11
even thought i set count=i in the for loop
still give me this
Stanley
@stanleyyylau
Apr 21 2016 05:36
i try to use a object to store the relavent ajax response, that might work
Anthony
@iDrinkTooMuchCoffee
Apr 21 2016 06:08
This message was deleted
Stanley
@stanleyyylau
Apr 21 2016 07:07
no way
i updated my code
now i store all the related info ajax returns to a global object, i want to use it to append content later on
but i can't access the content inside that global object "resultObject"
can someone help
Samuel Cupidon
@Zerazera
Apr 21 2016 07:24
@stanleyyylau AJAX is asynchronous. A global object is a bad idea because you cannot be sure when it has been updated. It's best to use a callback function to process the results once they are returned.
Stanley
@stanleyyylau
Apr 21 2016 07:25
@Zerazera i set it to synchronous
i try to use a call backcall function, the but order gets messed up, and the output don't seem to be right
it's complex, i'm been working on this project for a few days now
Chad Kreutzer
@ChadKreutzer
Apr 21 2016 07:44
Is it possible to tie navbar buttons to tab panes? I've tried several ways, thus far to no avail.
alpox
@alpox
Apr 21 2016 07:45

@stanleyyylau

for (var ii = 0; ii < channelArr.length; ii++) {
    resultObject.append(resultObject.logo[ii], resultObject.url[ii], resultObject.namee[ii], resultObject.statuss[ii]);
  }

this code is still at the wrong place. It has to be called on the end of getAllnotStreaming or getAllnowStreaming

@ChadKreutzer You mean that you make tabs with them instead of usual links?
@ChadKreutzer You can set the href to #and set click events in javascript to display/hide different panes
@ChadKreutzer I made something like that (not with the navbar though) here:
http://codepen.io/alpox/pen/EKKRyd?editors=0010
$('.tab-button').click(function() {
    let $this = $(this)
    let tabId = $this.data('tab-id')
    $('.tab-button').removeClass('active')
    $this.addClass('active')
    displayOrdered(tabId)
  })
Stanley
@stanleyyylau
Apr 21 2016 07:48
@alpox ah, but that will result in the append function call for 11 times because of the loop
96street
@96street
Apr 21 2016 07:48
how come border-right isn't working? http://codepen.io/anon/pen/oxyrzq
Chad Kreutzer
@ChadKreutzer
Apr 21 2016 07:48
@alpox as in I have a working tab system that I want to make invisible below a certain viewport size and make a navbar visible, but while the nav-tabs are working fin I havn't been able to get the navbar to work.
I'll see if I can use javascript events to do it.
alpox
@alpox
Apr 21 2016 07:50
@ChadKreutzer In this case i would go with a media query
in css
Chad Kreutzer
@ChadKreutzer
Apr 21 2016 07:51
yeah. I did a media query for the hiding and making visible. but the navbar buttons aren't working for the tabs. here, lemme paste it. (it's not in codepen)
alpox
@alpox
Apr 21 2016 07:52
Okay, i have to see that otherwise i don't get the picture :D
@stanleyyylau Well then take the loop out because it loops over the same items. Just use the append
Chad Kreutzer
@ChadKreutzer
Apr 21 2016 07:53
<div id="myNavbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#about"  role="button">About</a>
        <li><a href="#services" role="button">Services</a></li>
        <li><a href="#pictures" role="button">Pictures</a></li>
        <li><a href="#contact" role="button">Contact</a></li>
        <li><a href="#specials" role="button">Specials!</a></li>
      </ul>
    </div>
... other code...
<ul id="navTabs" class="nav nav-tabs">
          <li role="presentation" class="active"><a data-toggle="tab" href="#about">About</a></li>

          <li role="presentation"><a data-toggle="tab" href="#services">Services</a></li>

          <li role="presentation"><a data-toggle="tab" href="#pictures">Pictures</a></li>
          <li role="presentation"><a data-toggle="tab" href="#contact">Contact</a></li>
          <li role="presentation"><a data-toggle="tab" href="#specials">Specials!</a></li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane fade in active" id="about">
            <h2>About</h2>
            <img id="puppySmile" src="media/puppy_smile.jpg" class="img-responsive pull-right">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
            </p>
          </div>
          <div class="tab-pane fade" id="services">
            <h2>Services</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
            </p>
          </div>
Stanley
@stanleyyylau
Apr 21 2016 07:53
@alpox thanks, i'll try
CamperBot
@camperbot
Apr 21 2016 07:53
stanleyyylau sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star: 571 | @alpox | http://www.freecodecamp.com/alpox
Chad Kreutzer
@ChadKreutzer
Apr 21 2016 07:53
I only pasted the first couple tabs, but you can get the idea.
like I said, the navTab buttons work just fine. it's the myNavbar ones that don't seem to want to work.
alpox
@alpox
Apr 21 2016 07:56
@96street Add this to the img css:
box-sizing: border-box;
@ChadKreutzer What exactly doesnt work on it again? that it scrolls to the right part?
<--- confused :D
@ChadKreutzer Or should the navbar be working like the navTab?
@96street Your problem was, that if you set the width: 100% that makes the image really 100% of the parent element. But then you add also a border with 10px which takes up more space so you have 100% + 20px for the full width and that overflows the container.
box-sizing: border-box; makes the width be calculated together with its border
Chad Kreutzer
@ChadKreutzer
Apr 21 2016 08:00
@alpox sort of. yeah. when I click on the buttons in the navbar the only one that works is the one for the currently visible tab. the rest of them do nothing. In theory what I want it to do is act like the navTab such that when I click on each it makes the appropriate tab visibile and, if necessary, scroll there.
alpox
@alpox
Apr 21 2016 08:01
@ChadKreutzer Then you have to tell Bootstrap that these are tab buttons and not usual buttons :-)
@ChadKreutzer just try to set the specific types you also used for the navTab
Chad Kreutzer
@ChadKreutzer
Apr 21 2016 08:01
hmm. I'll try that. one sec.
alpox
@alpox
Apr 21 2016 08:02
@ChadKreutzer Hm it seems that i don't even get the navbar visible :-/
Chad Kreutzer
@ChadKreutzer
Apr 21 2016 08:02
you gotta squeeze it. around 555px the tabs disappear and the navbar appears.
I thought that would make navigation easier on phones, rather than having to scroll past the big jumbotron to see the tabs
alpox
@alpox
Apr 21 2016 08:04
@ChadKreutzer Yeah. Well you could also make them expand on small screen (if you want to) that they are not in tabs anymore but get all their own vertical space
96street
@96street
Apr 21 2016 08:04
@alpox perfect, thanks
CamperBot
@camperbot
Apr 21 2016 08:04
96street sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star: 572 | @alpox | http://www.freecodecamp.com/alpox
Chad Kreutzer
@ChadKreutzer
Apr 21 2016 08:08
@alpox thanks! progress. now it makes the appropriate tab visible, but it doesn't scroll to it. and I'll have to talk it into being vertical. but telling it to be a nav-tab bar worked. and it still collapses from the hamburgur.
What do you think of the rest of the page? It's for a friend's business. I'm doing it for free for practice. (obviously it isn't quite done)
alpox
@alpox
Apr 21 2016 08:11
@ChadKreutzer That is the behaviour i expected ^^
Chad Kreutzer
@ChadKreutzer
Apr 21 2016 08:12
@alpox that makes sense.
alpox
@alpox
Apr 21 2016 08:12
@ChadKreutzer I just talk for myself when about design, but i would make the header 1. take full height (height: 100vh;) and without white border around.
And i don't really like the colors of tabs and fonts used for the titles. These makes it look "slumpy" (if that term exists)
But as i said, thats only my view :-) better ask others then too ^^
I'm not a designer or something :-)
Chad Kreutzer
@ChadKreutzer
Apr 21 2016 08:17
@alpox I'll definitely see about trying other things. the colors are based things that look good with the logo.
kirbyedy
@kirbyedy
Apr 21 2016 08:17
the orange you used does not go with the rest of the colors in their logo, which btw needs more photoshoping
tabs are not really readable
usually jumbotron is put to cover the browser from edge to edge
also I would push the location div down to match the left div
and I think you said you are a photographer, so make sure you shoot some nice photos, because they are important
Chad Kreutzer
@ChadKreutzer
Apr 21 2016 08:21
all good notes. I used paletton for the colors. just basing it off of the colors in the logo (specifically the tie)
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 08:21
Asked for feedback earlier and I've implemented the feedback given, if anyone could take a look at this portfolio and offer more feedback I'd appreciate it! http://andrewghc.github.io
Chad Kreutzer
@ChadKreutzer
Apr 21 2016 08:21
yeah, I have a bunch of pictures that I'm gonna be adding in, I'm just trying to get the rest ironed out first.
@kirbyedy can you be a bit more specific about the tabs being not easily readable? the rest of your points I get but I'm not really seeing that one (maybe I'm too close to it)
@kirbyedy @alpox believe it or not, that logo is much improved from the one she gave me. I'm guessing you are meaning the little bits of white still visible around it? I can fix that.
maverickvector
@maverickvector
Apr 21 2016 08:25
@AndrewGHC So far so good. Your porfolio is broken, the image bleeds into the contact block. The color change for the header is too early and turns to unreadable blank while over the image.
alpox
@alpox
Apr 21 2016 08:25
@ChadKreutzer Yup
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 08:26
@maverickvector Are you using Safari?
maverickvector
@maverickvector
Apr 21 2016 08:26
@AndrewGHC the mobile header is readable when opened because the font color is white on grey
firefox
I am running on a PC and the only available Safari is 5 which is way past it's expiration date.
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 08:27
That's odd, doesn't show on my pc, thanks though I'll look into it @maverickvector
CamperBot
@camperbot
Apr 21 2016 08:27
andrewghc sends brownie points to @maverickvector :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for maverickvector
kirbyedy
@kirbyedy
Apr 21 2016 08:27
@ChadKreutzer light blue letters on the tabs and light yellow
more contrast would be better
so either darker letters, or different background
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 08:28
Any other word on this one? Working in your browser etc http://andrewghc.github.io
Chad Kreutzer
@ChadKreutzer
Apr 21 2016 08:29
@kirbyedy thanks.
CamperBot
@camperbot
Apr 21 2016 08:29
chadkreutzer sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
kirbyedy
@kirbyedy
Apr 21 2016 08:29
@ChadKreutzer yes, to clean the logo a bit, also when you select the logo in photoshop choose contract by 1px, and erase, that will remove the white pixels around it
CamperBot
@camperbot
Apr 21 2016 08:29
:star: 903 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
kirbyedy
@kirbyedy
Apr 21 2016 08:29
basically the best would be to redraw it, and make it vector
30minute job
maverickvector
@maverickvector
Apr 21 2016 08:30
@AndrewGHC the porfolio block is fixed, mobile menu is still an issue.
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 08:30
@maverickvector Fixed as in you can't scroll left or right?
Chad Kreutzer
@ChadKreutzer
Apr 21 2016 08:30
@kirbyedy I haven't done anything with vector graphics. I'll have to find some tutorials on it, but that is a good skill to have.
maverickvector
@maverickvector
Apr 21 2016 08:31
@AndrewGHC Fixed as in, the image is no longer bleeding into the contact area. I can use the keys just fine.
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 08:33
@maverickvector Haven't changed anything, might be that the images are too large and the js hadn't fired yet
maverickvector
@maverickvector
Apr 21 2016 08:33
I was referring to: http://andrewghc.github.io which does not have the image problem, the previous link does. Now neither do. So work on the font colors for the mobile block or whatever you were working on before.
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 08:35
Font colours in what sense?
Where and what are you seeing?
maverickvector
@maverickvector
Apr 21 2016 08:36
trigger the mobile menu, open and look at the font color. scroll up and down with the mobile menu open to see what I mean.
Stanley
@stanleyyylau
Apr 21 2016 08:37
@alpox thanks, it works now http://codepen.io/stanleyyylau/full/reKrdG/
CamperBot
@camperbot
Apr 21 2016 08:37
stanleyyylau sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:warning: stanleyyylau already gave alpox points
alpox
@alpox
Apr 21 2016 08:39
@stanleyyylau Np :-)
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 08:43
@maverickvector Good point, thanks I'll fix that
CamperBot
@camperbot
Apr 21 2016 08:43
andrewghc sends brownie points to @maverickvector :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for maverickvector
kirbyedy
@kirbyedy
Apr 21 2016 08:44
@ChadKreutzer I corrected your logo
Chad Kreutzer
@ChadKreutzer
Apr 21 2016 08:44
@kirbyedy oh? why thank you.
CamperBot
@camperbot
Apr 21 2016 08:44
chadkreutzer sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:warning: chadkreutzer already gave kirbyedy points
kirbyedy
@kirbyedy
Apr 21 2016 08:44
email ?
Chad Kreutzer
@ChadKreutzer
Apr 21 2016 08:47
oh and @alpox about the font in the titles. I don't like it either, but that's the font she already uses in all her non online stuff. so I can't really change it.
alpox
@alpox
Apr 21 2016 08:48
@ChadKreutzer Hmmh okay ^^
Nazim
@nazimkazim
Apr 21 2016 08:58
@All Hey guys who done "Twitch.tv" project. Did you use plain divs or table?
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 09:02
@nazimkazim Divs in my case, tables are difficult to work with
Nazim
@nazimkazim
Apr 21 2016 09:03
@AndrewGHC Thanks!
CamperBot
@camperbot
Apr 21 2016 09:03
:star: 343 | @andrewghc | http://www.freecodecamp.com/andrewghc
nazimkazim sends brownie points to @andrewghc :sparkles: :thumbsup: :sparkles:
Chad Kreutzer
@ChadKreutzer
Apr 21 2016 09:32
@kirbyedy @alpox alright. time for me to go do the work I get paid to do--for now. ;) but I've implemented some of your suggestions already. thanks again for your help. @kirbyedy how would you like to be called in my acknowledgement for the picture help?
CamperBot
@camperbot
Apr 21 2016 09:32
chadkreutzer sends brownie points to @kirbyedy and @alpox :sparkles: :thumbsup: :sparkles:
:star: 904 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
:star: 575 | @alpox | http://www.freecodecamp.com/alpox
kirbyedy
@kirbyedy
Apr 21 2016 09:33
the guy who hangs out on fcc chat :D
Chad Kreutzer
@ChadKreutzer
Apr 21 2016 09:34
will do. I'll send you the URL when it goes live.
ottomahn
@ottomahn
Apr 21 2016 10:01
anyone who has completed tic trac toe zipline?
need help
Nazim
@nazimkazim
Apr 21 2016 10:11
Hey guys please help! In my "Twitch.tv" project url is shown instead of image... What is wrong?
http://codepen.io/nazimkazim/pen/ONEYgZ
Thanks in advance
kirbyedy
@kirbyedy
Apr 21 2016 10:13
< ?
@nazimkazim you are missing <
Tran Dinh Huy
@huytr225
Apr 21 2016 10:13
Hi everyone. how can i make a ----</> or a ---</>---- (it's in a hr tag) like in this portfolio . i try to include class star-bright or star-dark in the hr tag but nothing happened. Thanks
(https://codepen.io/hallaathrad/full/vNEPpL/).
Nazim
@nazimkazim
Apr 21 2016 10:13
@kirbyedy Thanks i have fixed!
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 10:36
I'm close to finishing this and it's taken a good while, please let me know what you think in terms of how this portfolio could be improved or if you find any bugs http://andrewghc.github.io
dryyyyy
@dryyyyy
Apr 21 2016 10:51

Hello everyone, can switch statement look like this?

switch(deg) {
case deg < 90:
windDirection = 'South-East';
break;
}

Simon Jacobs
@SimonJacobsTLD
Apr 21 2016 11:42
'''
CamperBot
@camperbot
Apr 21 2016 11:42
:bulb: to format code use backticks! ``` more info
Simon Jacobs
@SimonJacobsTLD
Apr 21 2016 11:45

Hey, stuck on the Show the Local Weather challenge;

I can get my location and appid into the right (?) API source code (if I enter it in my toolbar it loads the JSON) but I can't load the JSON into my own code.

  $(document).ready(function() {

    $("#getJSON").on("click", function(){

      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {

          function roundto3(val){
            var newVal = 0.001 * Math.round(val*1000);
            return newVal;
          }

          var latC = position.coords.latitude;
          var lonC = position.coords.longitude;

          var latCround = roundto3(latC);
          var lonCround = roundto3(lonC);

          var api = 'api.openweathermap.org/data/2.5/weather?';
          var lat = 'lat='+latC;
          var lon = '&lon='+lonC; 
          var units = "&units=metric";
          var APPID = '&APPID=121035744d24da615cbe18c34be9cf83';
          var cb = "&callback=JSON_CALLBACK";

          var JSONlink = api + lat + lon + units + APPID + cb; 

          $('.location').html("lat = "+latCround+", lon = "+lonCround);

          $('.api-link').html(JSONlink);

          $.getJSON(JSONlink, function (data) {
            $('.json').html(data);
          });

      });
    };    
  });
});
Ankur sharma
@ankur1163
Apr 21 2016 11:46
function golfScore(par, strokes) {
  // Only change code below this line
  if(strokes==1){
    return "Hole-in-one!";
  }
  else if (strokes<=par-2)
    {
      return "Eagle";
    }
  else if (strokes==par-1)
  {
    return "Birdie";

  }
  else if (strokes==par){
    return "par";
  }

  else if (strokes==par+1){
    return "Bogey";
  }

  else if (strokes==par+2){
    return "Double Bogey";
  }
  else if (strokes>=par+3){
    return "Go Home!";
  }


  return "Change Me";
  // Only change code above this line
}

// Change these values to test
golfScore(4, 4);
this condition isnt fulfilled
golfScore(4, 4) should return "Par"
can someone help me?
funnily in console window it say "par"
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 11:48
@SimonJacobsTLD You need to start your API call with http://
Jan Dahl-Madsen
@jsdm
Apr 21 2016 11:50
Hi everybody, i need some help getting 3 divs to be on a line… I’ve tried changing types, display: settings etc… The icon on the right just won’t be on the same line… Any help appreciated! The html code is added from JS http://codepen.io/jsdm/pen/aNjomO
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 11:50
@ankur1163 You need to return "Par", you are currently returning "par"
Simon Jacobs
@SimonJacobsTLD
Apr 21 2016 11:52
@AndrewGHC doesn't seem to make a difference;
$.getJSON(http://api.openweathermap.org/data/2.5/weather?lat=40.4112656&lon=-3.7082492999999994&units=metric&APPID=121035744d24da615cbe18c34be9cf83&callback=JSON_CALLBACK, function (data) {
$('.json').html(data);
});
sorry with the link in between ' ' of course
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 11:55
@jsdm Get rid of the spacing between the li elements
like so
      <li class="headLi whiteText active">All</li><li class="headLi greenText">Online</li><li class="headLi redText">Offline</li>
CamperBot
@camperbot
Apr 21 2016 11:55
:bulb: to format code use backticks! ``` more info
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 11:58
@SimonJacobsTLD Well your link isn't a string for starters
Simon Jacobs
@SimonJacobsTLD
Apr 21 2016 11:59
yeah sorry because i was sloppy in the forum; in the code it now looks like this:
  $(document).ready(function() {

    $("#getJSON").on("click", function(){

      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {

          function roundto3(val){
            var newVal = 0.001 * Math.round(val*1000);
            return newVal;
          }

          var latC = position.coords.latitude;
          var lonC = position.coords.longitude;

          var latCround = roundto3(latC);
          var lonCround = roundto3(lonC);

          var api = 'http://api.openweathermap.org/data/2.5/weather?';
          var lat = 'lat='+latC;
          var lon = '&lon='+lonC; 
          var units = "&units=metric";
          var APPID = '&APPID=121035744d24da615cbe18c34be9cf83';
          var cb = "&callback=JSON_CALLBACK";

          var JSONlink = api + lat + lon + units + APPID + cb; 

          $('.location').html("lat = "+latCround+", lon = "+lonCround);

          $('.api-link').html(JSONlink);

          $.getJSON(JSONlink, function (data) {
            $('.json').html(data);
          });

      });
    };    
  });
});
Jan Dahl-Madsen
@jsdm
Apr 21 2016 12:02
@AndrewGHC Thank!s, hadn’t noticed that at all :) pretty strange! but my problem is the green icon that is outside the picture and name, underneath the tabs. It’s driving me nuts!
CamperBot
@camperbot
Apr 21 2016 12:02
jsdm sends brownie points to @andrewghc :sparkles: :thumbsup: :sparkles:
:star: 344 | @andrewghc | http://www.freecodecamp.com/andrewghc
Simon Jacobs
@SimonJacobsTLD
Apr 21 2016 12:03
but this part doesn't seem to work:
          $.getJSON(JSONlink, function (data) {
            $('.json').html(data);
          });
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 12:03
@SimonJacobsTLD Remove the callback parameter
$.getJSON('http://api.openweathermap.org/data/2.5/weather?lat=40.4112656&lon=-3.7082492999999994&units=metric&APPID=121035744d24da615cbe18c34be9cf83&callback=', function (data) {
console.log(data);
});
End of the string should say callback=
It's failing silently because it's returning jsonp rather than json
But it still doesn't display the JSON in my div
kirbyedy
@kirbyedy
Apr 21 2016 12:06
link to your pen
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 12:08
@SimonJacobsTLD $.get('http://api.openweathermap.org/data/2.5/weather?lat=40.4112656&lon=-3.7082492999999994&units=metric&APPID=121035744d24da615cbe18c34be9cf83&callback=', function (data) { console.log(data) $('body').html(JSON.stringify(data)); });
You need to convert it to a string with JSON.stringify()
Caleb Martin
@caleb272
Apr 21 2016 12:09
how do you make a button the same height as the well its in?
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 12:11
@jsdm No problem, I would suggest putting the green italic icon in the same paragraph as the thumbnail then floating it right
kirbyedy
@kirbyedy
Apr 21 2016 12:15
@SimonJacobsTLD for start, you are missing jquery
Simon Jacobs
@SimonJacobsTLD
Apr 21 2016 12:17
but I have been testing it in an FCC-challenge;
<script>
  $(document).ready(function() {

    $("#getJSON").on("click", function(){

      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {

          function roundto3(val){
            var newVal = 0.001 * Math.round(val*1000);
            return newVal;
          }

          var latC = position.coords.latitude;
          var lonC = position.coords.longitude;

          var latCround = roundto3(latC);
          var lonCround = roundto3(lonC);

          var api = 'http://api.openweathermap.org/data/2.5/weather?';
          var lat = 'lat='+latCround;
          var lon = '&lon='+lonCround; 
          var units = "&units=metric";
          var APPID = '&APPID=121035744d24da615cbe18c34be9cf83';
          var cb = "&callback=";

          var JSONlink = api + lat + lon + units + APPID + cb; 

          $('.location').html("lat = "+latCround+", lon = "+lonCround);

          $('.api-link').html(JSONlink);

          $.getJSON(JSONlink, function (data) {
            $('body').html(JSON.stringify(data)); 
          });

      });
    };    
  });
}); 

</script>

<div class="container-fluid">
  <div class = "row text-center">
    <h2>JSON-API Test</h2>
  </div>

  <div class = "row text-center">
    <div class = "col-xs-12 well location">
      The location will go here
    </div>
  </div>

    <div class = "row text-center">
    <div class = "col-xs-12 well api-link">
      The API-link will go here
    </div>
  </div>

  <div class = "row text-center">
    <div class = "col-xs-12 well json">
      The resulting JSON will go here
    </div>
  </div>

  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getJSON" class = "btn btn-primary">
        Get JSON
      </button>
    </div>
  </div>

</div>
kirbyedy
@kirbyedy
Apr 21 2016 12:18
@SimonJacobsTLD I added the jquery in the codepen settings, and I got the response
Simon Jacobs
@SimonJacobsTLD
Apr 21 2016 12:19
Really? How do I add the JQuery? :)
NVM found it
but does it also find the JSON? Because in mine it now finds location and link (as it did in the FCC) but it still doesn't display the JSON
kirbyedy
@kirbyedy
Apr 21 2016 12:22
its working, I tested it, and it displays the temperature to the console
Simon Jacobs
@SimonJacobsTLD
Apr 21 2016 12:23
Ah yes it is now for me too! Thanks a lot!
thanks @AndrewGHC
CamperBot
@camperbot
Apr 21 2016 12:23
simonjacobstld sends brownie points to @andrewghc :sparkles: :thumbsup: :sparkles:
:star: 345 | @andrewghc | http://www.freecodecamp.com/andrewghc
Simon Jacobs
@SimonJacobsTLD
Apr 21 2016 12:23
thanks @kirbyedy
CamperBot
@camperbot
Apr 21 2016 12:23
simonjacobstld sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star: 905 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 12:24
@SimonJacobsTLD :thumbsup:
The City Name doesn't appear !!!
Why?
Ankur sharma
@ankur1163
Apr 21 2016 12:41
thanks @AndrewGHC
CamperBot
@camperbot
Apr 21 2016 12:41
ankur1163 sends brownie points to @andrewghc :sparkles: :thumbsup: :sparkles:
:star: 346 | @andrewghc | http://www.freecodecamp.com/andrewghc
Max Plakhuta
@maxplakhuta
Apr 21 2016 12:44
hi guys, i've got a small issue with my Wiki viewer. For some reason my .innerHTML method appends search results but not replacing the older queries. Is there an option to use plain javascript similar to jQuery's $().html(); method?http://codepen.io/maxplakhuta/full/grKpBB/
Ankur sharma
@ankur1163
Apr 21 2016 12:44
can someone tell me what i am doing wrong in switch statement
 switch(val){
    case 1:alpha;
      break;
    case 2:beta;
      break;


  }
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 12:46
@ankur1163 Have the alpha and beta vars been declared?
Ankur sharma
@ankur1163
Apr 21 2016 12:48
I got it thanks
thanks @AndrewGHC
CamperBot
@camperbot
Apr 21 2016 12:48
ankur1163 sends brownie points to @andrewghc :sparkles: :thumbsup: :sparkles:
:warning: ankur1163 already gave andrewghc points
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 12:49
@maxplakhuta Just add $('#results').html(''); as soon as your callback is called
Max Plakhuta
@maxplakhuta
Apr 21 2016 12:50
@AndrewGHC in that case I will have only 1 result shown as there wouldn't be += used
Nazim
@nazimkazim
Apr 21 2016 12:50
Hey guys how to fetch data in "Twitch.tv" project if stream:"null"?
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 12:51
@maxplakhuta That will clear your unordered list so that the new results can come in
Max Plakhuta
@maxplakhuta
Apr 21 2016 12:52
@AndrewGHC yeah, i know that, but like I said there wouldn't be a list of results added, just the last one from the loop
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 12:52
@nazimkazim If that's a property of the returned query then that's all you have to deal with, unless your params were wrong
@maxplakhuta You want all the results on your page?
Max Plakhuta
@maxplakhuta
Apr 21 2016 12:53
@AndrewGHC you can check here what I meant: http://codepen.io/maxplakhuta/pen/grKpBB?editors=1010
Ankur sharma
@ankur1163
Apr 21 2016 12:54
@AndrewGHC i am getting variable not defined error in next program
function switchOfStuff(val) {
  var answer = "";
  // Only change code below this line

  switch(val){
    case "a":{
        return "apple";

    }
       break;
    case "b":{
      return "bird";
    }
      break;
    case "c":{
      return "cat";
    }
      break;

    default: {
      return "stuff";
    }
      break;

  }
  // Only change code above this line  
  return answer;  
}

// Change this value to test
switchOfStuff(a);
Max Plakhuta
@maxplakhuta
Apr 21 2016 12:54
@AndrewGHC and yes, I want at 5 results to be shown
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 12:56
@ankur1163 Your switch isn't returning to anything
Max Plakhuta
@maxplakhuta
Apr 21 2016 12:56
@ankur1163 try to call switchOfStuff("a");
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 12:56
@maxplakhuta I don't quite understand
Ankur sharma
@ankur1163
Apr 21 2016 12:56
but i am learning switch statement only
I dont even know whats switchofstuff
@AndrewGHC what should I add?
isnt I am using return "stuff";
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 12:57
You want the answer var to change based on the switch right?
Ankur sharma
@ankur1163
Apr 21 2016 12:58
yes
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 12:59
@ankur1163 You need to get rid of the curly brackets and the returns
And simply set the answer var to what you want it to be
you are not changing the answer var within your switch
Ankur sharma
@ankur1163
Apr 21 2016 13:01
case "a":"apple";
break;
does this look ok?
its still showing me some error with red cross
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 13:02
no,
case "a":
answer ="apple";
break;
I think that's right but I haven't used switches in a long time, they're not that useful
Ankur sharma
@ankur1163
Apr 21 2016 13:03
ok
its still saying a not defined
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 13:04
post the code
Jas K
@jask84
Apr 21 2016 13:06

Hi. If anyone is able to get the time to look at my Tic Tac Toe project, it would be appreciated. I am just at the first step - allowing computer to make a random choice, then allow user to click and make their choice and so on. No 'a.i.' or winning conditions yet. However, I having a big issue with creating the loop to allow computer and the user to play until all the boxes are filled up (i.e. my numArray.length = 0). It seems the computer turn works fine for the first iteration then it gets completely messed up after and I am not sure what to do from here - tried to use a while loop but couldnt implement properly. Any advice would be helpful.

http://codepen.io/jask/pen/KzeOJe?editors=0010

Ankur sharma
@ankur1163
Apr 21 2016 13:06
function switchOfStuff(val) {
  var answer = "";
  // Only change code below this line

  switch(val){
    case "a":answer="apple";
       break;
    case "b":answer= "bird";

      break;
    case "c":answer= "cat";

      break;

    default: 
     answer="stuff";



  }
  // Only change code above this line  
  return answer;  

}

// Change this value to test
switchOfStuff(a);
code @AndrewGHC
Nazim
@nazimkazim
Apr 21 2016 13:08
@AndrewGHC thanks, but i want to understand how to extract data if users are offline
CamperBot
@camperbot
Apr 21 2016 13:08
nazimkazim sends brownie points to @andrewghc :sparkles: :thumbsup: :sparkles:
:star: 347 | @andrewghc | http://www.freecodecamp.com/andrewghc
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 13:09
@ankur1163 your function call is passing a variable called a
you need to pass it a string
@nazimkazim whatever it gives you is what you have to work with, stream:null means they're not streaming at this time, but you still have their thumbnail, username etc
Stephen James
@sjames1958gm
Apr 21 2016 13:10
@nazimkazim If you use https://api.twitch.tv/kraken/channels/freecodecamp you get info even if offline - not sure if it has what you need.
Ankur sharma
@ankur1163
Apr 21 2016 13:11
@AndrewGHC should i put quotes around a
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 13:11
yes
Ankur sharma
@ankur1163
Apr 21 2016 13:11
it worked
:)
Stephen James
@sjames1958gm
Apr 21 2016 13:11
https://api.twitch.tv/kraken/channels/freecodecamp
{
"mature": false,
"status": "fraziern doing node/mongojs stuff and such #programming\n \n",
"broadcaster_language": "en",
"display_name": "FreeCodeCamp",
"game": "Creative",
"language": "en",
"_id": 79776140,
"name": "freecodecamp",
"created_at": "2015-01-14T03:36:47Z",
"updated_at": "2016-04-21T12:30:20Z",
"delay": null,
"logo": "https://static-cdn.jtvnw.net/jtv_user_pictures/freecodecamp-profile_image-d9514f2df0962329-300x300.png",
"banner": null,
"video_banner": "https://static-cdn.jtvnw.net/jtv_user_pictures/freecodecamp-channel_offline_image-b8e133c78cd51cb0-1920x1080.png",
"background": null,
"profile_banner": "https://static-cdn.jtvnw.net/jtv_user_pictures/freecodecamp-profile_banner-6f5e3445ff474aec-480.png",
"profile_banner_background_color": null,
"partner": false,
"url": "https://www.twitch.tv/freecodecamp",
"views": 145675,
"followers": 9600,
"_links": {
"self": "https://api.twitch.tv/kraken/channels/freecodecamp",
"follows": "https://api.twitch.tv/kraken/channels/freecodecamp/follows",
"commercial": "https://api.twitch.tv/kraken/channels/freecodecamp/commercial",
"stream_key": "https://api.twitch.tv/kraken/channels/freecodecamp/stream_key",
"chat": "https://api.twitch.tv/kraken/chat/freecodecamp",
"features": "https://api.twitch.tv/kraken/channels/freecodecamp/features",
"subscriptions": "https://api.twitch.tv/kraken/channels/freecodecamp/subscriptions",
"editors": "https://api.twitch.tv/kraken/channels/freecodecamp/editors",
"teams": "https://api.twitch.tv/kraken/channels/freecodecamp/teams",
"videos": "https://api.twitch.tv/kraken/channels/freecodecamp/videos"
}
}
Uğur
@UgurKurt
Apr 21 2016 13:14

  var quotes = [
    {
      "quote":"Biz racon kesmeyiz,kafa keseriz.",
      "author":"Polat Alemdar"
    },
    {
      "quote":"Rüzgar ne kadar sert esse de,kayadan götüreceği tozdur.",
      "author":"Şahin Ağa"
    },{
      "quote":"Yukarı baktık boynumuz tutuldu,yukarı çıktık başımız döndü.",
      "author":"Süleyman Çakır"
    },{
      "quote":"İki kişinin bildiği sır değildir.",
      "author":"Aslan Akbay"
    },{
      "quote":"Seni seviyorum lan it",
      "author":"Abuzer Kömürcü"
    },{
      "quote":"bütün gelmeler gitmek, bütün gitmeler gelmek içindir.",
      "author":"Şahin Ağa"
    }
  ]; 

//var randomNum = Math.floor(Math.random*quotes.length);

var randomNum = Math.floor(Math.random() * JSON.parse(quotes).length);

$("#quote-text").html(quotes[randomNum]["quote"]);
my randomNum statement doesnt work
can anyone help me ?
Nazim
@nazimkazim
Apr 21 2016 13:15
@AndrewGHC @sjames1958gm thanks, btw can you quickly check if you have time what i'm doing wrong.
CamperBot
@camperbot
Apr 21 2016 13:15
nazimkazim sends brownie points to @andrewghc and @sjames1958gm :sparkles: :thumbsup: :sparkles:
Stephen James
@sjames1958gm
Apr 21 2016 13:15
@UgurKurt What is the value of randomNum (console.log(randomNum)
CamperBot
@camperbot
Apr 21 2016 13:15
:warning: nazimkazim already gave andrewghc points
:star: 731 | @sjames1958gm | http://www.freecodecamp.com/sjames1958gm
Stephen James
@sjames1958gm
Apr 21 2016 13:16
@nazimkazim I see an error in the devtools console
Uğur
@UgurKurt
Apr 21 2016 13:16
Im working on codepen
how can i see that ?
Nazim
@nazimkazim
Apr 21 2016 13:17
@sjames1958gm yes i know
Stephen James
@sjames1958gm
Apr 21 2016 13:17
@UgurKurt open your devtools (F12 on chrome and the console is there) Also there is a console button near the bottom that opens a console (has less information)
Nazim
@nazimkazim
Apr 21 2016 13:17
@sjames1958gm maybe i'm using wrong API
Uğur
@UgurKurt
Apr 21 2016 13:17
I open codepens console
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 13:17
@nazimkazim when you said stream was null I assumed you mean that the property was null, in your case you're trying to access something that doesn't exist
Uğur
@UgurKurt
Apr 21 2016 13:17
it outputs nothing on the console
Clem
@ctataru
Apr 21 2016 13:18
hi guys. could anyone tell me how i can line up the arrows and numbers in my pen? right now i'm trying to make three different rows (one for the up arrows ^, one for the number values, and another for the down arrows v).
is there an easier way to do this? it feels like i have to tweak multiple elements every time i add something.
http://codepen.io/wise/pen/PNBopg?editors=1100
Nazim
@nazimkazim
Apr 21 2016 13:19
@AndrewGHC yes i need to figure out what is wrong
Uğur
@UgurKurt
Apr 21 2016 13:19
I tried quotes.length also
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 13:20
@nazimkazim log the data object and look to see what it is you're not able to access
Uğur
@UgurKurt
Apr 21 2016 13:20
didnt work too
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 13:23
@ctataru I don't think you'll want to use bootstrap for this, it won't play well if you try to move things around outside of its grid, your problem is on line 9
css
Uğur
@UgurKurt
Apr 21 2016 13:23
I did nothing,but it started to work
weird
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 13:25
@UgurKurt quotes.length will work assuming you get the property after declaring the quotes var
Clem
@ctataru
Apr 21 2016 13:27
@AndrewGHC alright. should i focus on making rows still? or can i focus on the ^5vblocks
Uğur
@UgurKurt
Apr 21 2016 13:27
thanks ,I tried it ,it didnt work 3 times,after 4th time it started to work
interesting
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 13:29
@ctataru If you want a quick dirty fix just remove the font sizing from #break-num, #timer, #work-num
@ctataru or change it to 20px
Clem
@ctataru
Apr 21 2016 13:30
@AndrewGHC wow that was ridiculously easy
@AndrewGHC haha thank you
CamperBot
@camperbot
Apr 21 2016 13:31
ctataru sends brownie points to @andrewghc :sparkles: :thumbsup: :sparkles:
:star: 348 | @andrewghc | http://www.freecodecamp.com/andrewghc
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 13:31
@ctataru :thumbsup:
Clem
@ctataru
Apr 21 2016 13:34
@AndrewGHC do you know of a cleaner way to get the same result? i'd like to make something that looks smoother, but i'm not sure how to go about it.
http://codepen.io/wise/pen/PNBopg?editors=1100
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 13:35
@ctataru Already looks pretty clean to me, I think the smaller font looks better frankly
Clem
@ctataru
Apr 21 2016 13:37
@AndrewGHC i just don't think it's lined up perfectly. and it looks a little clunky
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 13:39
@ctataru There's no simple way other than hacking it together unless you do a redesign
bootstrap will make it harder to align things as you want
Clem
@ctataru
Apr 21 2016 13:40
@AndrewGHC i see. do you know how i could attempt a redesign that offers pretty much the same result? i wanna keep this template.
i just wouldn't know how to do this any other way
like are there certain html properties i can take advantage of, or css techniques that i don't know
João Alves
@JADSN
Apr 21 2016 13:41
Don't show background-image
$("body").css({"background-image": url("https://goo.gl/HZmdxH")});
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 13:42
@JADSN url needs to be in quotes I believe
@ctataru It's all mainly just a hack job, just start with a wrapper (div that contains everything) that you center and then just throw it together from there
Make good use of wrappers to contain things
Clem
@ctataru
Apr 21 2016 13:43
@JADSN $("body").css("background-image", "url("+URL+")")
@AndrewGHC cool. i'll look into it. thanks for the help!
CamperBot
@camperbot
Apr 21 2016 13:44
ctataru sends brownie points to @andrewghc :sparkles: :thumbsup: :sparkles:
:warning: ctataru already gave andrewghc points
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 13:44
This message was deleted
Nazim
@nazimkazim
Apr 21 2016 13:54
@sjames1958gm please can you suggest me a way how to check if user online in "Twitch.tv" project?
Stephen James
@sjames1958gm
Apr 21 2016 13:55
@nazimkazim If stream == null user is offline
{
"stream": null,
"_links": {
"self": "https://api.twitch.tv/kraken/streams/freecodecamp",
"channel": "https://api.twitch.tv/kraken/channels/freecodecamp"
}
}
Nazim
@nazimkazim
Apr 21 2016 13:58
@sjames1958gm thanks
CamperBot
@camperbot
Apr 21 2016 13:58
nazimkazim sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:warning: nazimkazim already gave sjames1958gm points
Jas K
@jask84
Apr 21 2016 14:06

Hi. If anyone is able to get the time to look at my Tic Tac Toe project, it would be appreciated. I am just at the first step - allowing computer to make a random choice, then allow user to click and make their choice and so on. No 'a.i.' or winning conditions yet. However, I having a big issue with creating the loop to allow computer and the user to play until all the boxes are filled up (i.e. my numArray.length = 0). It seems the computer turn works fine for the first iteration then it gets completely messed up after and I am not sure what to do from here - tried to use a while loop but couldnt implement properly. Any advice would be helpful, been stuck on it for while.

http://codepen.io/jask/pen/KzeOJe?editors=0010

Dylan
@dhcodes
Apr 21 2016 14:20
@jask84 Did you call your compChoice function after each userChoice?
@jask84 for instance, I set up my userChoice function to make a choice for the user and then (if it's not a win) run the computer choice.
Jas K
@jask84
Apr 21 2016 14:23
@dhcodes theyre not separate functions... in my code, compChoice just refers to the random box chosen. I am basically using a for loop to loop through 9 times (all the boxes), and each time a choice is made, the relevant box number is removed from the numArray (hence why if it has a length, the game is still in play for now). I am using a userTurn variable which I switch between false and true after each respective turn...
I know my loop is wrong as the console shows the variables going crazy after the first computer choice. Not sure how to work it at the moment.
Dylan
@dhcodes
Apr 21 2016 14:25
I see. I'll take another look.
Jas K
@jask84
Apr 21 2016 14:27
appreciate it
Dylan
@dhcodes
Apr 21 2016 14:28
I can't dive deep because I'm in the middle of something else, but it looks like you need to find a way from keeping your loop from repeating until the numArray is gone. The loop isn't breaking the first time a compChoice is selected. Maybe an if statement could help. I wish I could spend more time with it. Maybe another user can.
Jas K
@jask84
Apr 21 2016 14:31
@dhcodes np. I appreciate you having a look. That seems to be my issue in this case - but I have a for loop with an if statement containing the userTurn variable. I'm stumped at moment.
Ken Haduch
@khaduch
Apr 21 2016 14:32
@jask84 - the problem is that your for loop is just running through all 9 possibilities and skipping the computer turn after the first time. You are setting up a key click listener and unless you can click the things really quickly, it won't toggle between the computer and the user.
@jask84 - you would have to restructure this to have a separate function that would handle the computer move, and then wait for the user click, then invoke the computer move again, then wait for the user click, etc.
John L.
@jomcode
Apr 21 2016 14:33
are you just trying to get the game to switch between computer and user symbols ?
Jas K
@jask84
Apr 21 2016 14:35
@khaduch thanks for that. That makes more sense.
CamperBot
@camperbot
Apr 21 2016 14:35
jask84 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star: 981 | @khaduch | http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Apr 21 2016 14:35
@jask84 - this is because you are resetting "userTurn" within the click handler for the user. So it never thinks that it is the computer's turn until the user clicks. By that time the for loop is completed.
Jas K
@jask84
Apr 21 2016 14:36
@khaduch ah. That explains why it kept coming up as userTurn = true constantly
@jomcode basically yes
@khaduch I will get to work on this. thanks again
CamperBot
@camperbot
Apr 21 2016 14:38
jask84 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: jask84 already gave khaduch points
Jeff
@adzam5
Apr 21 2016 14:44
Is it possible to use or when declaring a click function? For example
$('.div1 OR .div3').on('click', 'a', function() {
...
});
I know OR is definitely not proper syntax
Amelia Pang
@AMPANG
Apr 21 2016 14:45
Hello! Can anyone explain why my two thumbnails are not aligned next to each other? The ids are sample1 and sample2. http://codepen.io/ameliapang/pen/WwMxOX :(
Clem
@ctataru
Apr 21 2016 14:53
hey guys. is there any way to change the direction of an html code symbol?
i like the design of my upper-left arrow, and i'd like to be able to use it as a bottom arrow, but i can't find the code for the right down arrow:
http://codepen.io/wise/pen/PNBopg?editors=1100
Martialis39
@Martialis39
Apr 21 2016 14:56
HEllo guys!
Can codepen sometimes be spotty when it comes to APIs?
Jeff
@adzam5
Apr 21 2016 14:58
@ctataru &#8681;
Clem
@ctataru
Apr 21 2016 15:00
@adzam5 already tried that one :). look at the result:
http://codepen.io/wise/pen/PNBopg?editors=1100
Jeff
@adzam5
Apr 21 2016 15:03
@ctataru You have a different font size set for your bottom arrows.
Clem
@ctataru
Apr 21 2016 15:04
@adzam5 are you sure? my css says they're all Roboto
unless i'm missing something
Jeff
@adzam5
Apr 21 2016 15:06
@ctataru The font family is the same, but for #arrows-left-btm and #arrows-right-btm you have font-size: 23px Your top arrows are 30px
Clem
@ctataru
Apr 21 2016 15:07
@adzam5 oops you're right. they're still not the same, though:
http://codepen.io/wise/pen/PNBopg?editors=1100
Zubair Ali
@03aliz
Apr 21 2016 15:07
@03aliz
Hello guys, I'm on the twitch API, I can't seem to figure out how to put a placeholder saying 'account closed' if the channel has been closed. I have this code but it doesn't seem to work
   if (status == 422) {
        status = "Account Closed";
        logoPic = " =https://pixabay.com/static/uploads/photo/2016/04/16/10/33/icon-1332777__180.png";
        name = channelArray[i];
      }
the accounts just don't show at all
on the page
Jeff
@adzam5
Apr 21 2016 15:10
@ctataru They are coming up the same for me
Clipboard01.jpg
Clem
@ctataru
Apr 21 2016 15:16
Screen Shot 2016-04-21 at 17.12.36.png
@adzam5 that's so weird...
Clem
@ctataru
Apr 21 2016 15:28
so there's no way to just flip the character horizontally?
Brett Felts
@brettfelts
Apr 21 2016 15:33
I'm having trouble with my tic tac toe game. I'm trying to get the x and o selectors to work. I can get the x, but not the o. Any advice?
Jeff
@adzam5
Apr 21 2016 15:36
@ctataru That is weird. You can try transform: rotate(-180deg);
Martialis39
@Martialis39
Apr 21 2016 15:37
HEllo all
Any way to get around the issue on codepen where it doesnt let you use getCurrentPosition?
lcthornhill
@lsrus
Apr 21 2016 15:39
@brettfelts I think document.querySelector only captures the first element on the page to match, so your event listener is only being attached to the #x button
Jeff
@adzam5
Apr 21 2016 15:39
@Martialis39 getCurrentPosition should work fine in CodePen. Are you sure your browser isn't blocking your location?
Clem
@ctataru
Apr 21 2016 15:40
@adzam5 just found that after googling for a while haha. thanks for the help!
CamperBot
@camperbot
Apr 21 2016 15:40
ctataru sends brownie points to @adzam5 :sparkles: :thumbsup: :sparkles:
:star: 419 | @adzam5 | http://www.freecodecamp.com/adzam5
lcthornhill
@lsrus
Apr 21 2016 15:40
@brettfelts document.querySelectorAll should return an array-like list that you can iterate through and attach an event to each
Brett Felts
@brettfelts
Apr 21 2016 15:40
Hmm, ill give that a try
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 15:42
Could you guys give feedback on this portfolio http://andrewghc.github.io ? I think I've now made it 100% responsive for all devices, all feedback, particularly suggestions for improvement or bugs found highly appreciated
João Alves
@JADSN
Apr 21 2016 15:53
This message was deleted
What is all weather[0].main values in the OpenWeatherMap Api ?
Clear, Snow, Extreme, Rain, have more?
Nathan
@natertot12
Apr 21 2016 15:55
@JADSN You mean this?
"main": {
"temp": 64.71,
"pressure": 1015,
"humidity": 63,
"temp_min": 62.6,
"temp_max": 66.2
},
Clem
@ctataru
Apr 21 2016 15:56
@AndrewGHC really loving the minimalistic look, dude! looks great
João Alves
@JADSN
Apr 21 2016 15:56
weather[1]
0{id: 502, main: "Rain", description: "heavy intensity rain", more...}
base"cmc stations"
No, This
Clem
@ctataru
Apr 21 2016 15:56
@AndrewGHC you should cross post your portfolio to the code review chat room. they'll provide more feedback for you
codercooooder
@codercooooder
Apr 21 2016 15:56
thank you @alpox for your help with my crazy svgs, you are awesome
CamperBot
@camperbot
Apr 21 2016 15:56
codercooooder sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star: 577 | @alpox | http://www.freecodecamp.com/alpox
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 15:56
@ctataru Thanks Clem
CamperBot
@camperbot
Apr 21 2016 15:56
andrewghc sends brownie points to @ctataru :sparkles: :thumbsup: :sparkles:
:star: 321 | @ctataru | http://www.freecodecamp.com/ctataru
codercooooder
@codercooooder
Apr 21 2016 15:56
everyone @alpox is amazing
@alpox thanks so much
CamperBot
@camperbot
Apr 21 2016 15:57
codercooooder sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:warning: codercooooder already gave alpox points
alpox
@alpox
Apr 21 2016 15:57
@codercooooder You're welcome :-)
João Alves
@JADSN
Apr 21 2016 15:58
@adzam5 Thanks
CamperBot
@camperbot
Apr 21 2016 15:58
jadsn sends brownie points to @adzam5 :sparkles: :thumbsup: :sparkles:
:star: 420 | @adzam5 | http://www.freecodecamp.com/adzam5
Clem
@ctataru
Apr 21 2016 16:12
could anyone tell me why my arrows on the left look completely different from the ones on the right?
i'm having trouble spotting why in the code.
http://codepen.io/wise/pen/PNBopg?editors=1100
nsaintjust
@nsaintjust
Apr 21 2016 16:18
Very first boostrap project. I don't understand why I can't center my <ul> in the <div> container ? http://codepen.io/nsaintjust/pen/XdBWNM?editors=1000
Brett Felts
@brettfelts
Apr 21 2016 16:20
@ctataru did you try adjusting the margins?
Why my background-img doesn't work?
Matthew Boland
@mattboland
Apr 21 2016 16:22
can someone help me understand what i am lapsing with regard to the + / - buttons. I am trying to have them change my clock... http://codepen.io/MattBoland/pen/VaXPYN?editors=1010
Rossan Mousaffar
@RossanMuz
Apr 21 2016 16:23
can you tell why we use run pen??
Clem
@ctataru
Apr 21 2016 16:24
@brettfelts nope, not yet. i didn't want to tweak too much, because i don't see any reason why the arrows would look like that
@brettfelts so i was afraid that changing the margins in this case would mess things up later
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 16:25
@ctataru It's caused by the height of the arrows
Nathan
@natertot12
Apr 21 2016 16:25
@nsaintjust You can use the class text-center but if you want to know how to move the bullets https://www.sitepoint.com/community/t/styling-a-ul-centered-li-text-but-bullet-is-left-justified/6497
nsaintjust
@nsaintjust
Apr 21 2016 16:27
@natertot12 ok thanks for that, didn't think I had to handle each element seperately
CamperBot
@camperbot
Apr 21 2016 16:27
nsaintjust sends brownie points to @natertot12 :sparkles: :thumbsup: :sparkles:
:star: 439 | @natertot12 | http://www.freecodecamp.com/natertot12
Clem
@ctataru
Apr 21 2016 16:28
@AndrewGHC i'm playing around with height and getting some weird results. not what i want, though
Nathan
@natertot12
Apr 21 2016 16:31
@JADSN format each case like this
$("body").css({"background-image": 'url("https://goo.gl/1drHge")'});
Clem
@ctataru
Apr 21 2016 16:31
@AndrewGHC also, margin-topseems to move both top arrows once i go over 30px
Nawazish Ali
@nawazishali
Apr 21 2016 16:31

@ctataru May be try replacing this with your CSS. I adjusted some margins. @import url(https://fonts.googleapis.com/css?family=Pacifico);
@import url(https://fonts.googleapis.com/css?family=Roboto);
body {
background: #ff6666;
}

.clock {
width: 200px;
margin: 100px auto;
border: solid 5px #f08080;
border-radius: 50%;
padding: 70px;
padding-top: 40px;
padding-bottom: 70px;
box-sizing: content-box;
}

title {

font-family: Pacifico;
}

.wrapper {
width: 200px;
height: 140px;
margin: 0 auto;
}

.arrow-top {
margin-top: 40px;
}

arrows-left {

font-size: 30px;
transform: rotate(90deg);
float:;
margin-left: -18px;
}

arrows-right {

font-size: 30px;
transform: rotate(90deg);
float: right;
margin-right: -13px;
margin-top: -34px;
}

arrows-left-btm {

font-size: 30px;
transform: rotate(-90deg);
float: left;
margin-left: -18px;

}

arrows-right-btm {

font-size: 30px;
transform: rotate(-90deg);
float: right;
margin-right: -13px;
margin-top: 34px;
}

break-num,

timer,

work-num {

font-family: Roboto;
font-size: 20px;
}

break-num {

margin-left: px;
}

timer {}

João Alves
@JADSN
Apr 21 2016 16:33
@natertot12 It Works, thanks
CamperBot
@camperbot
Apr 21 2016 16:33
jadsn sends brownie points to @natertot12 :sparkles: :thumbsup: :sparkles:
:star: 440 | @natertot12 | http://www.freecodecamp.com/natertot12
Nazim
@nazimkazim
Apr 21 2016 16:34
Hey guys how to make my rest divs go down?
http://codepen.io/nazimkazim/pen/ONEYgZ
Nawazish Ali
@nawazishali
Apr 21 2016 16:34
Guys I am looking for a little help with my Scroll on reveal function. It is working on all selected elements at once where as i want it to work for each element as it shows up in the viewport.
Working on the portfolio project
alpox
@alpox
Apr 21 2016 16:35
@nawazishali I would rather recomment not to make so many animations :-/
Nawazish Ali
@nawazishali
Apr 21 2016 16:36
It's just for practice purpose @alpox
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 21 2016 16:36
@ctataru This would be a thousand times easier without bootstrap :smile:
Clem
@ctataru
Apr 21 2016 16:36
@nawazishali ahh you got the arrows to behave! thanks, man!
what did you tweak in particular?
CamperBot
@camperbot
Apr 21 2016 16:36
ctataru sends brownie points to @nawazishali :sparkles: :thumbsup: :sparkles:
:star: 283 | @nawazishali | http://www.freecodecamp.com/nawazishali
Clem
@ctataru
Apr 21 2016 16:37
@AndrewGHC haha really? i gave it a quick try without bootstrap earlier and i had a hard time making up for col-xs-4
Nawazish Ali
@nawazishali
Apr 21 2016 16:38

@ctataru I added these margins

arrows-right {

margin-top: -34px;
}

arrows-right-btm {

margin-top: 34px;
}

Parminder Singh
@Trion129
Apr 21 2016 16:39
How should I host pics that I use on my pens in codepen? imgur randomly stops working sometimes
Nawazish Ali
@nawazishali
Apr 21 2016 16:39
@Trion129 http://postimage.org/ use this site.
Nathan
@natertot12
Apr 21 2016 16:40
@nawazishali Maybe this will help, I followed a tutorial the links are in the code http://codepen.io/natertot12/pen/GZOqRW?editors=0010
ML164
@ML164
Apr 21 2016 16:40
@ctataru i fixed your arrows by using &#10095 for the right arrows and adjusting the transform rotation a little

``` #arrows-right {
font-size: 30px;
transform: rotate(-90deg);
float: right;
margin-right: -12px;
}

arrows-right-btm {

font-size: 30px;
transform: rotate(90deg);
float: right;
margin-right: -1px;
} ```

Parminder Singh
@Trion129
Apr 21 2016 16:41
@nawazishali Thanks :smile:
CamperBot
@camperbot
Apr 21 2016 16:41
trion129 sends brownie points to @nawazishali :sparkles: :thumbsup: :sparkles:
:star: 284 | @nawazishali | http://www.freecodecamp.com/nawazishali
Nawazish Ali
@nawazishali
Apr 21 2016 16:42
@Trion129 You are welcomed. :)
João Alves
@JADSN
Apr 21 2016 16:44
How can i put all content in the middle
Nawazish Ali
@nawazishali
Apr 21 2016 16:45
@natertot12 Thanks, Lets see how much this helps. :)
CamperBot
@camperbot
Apr 21 2016 16:45
nawazishali sends brownie points to @natertot12 :sparkles: :thumbsup: :sparkles:
:star: 441 | @natertot12 | http://www.freecodecamp.com/natertot12
Frank XC
@tenkdayz
Apr 21 2016 16:45
@JADSN margin-top
Clem
@ctataru
Apr 21 2016 16:46
@ML164 thank you!!
CamperBot
@camperbot
Apr 21 2016 16:46
ctataru sends brownie points to @ml164 :sparkles: :thumbsup: :sparkles:
:star: 290 | @ml164 | http://www.freecodecamp.com/ml164
Nathan
@natertot12
Apr 21 2016 16:50
@JADSN What content do you want to put in the middle?
Do Ngoc Duc
@dongocdc70
Apr 21 2016 16:50
Hi all, I'm attempting the random quote challenge and I want to use the API from forismatic.com for quotes. Can anyone explain to me why nothing happens when I press click me on my code?
http://codepen.io/dongocduc311997/pen/ZWjGxz
Jonathan Gripshover
@mrgrip
Apr 21 2016 16:58
I'm not sure exactly, but I would reference this FCC lesson @dongocdc70 https://www.freecodecamp.com/challenges/convert-json-data-to-html
Dardan Demiri
@dardandemiri
Apr 21 2016 16:58
@dongocdc70
Your api call is not working, your button is right
Make sure that your URL is right
Do Ngoc Duc
@dongocdc70
Apr 21 2016 17:01
@dardandemiri but when I go to the link http://api.forismatic.com/api/1.0/?method=getQuote&format=json I still see the json?
or do I have to use escape character for the URL?
Dardan Demiri
@dardandemiri
Apr 21 2016 17:03
This URL when entered in browser it shows some wired quotes
all characters
Do Ngoc Duc
@dongocdc70
Apr 21 2016 17:04
yeah because it's in russian. i was about to add the language option later. the english version is:
http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en
greg
@wearenotgroot
Apr 21 2016 17:04
@dongocdc70 nvm
Dardan Demiri
@dardandemiri
Apr 21 2016 17:09

@dongocdc70 There is an error

XMLHttpRequest cannot load http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

which means You are not using the api as it's supposed
Do Ngoc Duc
@dongocdc70
Apr 21 2016 17:10
btw I notice that the json given in the lesson (cats.json) is wrapped inside square brackets, while this one is not
Dardan Demiri
@dardandemiri
Apr 21 2016 17:12
You should read the documentation of the api more
You are missing something
Prasad Chaudhari
@ChaudhariPrasad
Apr 21 2016 17:17
Hello Everyone...
Dardan Demiri
@dardandemiri
Apr 21 2016 17:17
Hello @ChaudhariPrasad
Prasad Chaudhari
@ChaudhariPrasad
Apr 21 2016 17:19
i am working on "Random quote machine" challenge.. i am not able to display a default quote like "Quote1" here.. below is the code :
<!DOCTYPE html>
<html>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<head>
<!-- Metadata for this web page : script, style, title -->
<title>Random Quote Machine</title>
</head>

<script>
var quoteArr = ["Quote1", "Quote2", "Quote3", "Quote4", "Quote5"];

$(document).ready(function(){
    $("#new-quote").on("click", function(){
     $("#text").html(randomQuote())});
     });

function randomQuote(){
  var randomNbr = Math.ceil(Math.random()*3);
  return quoteArr[randomNbr];
}

document.getElementById('text').innerHTML='Quote1';
</script>
<style>
html, body, .container {
    height: 100%;
}
.container {
    display: table;
    vertical-align: middle;
}
.vertical-center-row {
    display: table-cell;
    vertical-align: middle;
}
</style>
<body>
<div class = "container container-fluid">
<div class = "quote-box vertical-center-row" align = "center">  
    <div class = "quote-text" >
    <i class = "fa fa-quote-left"></i>
    <span id = "text"></span>
    </div>
    <div>
    <button class = "btn btn-primary" id = "new-quote" align="right">New Quote</button>
    </div>
</div>
</div>
</body>
</html>
alpox
@alpox
Apr 21 2016 17:19
@dardandemiri Thats not exactly what it means.
@dongocdc70 Try to add callback=? to your url query string
@dardandemiri Hi btw :D :hand:
Dardan Demiri
@dardandemiri
Apr 21 2016 17:20
I tried
it didn't help :P
@ChaudhariPrasad
Cody Bouscaren
@codybousc
Apr 21 2016 17:21
anyone know when the react tutorial section is supposed to be up and running?
Prasad Chaudhari
@ChaudhariPrasad
Apr 21 2016 17:22

i am trying to display Quote1 for the firt time in span tag and subsequent quotes will be taken care by JS function.. can some one point out why

document.getElementById('text').innerHTML='Quote1';

is not working for me??

Dardan Demiri
@dardandemiri
Apr 21 2016 17:22
You should try to use: Math.round(Math.random()*3)
Prasad Chaudhari
@ChaudhariPrasad
Apr 21 2016 17:23

@dardandemiri i am trying to display Quote1 for the firt time in span tag and subsequent quotes will be taken care by JS function..

document.getElementById('text').innerHTML='Quote1';

is not working for me??

Merly
@merlys
Apr 21 2016 17:24
try to have that in the html body and show that quote when the page is loaded first and change it new using js
to @ChaudhariPrasad
alpox
@alpox
Apr 21 2016 17:25
@dongocdc70 Do this then https://crossorigin.me/http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en
@dardandemiri @dongocdc70 Callback=? makes the request a jsonp request. If the API doesn't support jsonp, you can do nothing about the CORS Problem, than using a proxy. (Like crossorigin.me)
Dardan Demiri
@dardandemiri
Apr 21 2016 17:26
Thank you @alpox my friend
CamperBot
@camperbot
Apr 21 2016 17:26
dardandemiri sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star: 578 | @alpox | http://www.freecodecamp.com/alpox
Dardan Demiri
@dardandemiri
Apr 21 2016 17:26
never heard about that
Do Ngoc Duc
@dongocdc70
Apr 21 2016 17:27
@dardandemiri @alpox thanks I'm reading about jsonp too. but this kind of cross origin is a kind of network attack right?
CamperBot
@camperbot
Apr 21 2016 17:27
dongocdc70 sends brownie points to @dardandemiri and @alpox :sparkles: :thumbsup: :sparkles:
:star: 579 | @alpox | http://www.freecodecamp.com/alpox
:star: 345 | @dardandemiri | http://www.freecodecamp.com/dardandemiri
Kartik Shah
@krtk6160
Apr 21 2016 17:27
Hey guys, I need some help with bootstrap.
My columns just don't separate and instead move down to another row. How shall I fix this?
Look at the bottom of the pen.
http://codepen.io/krtk6160/full/eZjpjR/
alpox
@alpox
Apr 21 2016 17:28
@dongocdc70 Its no real attack. The browser just tries to prevent you from security issues. If you Access some services on the web which could be dangerous
Dardan Demiri
@dardandemiri
Apr 21 2016 17:28
@krtk6160 You need to put them in an row class
I see you have done that
hmmm
Prasad Chaudhari
@ChaudhariPrasad
Apr 21 2016 17:29
@merlys got it .. thanks!!
CamperBot
@camperbot
Apr 21 2016 17:29
chaudhariprasad sends brownie points to @merlys :sparkles: :thumbsup: :sparkles:
:star: 287 | @merlys | http://www.freecodecamp.com/merlys
Dardan Demiri
@dardandemiri
Apr 21 2016 17:30
@alpox what do you think about this problem
@krtk6160 has
Patrick
@pwcsquared
Apr 21 2016 17:35
hey guys, does anyone know how to keep text from being highlighted/selected when the user clicks quickly on a text element?
Kartik Shah
@krtk6160
Apr 21 2016 17:36
@dardandemiri Fixed it by including bootstrap link in the header. Lame mistake.
alpox
@alpox
Apr 21 2016 17:39
@dardandemiri @krtk6160 It seems you just didnt want to stick with bootstrap style. Yeah you were tight to include it there but please do it in the header section in the settings panel of codepen.
Patrick
@pwcsquared
Apr 21 2016 17:39
nvm found it, user-select is the property in case anyone was wondering
alpox
@alpox
Apr 21 2016 17:40
@krtk6160 2. don't use the class "container" or "container-fluid" anywhere except for the navbar and the outermost element, which wraps all your other html
@krtk6160 3. You don't have to provide your own styles for the navbar, since boostrap already does that well, when you are just using it correctly
@krtk6160 Take a look here: http://getbootstrap.com/components/#navbar
Ryan Elliott
@Ryan104
Apr 21 2016 17:44
Anyone have a second to try my weather app to see if you encounter a bug (especially outside of the US). Much appreciated http://s.codepen.io/Ryan104/debug/RayJax
Prasad Chaudhari
@ChaudhariPrasad
Apr 21 2016 17:45
@dardandemiri @merlys any idea how i can have one quote taken from array i have declared when page load first time.. ?? currently i m hard coding Qoute1 in html.. would like to see that coming from my array.. any idea??
alpox
@alpox
Apr 21 2016 17:46
@Ryan104 Does well (Switzerland)
Ryan Elliott
@Ryan104
Apr 21 2016 17:46
@alpox great. Thanks!
CamperBot
@camperbot
Apr 21 2016 17:46
ryan104 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star: 580 | @alpox | http://www.freecodecamp.com/alpox
Kartik Shah
@krtk6160
Apr 21 2016 17:46
@alpox Okay, thanks
CamperBot
@camperbot
Apr 21 2016 17:46
krtk6160 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star: 581 | @alpox | http://www.freecodecamp.com/alpox
alpox
@alpox
Apr 21 2016 17:47
@ChaudhariPrasad
$(document).ready(function(){
     $("#text").html(randomQuote())});
    $("#new-quote").on("click", function(){
     $("#text").html(randomQuote())});
     });
Islam Ibakaev
@dagman
Apr 21 2016 17:52
Has anyone built their portfolio page?
alpox
@alpox
Apr 21 2016 17:53
@dagman Sure :-) told ya yesterday ^^
Prasad Chaudhari
@ChaudhariPrasad
Apr 21 2016 17:54
@alpox nice..thanks..
CamperBot
@camperbot
Apr 21 2016 17:54
chaudhariprasad sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star: 582 | @alpox | http://www.freecodecamp.com/alpox
Ken Haduch
@khaduch
Apr 21 2016 17:54
@Ryan104 - looks good. My only complaint (or question) : would it be better to list the wind speed as 5mph SW or 5 mph SW? The run-together version made me look twice. Also - if you switch to Celsius degrees, would it make sense to convert to kmph? I don't know if that's in the description or example site?
Islam Ibakaev
@dagman
Apr 21 2016 17:54
@alpox i remember just wanna see different examples :smile:
alpox
@alpox
Apr 21 2016 17:54
Ah okay :D
lcthornhill
@lsrus
Apr 21 2016 17:55
@Ryan104 does fine from England
Prasad Chaudhari
@ChaudhariPrasad
Apr 21 2016 17:55
@Ryan104 does fine from india :)
Ryan Elliott
@Ryan104
Apr 21 2016 17:57
@khaduch thanks for the feedback. I wasn't sure which way will look better but I think you are right. changing to kmph isnt in the requirements but it would be easy to add. would kmph or mps make more sense for that unit?
CamperBot
@camperbot
Apr 21 2016 17:57
ryan104 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star: 984 | @khaduch | http://www.freecodecamp.com/khaduch
Ryan Elliott
@Ryan104
Apr 21 2016 17:57
@lsrus @ChaudhariPrasad awesome. thanks!
CamperBot
@camperbot
Apr 21 2016 17:57
ryan104 sends brownie points to @lsrus and @chaudhariprasad :sparkles: :thumbsup: :sparkles:
:star: 385 | @lsrus | http://www.freecodecamp.com/lsrus
:star: 284 | @chaudhariprasad | http://www.freecodecamp.com/chaudhariprasad
Ken Haduch
@khaduch
Apr 21 2016 17:58
@Ryan104 - you're welcome. I think km per hour makes more sense? meters per hour would be like 10,000 mph :) (and would it be "mph", which looks like miles per hour? Or Mph...) I think km/hour makes sense?
Ryan Elliott
@Ryan104
Apr 21 2016 18:02
@khaduch haha yeah that would be a little ridiculous. the api can respond with meters per second which is what was making me wonder. easy to convert to kmph though
Matthew Boland
@mattboland
Apr 21 2016 18:08
can someone help me figure out how to add time on my pomodoro clock?http://codepen.io/MattBoland/pen/VaXPYN?editors=0010
Ryan Elliott
@Ryan104
Apr 21 2016 18:09
@khaduch ok wind speed changes now with the change to C. http://s.codepen.io/Ryan104/debug/RayJax
Matthew Boland
@mattboland
Apr 21 2016 18:09
ie what is wrong with my add/minus functions?
Coy Sanders
@coymeetsworld
Apr 21 2016 18:10
if you mean why the display isn't changing @mattboland, then it's because you're not updating what is on the screen, only the pom variable
alpox
@alpox
Apr 21 2016 18:10
@mattboland
pomMore.addEventListener('click', add);
remove the ()parens
Matthew Boland
@mattboland
Apr 21 2016 18:11
@coymeetsworld how would i update what is on the screen?
alpox
@alpox
Apr 21 2016 18:11

@mattboland

//adds time
  function add() {
    return pom++;
  }

you don't really need the return value since pom is global... so:

//adds time
  function add() {
    pom++;
  }
Stephen James
@sjames1958gm
Apr 21 2016 18:12
@mattboland In your click handler you are calling the function remove the () and then update the DOM to reflect the change in your add function.
Coy Sanders
@coymeetsworld
Apr 21 2016 18:12
you can use jQuery for it @mattboland
Stephen James
@sjames1958gm
Apr 21 2016 18:16
@mattboland What @coymeetsworld said :)
Matthew Boland
@mattboland
Apr 21 2016 18:18
@alpox does not seem to solve.. @coymeetsworld @sjames1958gm yeah i wondered if i could do it without jquery. thanks all
CamperBot
@camperbot
Apr 21 2016 18:18
mattboland sends brownie points to @alpox and @coymeetsworld and @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star: 604 | @coymeetsworld | http://www.freecodecamp.com/coymeetsworld
:star: 583 | @alpox | http://www.freecodecamp.com/alpox
:star: 739 | @sjames1958gm | http://www.freecodecamp.com/sjames1958gm
Coy Sanders
@coymeetsworld
Apr 21 2016 18:19
np @mattboland , any reason you wouldn't want to use jQuery?
Dardan Demiri
@dardandemiri
Apr 21 2016 18:20
FreeCodeCamp is so addictive !
Matthew Boland
@mattboland
Apr 21 2016 18:20
none in particular, i just wanted to get a better understanding of how to do dom manipulation with javascript alone.
Dardan Demiri
@dardandemiri
Apr 21 2016 18:20
Better than University
<3
Coy Sanders
@coymeetsworld
Apr 21 2016 18:21
oh ok, you can learn that but then you'll find jQuery much better
nelsonbi07
@nelsonbi07
Apr 21 2016 18:25

Hello folks, im working on my personal portfolio, can someone tell me why am I not able to resize the cat photo on my page?

http://codepen.io/nelson_bi07/pen/GZGwBb/?editors=1100

Dardan Demiri
@dardandemiri
Apr 21 2016 18:30
Have you included bootstrap ?
@nelsonbi07
nelsonbi07
@nelsonbi07
Apr 21 2016 18:31
yes i did
Dardan Demiri
@dardandemiri
Apr 21 2016 18:31
try adding this class than to that image
col-xs-12
and img-responsive class is missing
in that image
nelsonbi07
@nelsonbi07
Apr 21 2016 18:32
I've tried adding omg-responsive, but still not working
Dardan Demiri
@dardandemiri
Apr 21 2016 18:33
<img class="cat-photo img-responsive col-xs-12" src="https://bit.ly/fcc-relaxing-cat">
try like this
nelsonbi07
@nelsonbi07
Apr 21 2016 18:34
the image is now very large
Dardan Demiri
@dardandemiri
Apr 21 2016 18:35
<div>
<img class="cat-photo col-md-12 img-responsive" src="https://bit.ly/fcc-relaxing-cat">
</div>
it gets BIG.
so what You want @nelsonbi07
Is to giv a col- the div that the image is in
nelsonbi07
@nelsonbi07
Apr 21 2016 18:36
if i wanted the image smaller how would i do it
Patrick
@pwcsquared
Apr 21 2016 18:37
Hey guys! I've just about finished my pomodoro timer and everything is working the way I want except the timer takes a couple seconds to get started once it's clicked. Would anyone mind helping me figure out how to tighten it up a bit?
nelsonbi07
@nelsonbi07
Apr 21 2016 18:38
thanks @dardandemiri i appreciate your help!
CamperBot
@camperbot
Apr 21 2016 18:38
nelsonbi07 sends brownie points to @dardandemiri :sparkles: :thumbsup: :sparkles:
Dardan Demiri
@dardandemiri
Apr 21 2016 18:38
<img style="width:200px;"class="cat-photo img-responsive" src="https://bit.ly/fcc-relaxing-cat">
CamperBot
@camperbot
Apr 21 2016 18:38
:star: 348 | @dardandemiri | http://www.freecodecamp.com/dardandemiri
Dardan Demiri
@dardandemiri
Apr 21 2016 18:38
just play with the width
and you can make it in any size you want
but learn more about Bootstrap grids
You will need them really
nelsonbi07
@nelsonbi07
Apr 21 2016 18:39
okay thanks again!!
Dardan Demiri
@dardandemiri
Apr 21 2016 18:39
You are welcome
;)
:+1:
Patrick
@pwcsquared
Apr 21 2016 18:47
anyone get a chance to take a look at my codepen? I'm still strugglin' lol
Juwdohr
@Juwdohr
Apr 21 2016 18:48
Can anyone help? Can't seem to get the search function to work.
http://codepen.io/juwdohr/pen/PNeMBK
Ken Haduch
@khaduch
Apr 21 2016 18:52
@Ryan104 - looking good!
Patrick
@pwcsquared
Apr 21 2016 18:56
@Juwdohr in your searchUsers function, console.log input to see how "this" is really functioning
right now it's not doing what you think it is
Juwdohr
@Juwdohr
Apr 21 2016 19:04
@pwcsquared So how do I get it to actually get the information?
ranyehushua
@ranyehushua
Apr 21 2016 19:04
I am hoping to get some direction with the wiki viewer app, has anyone made it this far who has a moment to help?
Patrick
@pwcsquared
Apr 21 2016 19:08
@Juwdohr you could do var input = $("#query").val();
@ranyehushua sure, what do you need?
Juwdohr
@Juwdohr
Apr 21 2016 19:10
@pwcsquared How do I chekc if it is part of a user?
Islam Ibakaev
@dagman
Apr 21 2016 19:12

a quick question
is it right to do this

<header>
    <div class="contaiber">
        <div class="row"></div>
    </div>
</header>

or this

<div class="container">
    <header>
        <div class="row"></div>
    </header>
</div>
Patrick
@pwcsquared
Apr 21 2016 19:13
@Juwdohr you could pass input to indexOf() to see if the user name contains input
@dagman the first one
except with "container" spelled correctly :P
ranyehushua
@ranyehushua
Apr 21 2016 19:17
@pwcsquared Hey Patrick, I am just playing around with the URL for the ajax call and this is what I have right now: https://en.wikipedia.org/w/api.php?action=query&generator=links&search=hello&limit=10&format=jsonfm&titles=Main%20Page&callback=?
I have format set to jsonfm for readability
It is giving me the page id's and titles for those random years, I have not idea what is making it return those titles though when my search parameter is set to 'hello'
You can change the search parameter to anything and still get the same results, its clear I am missing a parameter or have some parameters in there that I don't need...
any suggestion?
Patrick
@pwcsquared
Apr 21 2016 19:18
@ranyehushua yeah I remember the url part of it being really tricky
ranyehushua
@ranyehushua
Apr 21 2016 19:19
@pwcsquared okay now I am seeing that it says *": "Unrecognized parameters: 'search', 'limit'
I don't think you need the generator part
ranyehushua
@ranyehushua
Apr 21 2016 19:20
yea I think the generator might be for XML returns vs json...
Patrick
@pwcsquared
Apr 21 2016 19:20
and I think instead of titles you need list
ranyehushua
@ranyehushua
Apr 21 2016 19:21
yea I just tried yours and it seems like it gives everything we need! Except.. What about the url to direct to the page itself?\
Patrick
@pwcsquared
Apr 21 2016 19:21
I added a search term to the end of the string
ranyehushua
@ranyehushua
Apr 21 2016 19:23
oh yea, I did that and it's working, but the array of the 10 results if only giving me title. snippet, size, wordcount and timestamo
timestamp*
how about actually navigating to the page?
Patrick
@pwcsquared
Apr 21 2016 19:24
oh you mean the url to open another window to the article? I think I added the title of the article to wikipedia.org/ or something like that
en.wikipedia.org/wiki/ + "title" I think
ranyehushua
@ranyehushua
Apr 21 2016 19:25
yup :-) That did it! Did you google that or just bang your head on the keyboard until it came out?! That documentation is so hard to follow!
@pwcsquared You rule. Thanks so much!
CamperBot
@camperbot
Apr 21 2016 19:25
ranyehushua sends brownie points to @pwcsquared :sparkles: :thumbsup: :sparkles:
:star: 370 | @pwcsquared | http://www.freecodecamp.com/pwcsquared
Patrick
@pwcsquared
Apr 21 2016 19:26
@ranyehushua I definitely banged my head on the keyboard, read the documentation, then more head banging lol
getting the right url was definitely the hardest part of that project
Bruce Young
@mutantspore
Apr 21 2016 19:26
just look at the normal articles …see how it’s constructed
ranyehushua
@ranyehushua
Apr 21 2016 19:26
It's definitely been the most complex API I've read about so far... Wiki has so much functionality and data so I guess it makes sense @pwcsquared
Patrick
@pwcsquared
Apr 21 2016 19:32
I fixed my Pomodoro Timer, feedback is welcome!
https://codepen.io/pwcsquared/pen/yOEQNe
Patrick
@pwcsquared
Apr 21 2016 19:49
or if anyone can break let me know so I can fix it lol
Sandra
@SandraFlato
Apr 21 2016 19:52
@pwcsquared Pomodoro Timer works and looks great. Nice job.
Frank XC
@tenkdayz
Apr 21 2016 19:52
@pwcsquared maybe add cursor pointer to the circle
@pwcsquared where did you get the sound for the alarm?
Patrick
@pwcsquared
Apr 21 2016 19:54
oringz.com, just because the sounds are hosted somewhere I could get at them
@tenkdayz thanks for the cursor tip! I like that
CamperBot
@camperbot
Apr 21 2016 19:54
pwcsquared sends brownie points to @tenkdayz :sparkles: :thumbsup: :sparkles:
Frank XC
@tenkdayz
Apr 21 2016 19:54
@pwcsquared after the break finishes the timer doesnt run
CamperBot
@camperbot
Apr 21 2016 19:54
:star: 434 | @tenkdayz | http://www.freecodecamp.com/tenkdayz
Patrick
@pwcsquared
Apr 21 2016 19:54
@tenkdayz right, you have to manually restart
in order to keep break time accountable :P
Frank XC
@tenkdayz
Apr 21 2016 19:55
@pwcsquared is that how it suppose to work?
Patrick
@pwcsquared
Apr 21 2016 19:55
@tenkdayz the project user stories don't say, but the example project just runs indefinitely
but I didn't like that hehe
Frank XC
@tenkdayz
Apr 21 2016 19:58
@pwcsquared I see..
Jonathan Gripshover
@mrgrip
Apr 21 2016 20:00
Hey everyone, I've been pretty chat room shy, but I just finished this random quote generator. My api randomly generates the quotes, but should I be writing my own code to randomize quotes? Any other feedback welcome (my design is not appealing/not my forte) http://codepen.io/mrgrip/pen/oxMXvb
Dylan
@dhcodes
Apr 21 2016 20:01
@mrgrip it's okay to use an API. If you wanted the practice you could write an array or object that your generator accessed
Frank XC
@tenkdayz
Apr 21 2016 20:01
@mrgrip quoth ?
@mrgrip oh I see .. thought it was a typo
Jonathan Gripshover
@mrgrip
Apr 21 2016 20:02
Yeah, like, 'Quoth the Raven?' :) I was an English major in college
Thanks @dhcodes !
CamperBot
@camperbot
Apr 21 2016 20:03
mrgrip sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
Dylan
@dhcodes
Apr 21 2016 20:03
@mrgrip looks good, only thing I would change is so it truncates the quote if it's longer than twitter's 140 character limit
good work
CamperBot
@camperbot
Apr 21 2016 20:03
:star: 671 | @dhcodes | http://www.freecodecamp.com/dhcodes
Frank XC
@tenkdayz
Apr 21 2016 20:03
@mrgrip the tweet button doesnt size properly
Dylan
@dhcodes
Apr 21 2016 20:03
:highfive another English major here
Jonathan Gripshover
@mrgrip
Apr 21 2016 20:04
i'm really bad with CSS... I'm totally lost on sizing that thing @tenkdayz any suggestions/ideas?
Frank XC
@tenkdayz
Apr 21 2016 20:06
@mrgrip dont use %
@mrgrip looks like 34px w and h makes it work...
Jonathan Gripshover
@mrgrip
Apr 21 2016 20:09
@tenkdayz I was discouraged from using px because it won't scale right pending on the device. i switched to 3em, does it look better? am i wrong on my px theory?
Andrew McKeever
@andmckvr13
Apr 21 2016 20:09
did anyone else have trouble getting the weather.id and weather.icon parameters to work with the openweather api?
the rain parameter doesn't seem to work either
Bruce Young
@mutantspore
Apr 21 2016 20:10
it;s in an array
@andmckvr13 and the rain only works if there actually was rain
Frank XC
@tenkdayz
Apr 21 2016 20:11
@mrgrip it should scale right with px
Bruce Young
@mutantspore
Apr 21 2016 20:11
@andmckvr13 data.weather[0].icon
Andrew McKeever
@andmckvr13
Apr 21 2016 20:11
@mutantspore thanks
CamperBot
@camperbot
Apr 21 2016 20:11
andmckvr13 sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1436 | @mutantspore | http://www.freecodecamp.com/mutantspore
Jonathan Gripshover
@mrgrip
Apr 21 2016 20:14
ok. thanks @tenkdayz !
CamperBot
@camperbot
Apr 21 2016 20:14
mrgrip sends brownie points to @tenkdayz :sparkles: :thumbsup: :sparkles:
:star: 435 | @tenkdayz | http://www.freecodecamp.com/tenkdayz
Andrew McKeever
@andmckvr13
Apr 21 2016 20:14
why did openweather create a 1 element array is all those objects?
greg
@wearenotgroot
Apr 21 2016 20:17
@andmckvr13 some place have additional things like fog, mist etc
@andmckvr13 at index 0 is the main one
Andrew McKeever
@andmckvr13
Apr 21 2016 20:19
ahh okay, so it's not always a 1 element array, just for me today with the current weather
Andrew McKeever
@andmckvr13
Apr 21 2016 20:26
is there a tutorial out that talks about how to load the weather icon image? google search turned up null
@andmckvr13 if the icon is 10d then the url will be http://openweathermap.org/img/w/10d.png
Andrew McKeever
@andmckvr13
Apr 21 2016 20:33
@mutantspore thanks
CamperBot
@camperbot
Apr 21 2016 20:33
andmckvr13 sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:warning: andmckvr13 already gave mutantspore points
Robert Friedman
@robfr77
Apr 21 2016 20:47
I'm trying to get my pomodoro clock to work. Can someone tell me what is wrong with this test?
$(".start").click(function() {
   setTimeout(function() {
   alert("Time's up!");
}, 1000);
 });
Nawazish Ali
@nawazishali
Apr 21 2016 20:49
Hey guys I am doing some experimenting with animation on my portfolio Pag project and can't figure out how to modify my revealScroll function to reveal each item individually not as a whole.
Please hav a look at this pen
alpox
@alpox
Apr 21 2016 20:51
@nawazishali you mean after each other?
Nawazish Ali
@nawazishali
Apr 21 2016 20:52
@alpox Yes
When the portfolio section is triggered all the below section automatically get animated
without scrolling
alpox
@alpox
Apr 21 2016 20:53
@nawazishali i would wrie you some example but at the moment i cant.. you will have to implement some callback handler (working with callbacks anyway) and settimeouts with the right delay time
You can also just set a row of setzimeouts with multiples of the delay time
Nawazish Ali
@nawazishali
Apr 21 2016 20:55
Thanks I am am really new to coding. Will look in to timeouts and callbacks.
Bruce Young
@mutantspore
Apr 21 2016 20:56
@nawazishali I used setInterval()
Nawazish Ali
@nawazishali
Apr 21 2016 20:57
@mutantspore I guess I need to do lots more research.
@mutantspore Can you please give me some links or a pen example
Bruce Young
@mutantspore
Apr 21 2016 20:59
Nawazish Ali
@nawazishali
Apr 21 2016 21:00
@mutantspore Well I think I couldn't explain my question well
I have already set time intervals for my animations using css
ranyehushua
@ranyehushua
Apr 21 2016 21:01
@pwcsquared Hey Patrick, one more quick question. Were you able to extract the first sentence of the article using that same ajax call you shared with me? It gives me a snippet, but it's not exactly the first sentence of the article.
Nawazish Ali
@nawazishali
Apr 21 2016 21:01
.css()
I need to modify the function so the it only triggers on the element that is revealed in viewport
Bruce Young
@mutantspore
Apr 21 2016 21:02
@nawazishali sorry i was thinking of the guy just before you in the chat wanting timer help
Nawazish Ali
@nawazishali
Apr 21 2016 21:02
But when ever the first element gets reveled all the other elements get animated
@mutantspore No prob Thanks anyways
CamperBot
@camperbot
Apr 21 2016 21:02
nawazishali sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1437 | @mutantspore | http://www.freecodecamp.com/mutantspore
RichRandall
@RichRandall
Apr 21 2016 21:08
Hi, I'm stuck and wonder if someone can give me a clue! I can't figure out why my navbar hamburger menu doesn't open.
Stein-T Dale
@Lofthur
Apr 21 2016 21:11
@RichRandall you have to import jquery
@RichRandall Bootstrap need that to get the hamburger icon to work
Jasmina Babic
@animsaj
Apr 21 2016 21:12
@RichRandall in your settings, js part add jquery before bootstrap.js
Stein-T Dale
@Lofthur
Apr 21 2016 21:13
@animsaj haha you just beat me to it ;)
RichRandall
@RichRandall
Apr 21 2016 21:14
Hmm I thought I had
Jasmina Babic
@animsaj
Apr 21 2016 21:14
@Lofthur @RichRandall jquery has been added, but just the order was wrong :smile:
Stein-T Dale
@Lofthur
Apr 21 2016 21:14
Hi. I'll try here then. I just finished my Weather project and was woundering if someone could please take a look at it? http://codepen.io/Lofthur/pen/wGjXBE?editors=0010
RichRandall
@RichRandall
Apr 21 2016 21:14
Oh! Wow thanks. Would never have got that
Thanks @animsaj
CamperBot
@camperbot
Apr 21 2016 21:15
richrandall sends brownie points to @animsaj :sparkles: :thumbsup: :sparkles:
:star: 512 | @animsaj | http://www.freecodecamp.com/animsaj
Helicondeco
@Helicondeco
Apr 21 2016 21:17
@Lofthur its good man. gj
$(document).ready(function() {



  $(document).keypress(function(e) {
    if (e.which == 13) {
      search();
    }
  });

  <