These are chat archives for FreeCodeCamp/HelpFrontEnd

28th
Jan 2017
Chris Wingler
@chriswingler
Jan 28 2017 00:00
why is f.split not a function?

``` var f = data.main.temp * 9 / 5 - 459.67;
var c = data.main.temp - 273.15;

  console.log(f.split('.'))

```

Icah Banton
@remdata
Jan 28 2017 00:00
@moT01 . Yes. I am checking my code to see if I find out what's wrong.
Tom
@moT01
Jan 28 2017 00:03
@chriswingler try setting it to a variable first maybe
var s = f.split('.');
@remdata in your js, you try setting something to id quotetext, ...doesnt exist
change it to just quote, ...thats what your elements id was
Moisés Man
@moigithub
Jan 28 2017 00:06
@chriswingler split is a STRING method....
soo question is.. WHATS f ?
Tom
@moT01
Jan 28 2017 00:06
@remdata working for me
Chris Wingler
@chriswingler
Jan 28 2017 00:07
@moigithub thanks.. figured it out
CamperBot
@camperbot
Jan 28 2017 00:07
chriswingler sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 2620 | @moigithub |http://www.freecodecamp.com/moigithub
Jasmin Parent
@charlesdarkwind
Jan 28 2017 00:08
Anyone know why my bootstrap buttons are not being constrained to their parent container?
Moisés Man
@moigithub
Jan 28 2017 00:09
...IF u post some code.. how u doing.. probably u will get an answer....
@charlesdarkwind
Jasmin Parent
@charlesdarkwind
Jan 28 2017 00:10
Ah make sense
<div class="container-fluid footer text-center">
<h1>Around the web</h1>
<br>
<div class="btn-group">
<a class="btn btn-primary btn-block"><i class="fa fa-google-plus" aria-hidden="true">&nbsp Google Plus</i></a>
<a class="btn btn-primary btn-block"><i class="fa fa-youtube" aria-hidden="true">&nbsp YouTube</i></a>
<a class="btn btn-primary btn-block"><i class="fa fa-twitter" aria-hidden="true">&nbsp Twitter</i></a>
</div>
</div>
is compose mode for code?
Moisés Man
@moigithub
Jan 28 2017 00:20
..and what u mean by "constrained to their parent container" .. i see they still inside its "parent" @charlesdarkwind
https://i.gyazo.com/0a75414bd11839823dd1e8cbb6a47cf9.png
Jasmin Parent
@charlesdarkwind
Jan 28 2017 00:24
well some part of it appears outsise of my .footer if im not missin something http://imgur.com/a/ipLgL
@moigithub
Moisés Man
@moigithub
Jan 28 2017 00:26
remove the height property on ur footer class..then it will be "auto"
.. should "adapt" itself to its content
Jasmin Parent
@charlesdarkwind
Jan 28 2017 00:28
ok so it just coulndt fit in because it was too big?
Moisés Man
@moigithub
Jan 28 2017 00:28
:)
Jasmin Parent
@charlesdarkwind
Jan 28 2017 00:29
Thanks mate
Tyler Moeller
@TylerMoeller
Jan 28 2017 01:13
@remdata Change the URL you are using for your api to start with https://. It is currently starting with http://
Then your quote machine will work when you open your codepen via https://codepen.io/ibanton/pen/jyrNLj
You will then need to prevent caching of your API response or you will get the same quote every time - let us know if you need assistance with that.
Icah Banton
@remdata
Jan 28 2017 01:26
@TylerMoeller . How do I prevent caching of my API response?
kikykindagirl
@kikykindagirl
Jan 28 2017 01:31
Hi there! Can you recommend a site where i can read a little and find how to code scrolling webpage? :D
kikykindagirl
@kikykindagirl
Jan 28 2017 01:38
guess noone around
Tyler Moeller
@TylerMoeller
Jan 28 2017 01:39
@kikykindagirl Sorry, but what do you mean by "scrolling webpage"?
Maybe if you give a more specific example you can better better help :)
Good luck :+1:
kikykindagirl
@kikykindagirl
Jan 28 2017 01:41
hi @TylerMoeller ! :D i mean that you can access all the content of the site just by scrolling
rami90
@rami90
Jan 28 2017 01:41
@kikykindagirl w3school.com and go to jQuery section
@kikykindagirl you mean a one page website, that doesn't need any special code 😎
kikykindagirl
@kikykindagirl
Jan 28 2017 01:42
@rami90 thanks! that is what i was looking for!
CamperBot
@camperbot
Jan 28 2017 01:42
kikykindagirl sends brownie points to @rami90 :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @rami90 |http://www.freecodecamp.com/rami90
Tyler Moeller
@TylerMoeller
Jan 28 2017 01:42
@kikykindagirl We learn how to make those here at Free Code Camp. You just have to have enough content to make it a long page and then it will have scroll bars automatically that let you scroll down the page to see everything
rami90
@rami90
Jan 28 2017 01:45
@kikykindagirl you are most welcome, anyhow @TylerMoeller is right that page doesnt need any special code only HTML and you can add jQuery later which will scroll your page by clicking to specific divs or parts
kikykindagirl
@kikykindagirl
Jan 28 2017 01:47
@TylerMoeller @rami90 didnt knew that !
im at the build a personal portfolio challenge
and i need to build something similar to this: https://codepen.io/freeCodeCamp/full/YqLyXB
Tyler Moeller
@TylerMoeller
Jan 28 2017 02:01
Start here to build on the bootstrap that Free Code Camp has already taught: http://getbootstrap.com/components/
kikykindagirl
@kikykindagirl
Jan 28 2017 02:04
@TylerMoeller thank you !! <3
CamperBot
@camperbot
Jan 28 2017 02:04
kikykindagirl sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1420 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Albert L. C.
@sirus3020
Jan 28 2017 02:48
guys. where can i get APIs
ex the random quote
Jose Irizarry
@Stjose
Jan 28 2017 02:58
hi everyone
rami90
@rami90
Jan 28 2017 02:59
Hi
Jose Irizarry
@Stjose
Jan 28 2017 03:00
I working in my porfolio and i cna't get the imag to display can anyone see what I doing wrong.
I even added to the div
and still no work
Jose Irizarry
@Stjose
Jan 28 2017 03:07
I going to rest and start fresh tomorow
rami90
@rami90
Jan 28 2017 03:09
@Stjose the link is invalid it should end with .Jpg .ping ... etc
@Stjose if you can show me which photo you want from that site I can upload it to my hosting domain for you so you can use it in your codepen
Gulsvi
@gulsvi
Jan 28 2017 03:43
@sirus3020 Have you tried searching for quote APIs? There are a lot of them.
@Stjose <img alt="Computer Monster" src="http://www.vectorportal.com/img_novi/computer-alien.jpg">
jpchaufan
@jpchaufan
Jan 28 2017 03:48
is somebody able to help me with react?
Gulsvi
@gulsvi
Jan 28 2017 03:55
@jpchaufan Did you get your front end certificate already? :clap: I'm working on my quote machine now...
jpchaufan
@jpchaufan
Jan 28 2017 03:55
yea
did you need help with something?
Gulsvi
@gulsvi
Jan 28 2017 03:56
No I'm just learning it as I go, but thank you :)
Haven't talked to anyone who got a front end certificate yet
jpchaufan
@jpchaufan
Jan 28 2017 03:56
ah
yea well good luck to you. its fun huh? to get these cool projects done
Gulsvi
@gulsvi
Jan 28 2017 03:57
Hope my quote machine is good, I think I'll try it with materialize. So many look the same on codepen
rene-meda
@rene-meda
Jan 28 2017 03:57
Hi everyone! I was wondering if someone can help me format the table in this code, it works okay in browser, but on mobile the table goes way off screen:
https://codepen.io/greensoul/pen/xgPXPR?editors=1100
brb
jpchaufan
@jpchaufan
Jan 28 2017 04:01
@rene-meda it seems to work fine in my mobile inspector thing
@rene-meda maybe you can try adding the viewport meta tag into your html?
rene-meda
@rene-meda
Jan 28 2017 04:02
ah ok thx for the input !
Gulsvi
@gulsvi
Jan 28 2017 04:05
@rene-meda Maybe this will help? http://getbootstrap.com/css/#tables-responsive
You can put a div with class table-responsive around the table and it adds a scroll bar on smaller screens.
rene-meda
@rene-meda
Jan 28 2017 04:06
ah nice, that'd be helpful! thx for the help
rene-meda
@rene-meda
Jan 28 2017 04:18
Interesting because at first I thought putting the table div inside a divcontainer-fluid was going to do the trick, but it didnt....I replaced container-fluid with table-responsive, and it works !
Chiu Yong
@chiuyong
Jan 28 2017 04:18
@TylerMoeller how can I put this vertical line in the right of the navbar? http://tommusdemos.wpengine.com/demo-selector/?theme=Kubb
monkeyfingerz
@monkeyfingerz
Jan 28 2017 04:40
do you want to seperate elements or just have a verticle line?
@chiuyong
<ll style="display: inline;"> text</li>
@chiuyong
Chiu Yong
@chiuyong
Jan 28 2017 05:13
just verticle line @monkeyfingerz
Chris Wingler
@chriswingler
Jan 28 2017 05:28
just finished weather and wikipedia viewer projects today and i feel like a boss! thanks freecodecamp.
winroy
@winroy
Jan 28 2017 05:31
:point_up: January 28, 2017 12:02 AM @TylerMoeller thanks for that Tyler
CamperBot
@camperbot
Jan 28 2017 05:31
winroy sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1421 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Gulsvi
@gulsvi
Jan 28 2017 05:48
Random jokes anyone? :) http://codepen.io/skycoder/pen/LxOzBj
Would appreciate your feedback on ways to make it better - or if you know how to get random jokes that are more than one day old from the reddit API
Brittni Willett
@Willow606
Jan 28 2017 05:50
Anyone know where I can find sound files for making the simon game?
preferably that I can just link to?
Darth Skywalker
@adityaparab
Jan 28 2017 05:57
sound cloud?
Coy Sanders
@coymeetsworld
Jan 28 2017 06:01
@Willow606 in the challenge theres links to sounds provided, do those not work?
Brittni Willett
@Willow606
Jan 28 2017 06:01
I didn't see links there?
Coy Sanders
@coymeetsworld
Jan 28 2017 06:02
step 11:
Hint: Here are mp3s you can use for each button: https://s3.amazonaws.com/freecodecamp/simonSound1.mp3, https://s3.amazonaws.com/freecodecamp/simonSound2.mp3, https://s3.amazonaws.com/freecodecamp/simonSound3.mp3, https://s3.amazonaws.com/freecodecamp/simonSound4.mp3.
Brittni Willett
@Willow606
Jan 28 2017 06:02
oh haha so they are. Ty
Coy Sanders
@coymeetsworld
Jan 28 2017 06:02
np
Vishvesh
@V1shvesh
Jan 28 2017 06:12
Having problem in Finders Keepers Challenge
Any help possible?
Michael Karpinski
@karpimpski
Jan 28 2017 06:28
@V1shvesh I can help!
Brittni Willett
@Willow606
Jan 28 2017 08:25
@coymeetsworld they do ty just didn't see em
CamperBot
@camperbot
Jan 28 2017 08:25
willow606 sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 1970 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
Coy Sanders
@coymeetsworld
Jan 28 2017 08:25
you already said thanks lol @Willow606 (free point)
CamperBot
@camperbot
Jan 28 2017 08:25
coymeetsworld sends brownie points to @willow606 :sparkles: :thumbsup: :sparkles:
:cookie: 303 | @willow606 |http://www.freecodecamp.com/willow606
Kasmin Fernandes
@Kasmin23
Jan 28 2017 08:26
thank you @St3ps and @coymeetsworld
CamperBot
@camperbot
Jan 28 2017 08:26
kasmin23 sends brownie points to @st3ps and @coymeetsworld :sparkles: :thumbsup: :sparkles:
:cookie: 358 | @st3ps |http://www.freecodecamp.com/st3ps
:star2: 1971 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
Brittni Willett
@Willow606
Jan 28 2017 08:26
Can anyone peek at my code and test it? For some reason I can't get a delay between the colours/sounds when it's displaying the pattern
I'm working on the Simon game btw. :P
Coy Sanders
@coymeetsworld
Jan 28 2017 08:27
for what @Kasmin23 ?
Kasmin Fernandes
@Kasmin23
Jan 28 2017 08:27
the reply
Coy Sanders
@coymeetsworld
Jan 28 2017 08:27
? mustve been from days ago?
Darth Skywalker
@adityaparab
Jan 28 2017 08:33
@Willow606 you have codepen?
Brittni Willett
@Willow606
Jan 28 2017 08:33
yes I do. :)
@adityaparab yes I do. :)
Kasmin Fernandes
@Kasmin23
Jan 28 2017 08:33
logged in after a long vacay @coymeetsworld
Brittni Willett
@Willow606
Jan 28 2017 08:34
Darth Skywalker
@adityaparab
Jan 28 2017 08:34
@Willow606 lol.. then post it here :D
I see.. you did
Coy Sanders
@coymeetsworld
Jan 28 2017 08:34
ah ok @Kasmin23 you're welcome :D
Brittni Willett
@Willow606
Jan 28 2017 08:34
it happens when count gets to 2+
Darth Skywalker
@adityaparab
Jan 28 2017 08:37
taking a look
Brittni Willett
@Willow606
Jan 28 2017 08:40
kk
Muhammad Hasham
@MohammadHasham
Jan 28 2017 09:08
how can i remove space from above i have applied
body{
margin:0;
padding:0;
}
but still nothing is changing.
blob
Brittni Willett
@Willow606
Jan 28 2017 09:08
you could try adding negative margins?
Muhammad Hasham
@MohammadHasham
Jan 28 2017 09:09
@Willow606 Thanks
CamperBot
@camperbot
Jan 28 2017 09:09
mohammadhasham sends brownie points to @willow606 :sparkles: :thumbsup: :sparkles:
:cookie: 304 | @willow606 |http://www.freecodecamp.com/willow606
Brittni Willett
@Willow606
Jan 28 2017 09:09
more than welcome. :)
@adityaparab any luck?
Sorin Ruse
@sorinr
Jan 28 2017 09:21
@coymeetsworld a quick advice question. have an in production project working on laravel/mysql. want to try change it to node. postgres or mongo(or any other noSQL db)? my feelings tell me to choose postgres(much easier to port data from mysql) or go for a full refactoring of data layer using a noSQL db? any advice will be highly appreciated. thanks in advance
CamperBot
@camperbot
Jan 28 2017 09:21
sorinr sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 1972 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
Coy Sanders
@coymeetsworld
Jan 28 2017 09:26
heard so many discussions and companies moving from one to the other @sorinr I lost count :)
whats wrong with mySQL?
Sorin Ruse
@sorinr
Jan 28 2017 09:27
@coymeetsworld i imagine. so do i. :)
Coy Sanders
@coymeetsworld
Jan 28 2017 09:27
heres something from Uber where they chose to go away from postgres and into mySQL https://eng.uber.com/mysql-migration/
by no means a DB expert so can't comment much except parts of what I read. I have no exp in nosql yet but will once I get into backend projects
dont know anything about nosql and when a solution like that should be used
is there a reason you want to move away from mySQL?
anyone know why my background is repeating when say you resize the window to mobile size?
Sorin Ruse
@sorinr
Jan 28 2017 09:38
@coymeetsworld i don't have at all any experience using noSQL dbs eather. i want to move from mySQL from the point of view of transactions and also database/schema option that postgres it has. the app is an erp i designed at the beginning for one company. now i try to make it general for any company. a common db using a companyid field on all tables will go well with mysql. but if one clients need some future changes only for himself i will go in trouble using mysql. also the backup and recovery of data i anticipate to be a nightmare
@chungeric just add background-repeat: no-repeat; in css
Eric Chung
@chungeric
Jan 28 2017 09:43
@sorinr but then when i resize it, it leaves a white gap under the image
like the image doesn't scale with the screen
Sorin Ruse
@sorinr
Jan 28 2017 09:44
@chungeric thats the firs step. u said it repeats and we removed that. right? :)
Eric Chung
@chungeric
Jan 28 2017 09:44
@sorinr okay, but background-size: cover doesn't do it either
Sorin Ruse
@sorinr
Jan 28 2017 09:45
@chungeric try to add also background-position: center center;
Eric Chung
@chungeric
Jan 28 2017 09:46
@sorinr That made it worse :(
I don't get what's going on grr
Sorin Ruse
@sorinr
Jan 28 2017 09:48
@chungeric try it like:
body {
  min-height: 100vh;
  font-family: 'Roboto Slab', serif;
  color: #4D85D1;
  padding: 10px;
  font-size: 30px;
  background-image: url("http://static.pexels.com/photos/625/field-summer-sun-meadow.jpg");
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}
Coy Sanders
@coymeetsworld
Jan 28 2017 09:48
@sorinr if you developed something for a company are you able to give it out to others?
Sorin Ruse
@sorinr
Jan 28 2017 09:49
@coymeetsworld i want to share the same code only not the data
Coy Sanders
@coymeetsworld
Jan 28 2017 09:49
yeah but can you do that? Doesn't the company own it as IP?
Eric Chung
@chungeric
Jan 28 2017 09:50
@sorinr Ahhh you sir are awesome. Should've thought of that, thanks!
CamperBot
@camperbot
Jan 28 2017 09:50
chungeric sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1146 | @sorinr |http://www.freecodecamp.com/sorinr
gjergjk71
@gjergjk71
Jan 28 2017 09:58
Can someone tell me how to make decoration to none for <a> tag ?
Ghulam Shabir
@ghulamshabir
Jan 28 2017 09:58
text-decoration: none
Sorin Ruse
@sorinr
Jan 28 2017 09:59
@coymeetsworld no its a user->companies and companies->user relationship. what i mean is one company has many users but in the same time one user(specific ones) can also also have access to multiple companies. here an example to make u better understand my issue. userX create a profile for one or more companies so he will have access in all the companies he creates its just an admin for all these companies. the regular other users falls into the category for one company or the other but there is another kind of users like auditors(accountants) that need access to data from certain companies his/her audits but ofc this user has lower privileges then userX(the super user) . hope you got what i mean
gjergjk71
@gjergjk71
Jan 28 2017 10:00
aside a {
text-decoration: none;
}
I have inside <aside> a h3 element wich is nested with <a> and when I try this doesn't work
Coy Sanders
@coymeetsworld
Jan 28 2017 10:01
ah I see, so you need databases to be able to communicate with each other then
we use postgres at work, and at least the older versions from years ago it was a difficult issue, not sure if its easier now
we moved from DB2 to Postgres to save money as we needed a license for DB2
but when we did that we also changed alot of the schema, instead of one large database we stored data in several
but we couldn't perform any queries that joined data from multiple ones with what Engineering provided us, so I had to rewrite alot of legacy scripts
something to look at I guess
Sorin Ruse
@sorinr
Jan 28 2017 10:05
@coymeetsworld not necessary the dbs have to comunicate between them but i don't wanna duplicate same common data between them like measure units, cities, regions, countries, etc things like that
Coy Sanders
@coymeetsworld
Jan 28 2017 10:06
my information may be outdated, or its just Engineering didn't add a specific feature to postgres that would've resolved my issue. Regardless it was easy enough to work around as the joining logic would go into the scripts. Kind of annoying as it made the scripts longer but it was doable
but if theres common data I'm guessing it has to be shared right?
Sorin Ruse
@sorinr
Jan 28 2017 10:09
@coymeetsworld yes. don't know if a combination of using both mongo for shared "fixed" data and postgres will have some benefits
Coy Sanders
@coymeetsworld
Jan 28 2017 10:16
would be nice to just use one solution for all the needs somehow @sorinr, but yeah this isn't something I work on really
I don't work on db design, and after one of our many reorgs we don't even do the troubleshooting on them anymore haha
Sorin Ruse
@sorinr
Jan 28 2017 10:19
@coymeetsworld i understand that but have any idea what was your worst problem encountered using postgres/
Coy Sanders
@coymeetsworld
Jan 28 2017 10:21
we used a clustered solution, so only issues revolved around postgres nodes going out of sync
Sorin Ruse
@sorinr
Jan 28 2017 10:22
@chungeric welcome. sorry for the late reply :)
Coy Sanders
@coymeetsworld
Jan 28 2017 10:22
you may not need a clustered solution if the usage is minimal, we have enterprise applications with needs to perform many transactions
Sorin Ruse
@sorinr
Jan 28 2017 10:28
@coymeetsworld yes the usage its not a heavy one. i would say medium. but what do you mean it went out of sync? in what circumstances?
Coy Sanders
@coymeetsworld
Jan 28 2017 10:35
various reasons, at first we were virtualizing them which wasn't a great idea, we built out standalone servers that could handle network traffic.
don't know too much else about it but odds are they're probably not issues you are going to face in early stages
Sorin Ruse
@sorinr
Jan 28 2017 10:39
@chungeric just try to round your temp to an integer. u would not see temps like 1.6 in other apps
@coymeetsworld thank you a lot for all ur support
CamperBot
@camperbot
Jan 28 2017 10:41
:star2: 1973 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
sorinr sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
Coy Sanders
@coymeetsworld
Jan 28 2017 10:41
np @sorinr good luck w/ the project sounds interesting
Sorin Ruse
@sorinr
Jan 28 2017 10:45
@coymeetsworld as the actual app its working just fine for this client for the moment i feel no pressure so i can experiment :)
Coy Sanders
@coymeetsworld
Jan 28 2017 10:49
nice @sorinr well that works
take time and research different solutions, better to do planning now than correct things in production
Sorin Ruse
@sorinr
Jan 28 2017 10:51
@coymeetsworld lol. i know what means correcting problems for apps in production :)
Brittni Willett
@Willow606
Jan 28 2017 10:53
Would either of you be willing to look at my code? I know the problem I just have no idea how to fix it. As you'll be able to see I've tried. It's with the last set of functions... if you test it you'll see when you get to 2 and up that they go off at the same time. -.-
Rishav upadhayay
@Rish-hap
Jan 28 2017 11:28
I am using a container class in it a row then 3 equal size collumn classes. With one class having a long word()Whereas other two just having few words each.. the problem is that the paragraph is coming out of collumn

that long word is comming oout of collum any way to fix this??

Hh
badalsaibo
@heyDante
Jan 28 2017 11:32
@Rish-hap wrap it inside a container
Rishav upadhayay
@Rish-hap
Jan 28 2017 11:33
That specific collumn class into a container?
badalsaibo
@heyDante
Jan 28 2017 11:33
your whole three columns
to be nested inside a container class
Nitin Chandran Nair
@NitinNair89
Jan 28 2017 11:33
something wrong with your grid. The text does not come out if grid is correct
Brittni Willett
@Willow606
Jan 28 2017 11:34
anyone on: http://codepen.io/Willow606/pen/apVLWZ ?? after the count is 2 it plays each part of the pattern at the same time. I can't seem to get them to space out...
Rishav upadhayay
@Rish-hap
Jan 28 2017 11:35
All three collumn are in a row and that row is in a container..
Nitin Chandran Nair
@NitinNair89
Jan 28 2017 11:35
@Rish-hap Code pls?
Rishav upadhayay
@Rish-hap
Jan 28 2017 11:36
<body>
<div class="container">
<div class="row row-eq-height">
<div class="col-md-4 p1">
<p>qwertyuiop;lkjhgfdsaxcvbnm,llkjhgfdwertyuikmnbvcdsertyujnbvcdsertyujhbvdseryjnbvcsweryjbvcsertyjnbvcswerthjnbvcswertyjnbvcswerthjnbvcxsertyjnbvcdsertyujnbvcdswerthbvcdsertyjnbvcswertyjnbvcsertyjnbvcsertyjnbvcasdfghjkjhgfdsasdfghjkjhgfdsasdfghjkjhgfdsa</p>
</div>
<div class="col-md-4 p2">
<p>hey</p>
</div>
<div class="col-md-4 p4">
<p>hey</p>
</div>
</div>
</div>
</body>
Is it because its a long word rather than being a sentence with spaces and all coz it works fine when i introduce spaces between the word???
Brittni Willett
@Willow606
Jan 28 2017 11:39
@Rish-hap then probably
Ajith
@ajithvallabai
Jan 28 2017 11:40
hi could anyone check code :Simons game - i know there is a problem with my setInterval() function but i dont know how to fix it http://codepen.io/indian46/pen/JEJwwN?editors=0010
Nitin Chandran Nair
@NitinNair89
Jan 28 2017 11:52
@Rish-hap What's the css for row-eq-height and p*?
Rishav upadhayay
@Rish-hap
Jan 28 2017 11:54
P* for bcxkground color and text color and with row-eq-height i was trying for equal heights of 3 collumns
Nitin Chandran Nair
@NitinNair89
Jan 28 2017 11:56
can you remove those classes and see if the overflow still happens for your paragraph?
do you have codepen link? @Rish-hap
Chinmaya B
@sharang108
Jan 28 2017 12:03
What's the problem with my code
    $("#get_quote").on("click",function(){
    $("#main_block").html("<h1>It works!</h1>");
  });
</script>

<div class="jumbotron" id="banner">
  <h1 class="text-center">Random Quote Machine</h1>
</div>

<div class="container">
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
      <div class="jumbotron" id="main_block">
        <p class="panel panel-body"></p>
       </div>
      <form>
        <div class="row">
          <div class="col-md-12 col-md-offset-5">
            <button id="get_quote" class="btn btn-inverse">Get New Quote</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

``` <script>
$("#get_quote").on("click",function(){
$("#main_block").html("<h1>It works!</h1>");
});
</script>

<div class="jumbotron" id="banner">
<h1 class="text-center">Random Quote Machine</h1>
</div>

<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="jumbotron" id="main_block">
<p class="panel panel-body"></p>
</div>
<form>
<div class="row">
<div class="col-md-12 col-md-offset-5">
<button id="get_quote" class="btn btn-inverse">Get New Quote</button>
</div>
</div>
</form>
</div>
</div>
</div>

Nitin Chandran Nair
@NitinNair89
Jan 28 2017 12:05
@sharang108 What error you get?
Chinmaya B
@sharang108
Jan 28 2017 12:06
@NitinNair89 Well there is no error the code pen reloads and then a blank output screen whatsoever static things are all gone.
Sorin Ruse
@sorinr
Jan 28 2017 12:07
@sharang108 try to put your js <script></script> code after html code. when loading page the html its not yet defined so the $("#get_quote").on("click",function(){ its not knowing what element you talking about
@sharang108 hope it makes sense
Chinmaya B
@sharang108
Jan 28 2017 12:09
@sorinr Well yeah that is one mistake but it's still not working http://codepen.io/sharang108/pen/ggXgBb
Vasile Botnaru
@VasileBotnaru
Jan 28 2017 12:10
 $(document).ready(function () {
   ...
    });
gjergjk71
@gjergjk71
Jan 28 2017 12:10
How to set max-height for col-md-4
Sorin Ruse
@sorinr
Jan 28 2017 12:11
@sharang108 in pen settings->javascript add jquery library
c0d0er
@c0d0er
Jan 28 2017 12:11
does anybody know why i click clear button, the state doesnt change? why the generation doesnt change to 0 even i set gen=0? http://codepen.io/c0d0er/pen/apLNPV?editors=0010
Ayush Bahuguna
@relentless-coder
Jan 28 2017 12:12
how to override predefined inline-style with my own inline style?
Vasile Botnaru
@VasileBotnaru
Jan 28 2017 12:12
@relentless-coder why would you do that?
Chinmaya B
@sharang108
Jan 28 2017 12:12
@sorinr @NitinNair89 Okay I changed settings
Nitin Chandran Nair
@NitinNair89
Jan 28 2017 12:12
ok
gjergjk71
@gjergjk71
Jan 28 2017 12:13
How to set max-height for col-md-4 ?
Brittni Willett
@Willow606
Jan 28 2017 12:13
https://www.freecodecamp.com/willow606/front-end-certification ^^ ty to all those who've helped me along the way!!
Chinmaya B
@sharang108
Jan 28 2017 12:13
I think missing $(.document).ready() thing is affecting the code
Ayush Bahuguna
@relentless-coder
Jan 28 2017 12:13
@VasileBotnaru because I am using graph library and it is setting it's own inline styles on page load.
Ajith
@ajithvallabai
Jan 28 2017 12:13
@Willow606 are you there?
Vasile Botnaru
@VasileBotnaru
Jan 28 2017 12:14
@relentless-coder ok, i don't know, anyone knows how?
Sorin Ruse
@sorinr
Jan 28 2017 12:14
@sharang108 move what you have between <style></style> within the js panel of codepen
Vasile Botnaru
@VasileBotnaru
Jan 28 2017 12:14
@relentless-coder what does google say?
Brittni Willett
@Willow606
Jan 28 2017 12:15
@ajithvallabai yep
Chinmaya B
@sharang108
Jan 28 2017 12:16
@sorinr Once again its not working http://codepen.io/sharang108/pen/ggXgBb
Ajith
@ajithvallabai
Jan 28 2017 12:17
yellowSound(); (in line 123) , simonPattern(); reStart(); (in line 127-129) turnOn(); These functions should be declared before its usage see the colour of those functions.so i think this might be your issue
Sorin Ruse
@sorinr
Jan 28 2017 12:17
@sharang108 its working.take a look at the example
Ayush Bahuguna
@relentless-coder
Jan 28 2017 12:17
@VasileBotnaru google tells me to write my own inline styles, but they are not working. they did once, but then I refreshed the page and it was all gone
Nitin Chandran Nair
@NitinNair89
Jan 28 2017 12:18
@relentless-coder How are you adding inline styles? can you show?
Vasile Botnaru
@VasileBotnaru
Jan 28 2017 12:18
@relentless-coder <tag style="">?
Ajith
@ajithvallabai
Jan 28 2017 12:20
@Willow606 the color of those functions didnt change when you have used it there might be issue in it . but i am not sure of it
gjergjk71
@gjergjk71
Jan 28 2017 12:20
Can someone please help me . I can set max-width to a col-md4 but not a max-height property How can I set height to a column ?
Sorin Ruse
@sorinr
Jan 28 2017 12:20
@sharang108 when u use <form> tag and not giving an action to it its better to prevent the form submission and deal by yourself to it
playingwithinfinity
@playingwithinfinity
Jan 28 2017 12:22
How do I check which Bootstrap version I have?
Sorin Ruse
@sorinr
Jan 28 2017 12:23
@playingwithinfinity how do you load bootstrap?
playingwithinfinity
@playingwithinfinity
Jan 28 2017 12:24
@sorinr You include it in your html file
Sorin Ruse
@sorinr
Jan 28 2017 12:24
@playingwithinfinity i know that. whats ur link ur using now?
Chinmaya B
@sharang108
Jan 28 2017 12:24
@sorinr Now its showing some errors
playingwithinfinity
@playingwithinfinity
Jan 28 2017 12:24

Like this :

<link href = "css/bootstrap.min.css" rel = "stylesheet" type = "text/css">

That is, if you downloaded it.

@sharang108 I don't think you can add <h1> inside <p>
Try just replacing without any <p> or <h1>.
Like $("#mblock").html("It works!");
And your document ready function has bracket problems
Make sure you have proper ending and closing brackets
Sorin Ruse
@sorinr
Jan 28 2017 12:28
@sharang108 the problem is in your doc.ready opening and closing function. if you remove that your on.("click" function will work just fine :)
Brittni Willett
@Willow606
Jan 28 2017 12:28
@ajithvallabai it was all working when I tested it before submitting it
@ajithvallabai but ty
Sorin Ruse
@sorinr
Jan 28 2017 12:29
@playingwithinfinity are you working locally and you have the bootstrap.css downloaded to your pc or you just wanna link it from internet?
Ajith
@ajithvallabai
Jan 28 2017 12:29
@Willow606 :)
Mayur
@mayurpande
Jan 28 2017 12:30
Hi everyone! Hope all your Saturdays are going well. I have a quick question for anyone who has completed the FCC portfolio project. As the webpage makes use of a scrolling nav, if I were to add a blog (probably wordpress) to it would I just add an external link to the blog in the nav li items. Or is it worth me not using the scrolling nav?
Ajith
@ajithvallabai
Jan 28 2017 12:31
@Willow606 congrats you got it . for me i need to complete simons game
Brittni Willett
@Willow606
Jan 28 2017 12:31
@ajithvallabai it was so intimidating! (>.<)
Chinmaya B
@sharang108
Jan 28 2017 12:32
It works! :D
So in code pen I don't have to write document.write???
@sorinr
Sorin Ruse
@sorinr
Jan 28 2017 12:33
@sharang108 you mean document ready ? its not absolutely necessary.
Ajith
@ajithvallabai
Jan 28 2017 12:33
@Willow606 i have less humor
Chinmaya B
@sharang108
Jan 28 2017 12:34
@sorinr So where was the problem?
What was the problem*
Brittni Willett
@Willow606
Jan 28 2017 12:34
@ajithvallabai all I can say is that larger things are easier to test and debug with as many functions as you can. :P
Sorin Ruse
@sorinr
Jan 28 2017 12:36
@sharang108 think it was a correct opening-closing doc.ready function
Chinmaya B
@sharang108
Jan 28 2017 12:36
You mean missing '{' I resolved that error
Ajith
@ajithvallabai
Jan 28 2017 12:36
@Willow606 will wait for the right test to take :)
Chinmaya B
@sharang108
Jan 28 2017 12:36
@sorinr Thanks
CamperBot
@camperbot
Jan 28 2017 12:36
sharang108 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1147 | @sorinr |http://www.freecodecamp.com/sorinr
gjergjk71
@gjergjk71
Jan 28 2017 12:39
shitty tho' haha
Sorin Ruse
@sorinr
Jan 28 2017 12:45
@gjergjk71 nope its quite something else of what i've seen before but you have to improve things :) like the color of your title and after make your biography bootstrap grid responsive coz the way u did it its not
Chinmaya B
@sharang108
Jan 28 2017 12:52
@sorinr I have one more problem
Sorin Ruse
@sorinr
Jan 28 2017 12:52
@sharang108 whats that problem holding u back?
Chinmaya B
@sharang108
Jan 28 2017 12:54
@sorinr No Quote Updation How do I update quote on each onclick event?
@sorinr The Quote API I use is https://quotesondesign.com/api-v4-0/
gjergjk71
@gjergjk71
Jan 28 2017 12:59
@sorinr thanks for the feedback :)
CamperBot
@camperbot
Jan 28 2017 12:59
gjergjk71 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1148 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jan 28 2017 13:05
@sharang108 I think you are not calling the api the right way. take a look at its documentation:http://quotesondesign.com/the-api/
Chinmaya B
@sharang108
Jan 28 2017 13:11
@sorinr I am handling JSON API for the first time
SO I don't understand it, is there any easier options?
option*
Sorin Ruse
@sorinr
Jan 28 2017 13:14
@sharang108 i know. just try to understand how to make an api call and how to interpret the response you get from the api . even if you struggle with it first time it will help you know how to deal this kind of things in the future.
@sharang108 it will not help you if i give a full solution
Chinmaya B
@sharang108
Jan 28 2017 13:15
@sorinr so there is no easier API
Sorin Ruse
@sorinr
Jan 28 2017 13:19
@sharang108 an api its just an api. you send requests to it and you get responses from it. if you send the wrong questions you get wrong or no answer. so, just read the api docs. any api have docs with examples on how you can use it
Fabio Di Pane
@saylos
Jan 28 2017 13:21
Hi guys, I need some hints with my Wikipedia Viewer..I'm a little confused..thanks
https://codepen.io/saylos/pen/ygoGEW?editors=0010
Chinmaya B
@sharang108
Jan 28 2017 13:21
@sorinr So reloading is a jQuery issue right how do i address that issue?
Fabio Di Pane
@saylos
Jan 28 2017 13:22
consider that this is just a skeleton..I'm just trying to make the api request work
Sorin Ruse
@sorinr
Jan 28 2017 13:24
@sharang108 in pen settings->javascript tab load jquery :) if thats the problem
Tariyel Hamidov
@tariellaelius
Jan 28 2017 13:26
coko100
@coko100
Jan 28 2017 13:47
Chinmaya B
@sharang108
Jan 28 2017 13:49
@sorinr No i mean resending request to json api after on-click event
Fabio Di Pane
@saylos
Jan 28 2017 13:51
@tariellaelius I don't understand how to use it, and in the FCC example it uses Angular and Ajax..I don't get how it works, and in the example it doesn't use User-Agent
Archit Chandra
@architchandra
Jan 28 2017 13:54

Hi. Technically, I’ve completed the Basic front-end projects’ ‘Build a tribute page’ exercise, but there were a couple of things that troubled me when I was working on it.

Link to pen: http://codepen.io/architchandra/pen/apmdWP/

  1. In a div, there was some extra space between the content and the padding (probably some other element creating it) which I couldn’t remove.
  2. Inside the quote div, I inserted a footer element to cite the author, but when I was using footer.quote, no style was being applied but it was being applied when I just used footer. This was giving me results contrary to my understanding of CSS specificity.

If anyone would be kind enough to go through the code (marked in the code in the form of comments) and help me understand why these things were happening, I’ll be very grateful.

Thanks!

@coko100 Looks pretty decent. :+1:
Tariyel Hamidov
@tariellaelius
Jan 28 2017 14:05

@saylos Let me give you an example of how to do it with jQuery. This is from the Wikipedia API documentation:

$.ajax( {
    url: remoteUrlWithOrigin,
    data: queryData,
    dataType: 'json',
    type: 'POST',
    headers: { 'Api-User-Agent': 'Example/1.0' },
    success: function(data) {
       // do something with data
    }
} );

url should be the API url, followed by parameters, An example with the english-language wikipedia would be something like this: https://en.wikipedia.org/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json. The https://en.wikipedia.org/w/api.php? part stays the same for every request, but the parameters that follow it should be built up as a string for every request individually. Or you could include the parameters with data property. Another important thing is the success function. It is called automatically when the response arrives from the api for that request. Here, data that is automatically passed to the success function is the json response that you can use.

One more thing, if the json response isn't returned, try adding origin=* to the list of parameters.
Fabio Di Pane
@saylos
Jan 28 2017 14:13
@tariellaelius ok thanks, so in the end I have to learn about ajax, in the last challenge I tryied to avoid it, trying learn better how to use getJSON methods etc.
CamperBot
@camperbot
Jan 28 2017 14:13
saylos sends brownie points to @tariellaelius :sparkles: :thumbsup: :sparkles:
:cookie: 280 | @tariellaelius |http://www.freecodecamp.com/tariellaelius
Imran Mondal
@imondal007
Jan 28 2017 14:19
Guys please give me your valuable feedback on my local wether app http://weather-app-fcc.surge.sh/ :clap:
Tariyel Hamidov
@tariellaelius
Jan 28 2017 14:20
@saylos Actually, I completed this project without going deep into ajax. Just use the example and build correct request strings. Wikipedia API sandbox is a great place to practice ;)
Fabio Di Pane
@saylos
Jan 28 2017 14:21
@tariellaelius :+1: hope to finally see the light at the end of the tunnel :smile:
Tariyel Hamidov
@tariellaelius
Jan 28 2017 14:22
@saylos Good luck!
@imondal007 It looks nice and neat. Good job! Only on small screen sizes it behaves a bit strangely. And I guess you need to provide a way to switch between Celsius and Fahrenheit degrees.
Imran Mondal
@imondal007
Jan 28 2017 14:27
@tariellaelius thanks mate, I am improving on mobile view
CamperBot
@camperbot
Jan 28 2017 14:27
imondal007 sends brownie points to @tariellaelius :sparkles: :thumbsup: :sparkles:
:cookie: 281 | @tariellaelius |http://www.freecodecamp.com/tariellaelius
Steven Failla
@Stevo99
Jan 28 2017 14:57
can someone please take a look at my code and tell me why portfolio is centered. I cant figure it out. https://codepen.io/Stevo914/pen/VPWXNK?editors=1100#0
the text category "Portfolio"
3rd section down
Nitin Chandran Nair
@NitinNair89
Jan 28 2017 15:01
you did not add your usual <div class="row"> <div class="col-md-4"> to the portfolio section. Why?
Also your HTML is messed up. Remove all the stuff like <link> and <meta> tags and do those under your pen's settings. @Stevo99 This won't solve the error. But fixing your boostrap grid would
Steven Failla
@Stevo99
Jan 28 2017 15:03
ohh. not really sure why but now it makes perfect sense. @NitinNair89 thanks appreciate the help
CamperBot
@camperbot
Jan 28 2017 15:03
stevo99 sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 383 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
alexg1990
@alexg1990
Jan 28 2017 15:04

I am trying to change my text on-click, but it is somehow not working. I double checked and compared it to the exercise "change text with click events" but still can't find the problem, help is very much appreciated!!

http://codepen.io/alexg1990/pen/YNELNX

Steven Failla
@Stevo99
Jan 28 2017 15:04
1 quick question ive been using the quick start function by typing doc then tabbing and thats the format it gives you but i guess thats probably more for web stuff
why does it include those
Nitin Chandran Nair
@NitinNair89
Jan 28 2017 15:09
@alexg1990 Since you are using jQuery, the correct function would be -
  $("#quote-text").html("Here is quote number2");
alexg1990
@alexg1990
Jan 28 2017 15:09
@NitinNair89 thank you! When would I be using "innerHTML"?
CamperBot
@camperbot
Jan 28 2017 15:09
alexg1990 sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 384 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Nitin Chandran Nair
@NitinNair89
Jan 28 2017 15:12
@alexg1990 You use it when doing it via plain javascript -
document.getElementById('quote-text).innerHTML = "Here is quote number2";
alexg1990
@alexg1990
Jan 28 2017 15:15
@NitinNair89 makes sense. Thank you!
CamperBot
@camperbot
Jan 28 2017 15:15
alexg1990 sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:warning: alexg1990 already gave nitinnair89 points
Steven Failla
@Stevo99
Jan 28 2017 15:18
@NitinNair89 I made those changes but its still centered. idk i'm stuck on this still. https://codepen.io/Stevo914/pen/VPWXNK?editors=1100#0
Nitin Chandran Nair
@NitinNair89
Jan 28 2017 15:19
checking..
which section you referring to?
Steven Failla
@Stevo99
Jan 28 2017 15:20
portfolio is still centered..
3rd section down
Nitin Chandran Nair
@NitinNair89
Jan 28 2017 15:21
this one? - <div class="background3" id="page3">
Steven Failla
@Stevo99
Jan 28 2017 15:21
yes
Nitin Chandran Nair
@NitinNair89
Jan 28 2017 15:21
it is appearing similar to "about" and "contact info" text
Steven Failla
@Stevo99
Jan 28 2017 15:22
right and there aligned left
maybe a small mistake
Nitin Chandran Nair
@NitinNair89
Jan 28 2017 15:22
so how do you want it to be?
Steven Failla
@Stevo99
Jan 28 2017 15:24
ok when i typed "About" and "Contact Info" they automatically appeared to the left. and I used the same code for Portfolio and it is in the center but i want it on the left
Nitin Chandran Nair
@NitinNair89
Jan 28 2017 15:24
i see it on the left only
Steven Failla
@Stevo99
Jan 28 2017 15:25
oh in my pen its still centered maybe just refresh?
Nitin Chandran Nair
@NitinNair89
Jan 28 2017 15:25
yeah try
abhijith shenoy
@shenoyabhijith
Jan 28 2017 15:26
Any body here knows android?
programming
Steven Failla
@Stevo99
Jan 28 2017 15:27
nope nothin. when i check it in the chat it looks on the left cause its soo small but full size its centered
opinions?
Nitin Chandran Nair
@NitinNair89
Jan 28 2017 15:28
blob
@Stevo99
Steven Failla
@Stevo99
Jan 28 2017 15:30
hmm diff on my comp.. @NitinNair89 thanks
CamperBot
@camperbot
Jan 28 2017 15:30
stevo99 sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:warning: stevo99 already gave nitinnair89 points
Janina Pohorecki
@janepohorecka
Jan 28 2017 16:34
Hey guys!! I have a quick question for you!! Why is it when I put "position: fixed" the contents within this are suddenly moved?
Example: The header on this website I am making --->
If you go into the console and change it from position: fixed it looks way, way better.
Steven Failla
@Stevo99
Jan 28 2017 16:37
@NitinNair89 hey i figured it out my bootstrap grid was very messed up i straightened it all out and now it works fine. thanks again for your help
CamperBot
@camperbot
Jan 28 2017 16:37
stevo99 sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 385 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Nitin Chandran Nair
@NitinNair89
Jan 28 2017 16:37
Well done @Stevo99 :+1:
Janina Pohorecki
@janepohorecka
Jan 28 2017 16:40
The justify-content: space-between is removed and I am not sure why..
Steven Failla
@Stevo99
Jan 28 2017 17:07
@NitinNair89 check it out now https://codepen.io/Stevo914/full/VPWXNK/
alpox
@alpox
Jan 28 2017 17:14
@janepohorecka fixed means it stays where it is and doesn't care about the scroll position
Bikal Khawas
@bikalkhawas
Jan 28 2017 17:14
After the search result, I don't want my text underline on hover...I tried (text-decoration:none) but didn't seem to work. Any help will be appreciated, Thank you. http://codepen.io/bikal/pen/bgrRmr
Janina Pohorecki
@janepohorecka
Jan 28 2017 17:15
@alpox Right, I understand that. But within the contents of the div that I have made fixed, the justify content space between has been removed ruining my layout and I don't know why..
alpox
@alpox
Jan 28 2017 17:16
@janepohorecka Do you have a pen?
Janina Pohorecki
@janepohorecka
Jan 28 2017 17:16
Janina Pohorecki
@janepohorecka
Jan 28 2017 17:24
@alpox do you mind helping me figure this out?
Tom
@moT01
Jan 28 2017 17:25
@janepohorecka its cause your container shrinks or something
alpox
@alpox
Jan 28 2017 17:26
@moT01 is right @janepohorecka
Tom
@moT01
Jan 28 2017 17:26
add min-width: 80%; to your header
Janina Pohorecki
@janepohorecka
Jan 28 2017 17:26
@moT01 y is it because the "space-between" is removed?
alpox
@alpox
Jan 28 2017 17:26
@janepohorecka You have to set the header to width: 100%;
Tom
@moT01
Jan 28 2017 17:26
that is not removed
it just has less space to work with
alpox
@alpox
Jan 28 2017 17:27
@janepohorecka If you take the element out of the page flow with position: fixed; it doesn't behave as normally and doesn't automatically expand to its parents anymore.
Janina Pohorecki
@janepohorecka
Jan 28 2017 17:30
The layout still looks wacky when I apply these changes. @alpox
The li elements are off the page and my hamburger menu does not appear at a small screen size
@alpox
alpox
@alpox
Jan 28 2017 17:32
@janepohorecka Where exactly should it be? Totally right or have some space to the right?
@janepohorecka If you want it to align to the right, apply box-sizing: border-box;
r2d2
@UsamaHameed
Jan 28 2017 17:33
Can anyone explain what the spread operator does?
pratfallbat
@pratfallbat
Jan 28 2017 17:33
@janepohorecka Hi there! do you happen to use ruby?
Janina Pohorecki
@janepohorecka
Jan 28 2017 17:34
@alpox Ok, the border box helps! However, my hamburger menu is not present when I make my webpage small :/
@pratfallbat I do not use Ruby.
alpox
@alpox
Jan 28 2017 17:36

@UsamaHameed It expands an expression into another.
Means in case of when you use the spread operator in a parameter list as:
function(...params) the variable params will hold all the arguments passed to the function as an array.

If you then want to call another function which takes a number of arguments, but not in array format - but you have an array - you can use the spread operator to apply the values in the array each as if you would seperate them with a simple commata.
someFuncCall(...params);

Philipp Scholz
@philipp32
Jan 28 2017 17:36

Hey fellow campers. I hope you are doing well. :)

<div class = "article-container" id = "article1"></div>
<div class = "article-container" id = "article2"></div>
<div class = "article-container" id = "article3"></div>
<div class = "article-container" id = "article4"></div>
<div class = "article-container" id = "article5"></div>

function(jsonData){
  console.log(jsonData);  
   for (var i=0; i<6; i++){
     // output div ist article[i]
     var output = $("#article"+i);     
    output.innerHTML = jsonData[1][i];
   } 
})// end of JSON function

This function is supposed to go through the JSON data and put the first 5 results into the according divs. It doesn't do that. I suppose that either i isn't counting upward or that this selector

var output = $("#article"+i);

is not right. What do I have to do to make it work?

alpox
@alpox
Jan 28 2017 17:36
If params is [1,2,3] this would be equivalent to calling someFuncCall(1, 2, 3) @UsamaHameed
pratfallbat
@pratfallbat
Jan 28 2017 17:36
@janepohorecka what do you use in backend then? how long have you been coding?
Janina Pohorecki
@janepohorecka
Jan 28 2017 17:37
@pratfallbat haven't started doing backend stuff just yet :P
pratfallbat
@pratfallbat
Jan 28 2017 17:39
okay but i started from backend and now i am learning frontend
r2d2
@UsamaHameed
Jan 28 2017 17:39
@alpox I was reading here. It makes perfect sense. Wish I had known about it earlier. A lot of functionality in three dots. :P It could have saved a lot of my time el o el.
pratfallbat
@pratfallbat
Jan 28 2017 17:39
@janepohorecka i am leaning both at the same time now which is crazy :smile:
alpox
@alpox
Jan 28 2017 17:39
@philipp32 Both what you said is right though.
You have another problem. The variable output is a jQuery object (value) and not a normal DOM object.
You wanna use output.html(jsonData[1][i]); instead since .innerHTML doesn't exist on a jQuery object.
Ghulam Shabir
@ghulamshabir
Jan 28 2017 17:40
@TylerMoeller hey :smile: , could you please tell which mobile are you using ? and which orientation landscape ? so I can adjust css media queries for your mobile screen size. And could you tell me how can I force mobile browser not to do text-scaling ? my mobile's text-scaling is set to 100% by default which causes it overlap the text in the form. I can set it to 50% (the browser does not allow less than that) which solves the problem of overlapping but I want to do it in css or js so users don't have to set it manually.
alpox
@alpox
Jan 28 2017 17:40
@UsamaHameed Yup thats often seen as this. Anyways, i don't use it so often, since its not yet available in all browsers. Maybe with polyfills.
At least the object spread operator is nowhere yet. Maybe the function spread is
(Array spread)
Philipp Scholz
@philipp32
Jan 28 2017 17:41
@alpox What can I do to solve the first two problems?
alpox
@alpox
Jan 28 2017 17:41
@UsamaHameed Maybe also look into destructuring if you are already interested in ES6 features :-)
@philipp32 They are no problems. The code there is right :-)
r2d2
@UsamaHameed
Jan 28 2017 17:41
Isn't spread operator from ES5? @alpox
alpox
@alpox
Jan 28 2017 17:42
@philipp32 Now you changed something else :D
Philipp Scholz
@philipp32
Jan 28 2017 17:42
@alpox thank you. Works now
CamperBot
@camperbot
Jan 28 2017 17:42
:cookie: 751 | @alpox |http://www.freecodecamp.com/alpox
philipp32 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
alpox
@alpox
Jan 28 2017 17:42
@philipp32 Ah good
r2d2
@UsamaHameed
Jan 28 2017 17:43
what is ECMAScript2015? @alpox
ES5?
alpox
@alpox
Jan 28 2017 17:45
@UsamaHameed No thats ES6
Janina Pohorecki
@janepohorecka
Jan 28 2017 17:46
@alpox I definately want my header to have a max-width of 1300px, not 100%
r2d2
@UsamaHameed
Jan 28 2017 17:47
@alpox thanks :)
CamperBot
@camperbot
Jan 28 2017 17:47
usamahameed sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 752 | @alpox |http://www.freecodecamp.com/alpox
Tyler Moeller
@TylerMoeller
Jan 28 2017 17:49
@ghulamshabir I have several, but haven't run into any text scaling issues with forms on mobile devices. Not sure how to help with text scaling... There is a CSS property called text-size-adjust but it isn't supported on all browsers yet.
One thing I often run into is the browser zooming in on the text field when you tap it - usually setting the field's font size to 16px prevents that from happening.
Ghulam Shabir
@ghulamshabir
Jan 28 2017 17:52
@TylerMoeller yeah I tried text-size-adjust but no luck, oh nice I needed that tip for the text field zoom in :smile:
alpox
@alpox
Jan 28 2017 17:52
@janepohorecka Then do that :D
Janina Pohorecki
@janepohorecka
Jan 28 2017 17:53
@alpox I try but the list items are not all visible. They obviously moved outside the window.
alpox
@alpox
Jan 28 2017 17:55

@janepohorecka

    max-width: 1300px;
    width: 100%;

Does that help?

It says it should make it 100% but 1300px max, so it never goes above that
Janina Pohorecki
@janepohorecka
Jan 28 2017 17:56
@alpox Oh, yeah I definitely have tried that but the content is shifted to the right
Ghulam Shabir
@ghulamshabir
Jan 28 2017 17:57
@TylerMoeller so what page widths should I use ? I am using default width settings for base line css which I use for small screens less than 530px width size. should i add antoher for 800px screen width ? and what about landscape orientation ?
alpox
@alpox
Jan 28 2017 17:57
@janepohorecka Hmm looks okay on my screen like this
Tyler Moeller
@TylerMoeller
Jan 28 2017 17:59
@ghulamshabir It's hard to accommodate all screen sizes...I just trust the research they do at twitter when making bootstrap. v4 Bootstrap has breakpoints at 576px, 768px, 992px, and 1200px
I'm not sure what project this is for - or if there are specific requirements you're trying to address though.
If it's a graphic-intensive app, then you'll want to pay attention to pixel density too and load the appropriate image based on that
Ghulam Shabir
@ghulamshabir
Jan 28 2017 18:02
@TylerMoeller I am just trying to use mobile screen sizes which are common today and possibly take care of landscape too
@TylerMoeller you mean retina displays ?
Tyler Moeller
@TylerMoeller
Jan 28 2017 18:03
Yeah, retina is an example. Some android devices have higher pixel densities than that
Ghulam Shabir
@ghulamshabir
Jan 28 2017 18:07
@TylerMoeller good to know that :smile: , so I should use base line css for less than 576px screen widths what do you think ?
Tyler Moeller
@TylerMoeller
Jan 28 2017 18:08
@ghulamshabir I think that's the easiest approach to accommodate all the different devices out there :)
Ghulam Shabir
@ghulamshabir
Jan 28 2017 18:09
@TylerMoeller thanks alot will do that :smile:
CamperBot
@camperbot
Jan 28 2017 18:09
ghulamshabir sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1422 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jan 28 2017 18:14
:+1:
Janina Pohorecki
@janepohorecka
Jan 28 2017 18:21
@alpox I hate to continue bothering you but I have a question for you.. I have removed the "margin-left: 10%" to the header so that hamburger menu can appear because when I put the margin in it makes the hamburger menu to disappear off the page.. How can I have both the margin and menu to appear? https://janepohorecka.github.io/Test-Northwest/
Sorin Ruse
@sorinr
Jan 28 2017 18:23
@janepohorecka add padding- instead of margin
Janina Pohorecki
@janepohorecka
Jan 28 2017 18:24
@sorinr I have tried this and it has not worked
alpox
@alpox
Jan 28 2017 18:25
@janepohorecka Hmm you have to put there box-sizing: border-box;. You had content: border-box; which is not valid
Janina Pohorecki
@janepohorecka
Jan 28 2017 18:29
@alpox OMG!
I got it the way I wanted
Thanks you so much for your help!!! I really appreciate it ;)
Coding Machine
@EphremL
Jan 28 2017 18:52
Can someone help me
i need to understand what i am doing wrong and master basics before alogrythm scriptung
voxgranular
@voxgranular
Jan 28 2017 19:00
@EphremL Sure, ask away and we'll see what we can do to help :)
Asaf Harari
@asafHarari
Jan 28 2017 19:17
@asafHarari
Hey guys! :) I finished my tribute page project and would love feedback. Specifically, I would like to know if the responsiveness of the page is coded correctly. Thanks!
http://codepen.io/asafHarari/pen/LxzqKm?editors=1000
CamperBot
@camperbot
Jan 28 2017 19:17
sorry asafharari, you can't send brownie points to yourself! :sparkles: :sparkles:
anyone can look through this last part of this code?
i am stuck for days
Tyler Moeller
@TylerMoeller
Jan 28 2017 19:28

@bigyankarki Maybe I can explain it better than I did yesterday. Try running this code alone:

var weatherId;
var apiAddress = "http://api.openweathermap.org/data/2.5/weather?lat=40&lon=74&units=imperial&type=accurate&APPID=9d4a841a5b68f2cc43c97d5224e11086";
$.getJSON(apiAddress, function(weatherData) {
  weatherId = weatherData.weather[0].id;
});

console.log(weatherId);

What is weatherId equal to?

i.e. what gets logged to the console?
Ghulam Shabir
@ghulamshabir
Jan 28 2017 19:33
@TylerMoeller hi again, I need help for one last thing in this project (I hope :smile: ), search feature is not working in mobiles, I think it's because when I submit the form by tapping search icon in my soft keypad it does not trigger submit event
Bigyan Karki
@bigyankarki
Jan 28 2017 19:33
@TylerMoeller i will try that
Tyler Moeller
@TylerMoeller
Jan 28 2017 19:34
@ghulamshabir I'll see if I can help. Can you send me the link to your pen?
Ghulam Shabir
@ghulamshabir
Jan 28 2017 19:34
@TylerMoeller yes sure , here it is http://codepen.io/ghulamshabir/full/GrvLrE/
Bigyan Karki
@bigyankarki
Jan 28 2017 19:36
@TylerMoeller it still says weatherId not defined
Alicina Memar
@chocolatechimpcookie
Jan 28 2017 19:37
Hey guys, does anyone know why the Weather App sample doesn't get the mixed content block?
But mine does
Tyler Moeller
@TylerMoeller
Jan 28 2017 19:37
@bigyankarki Yeah, it's undefined even though we've made weatherId global. That's because getJSON is asyncrhonous.
Bigyan Karki
@bigyankarki
Jan 28 2017 19:37
asyncrhonous?
what is meant by that?
can i get any material to read this?
Tyler Moeller
@TylerMoeller
Jan 28 2017 19:37
Yes, it takes some time to go to the URL and get the data. By the time we get the data back from openweathermap, the console.log() has already run
You have to pass the values to a function instead:
var weatherId;
var apiAddress = "http://api.openweathermap.org/data/2.5/weather?lat=40&lon=74&units=imperial&type=accurate&APPID=9d4a841a5b68f2cc43c97d5224e11086";
$.getJSON(apiAddress, function(weatherData) {
  weatherId = weatherData.weather[0].id;
  logWeatherId(weatherId);
});

function logWeatherId(weatherId) {
  console.log(weatherId);
}
Try that code ^^ and you will get the weatherId without issue
Alicina Memar
@chocolatechimpcookie
Jan 28 2017 19:39
I get this error: VM235 jquery.min.js:4 Mixed Content: The page at 'https://codepen.io/chocolatechimpcookie/pen/dNZvNP' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.openweathermap.org/data/2.5/weather?lat=40.9829935&lon=-74.16364759999999&APPID=061f24cf3cde2f60644a8240302983f2'. This request has been blocked; the content must be served over HTTPS.
Tyler Moeller
@TylerMoeller
Jan 28 2017 19:39
@bigyankarki This stack overflow answer seems to be a good one to read: http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call
@ghulamshabir I think this is because you use hover to activate the search field. Hover doesn't work well on mobile...
I will test it out on my mobile device to see
Chris Wingler
@chriswingler
Jan 28 2017 19:41

in the twitchtv project, does the response property stream: null mean that freecodecamp isn't streaming?

i don't know what i'm looking at here, and don't know how to find out.

Tyler Moeller
@TylerMoeller
Jan 28 2017 19:42
@ghulamshabir Hmmm, it actually works great for me on iOS safari and Android Chrome... ;)
Ghulam Shabir
@ghulamshabir
Jan 28 2017 19:44
@TylerMoeller :smile: good to know that :smile: , my mobile is not of a good brand might be ajax issue ? I should try another browser in my mobile
Tyler Moeller
@TylerMoeller
Jan 28 2017 19:45
@chocolatechimpcookie The example project doesn't use navigator.geolocation to get the location, they use https://ipinfo.io/json
Alicina Memar
@chocolatechimpcookie
Jan 28 2017 19:45
How will that affect calling the API tho
Tyler Moeller
@TylerMoeller
Jan 28 2017 19:47
@chocolatechimpcookie OpenWeatherMap only works over HTTP. navigator.gelocation only works over HTTPS. So, you have to either use a different weather API or a different way to get the lcoation. This issue discusses it in more detail: FreeCodeCamp/FreeCodeCamp#7853
They need to update the instructions for that challenge :/
Alicina Memar
@chocolatechimpcookie
Jan 28 2017 19:47
Ahhhh
Gotchya
That makes sense
How do I give ya a something
points
Tyler Moeller
@TylerMoeller
Jan 28 2017 19:48
No need ;) but in the future you just say thanks @username
Alicina Memar
@chocolatechimpcookie
Jan 28 2017 19:48
thanks @TylerMoeller
CamperBot
@camperbot
Jan 28 2017 19:48
chocolatechimpcookie sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1423 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Allanfernandes97
@Allanfernandes97
Jan 28 2017 19:50
hi I need some help
Im building basic front end projects and Im stuck on a silly problem
Tyler Moeller
@TylerMoeller
Jan 28 2017 19:50
@chriswingler The best way is to look at all three endpoints (user, stream, channel) and study how they look for online, offline, and non-existent users.
Allanfernandes97
@Allanfernandes97
Jan 28 2017 19:51

<body>
<header><nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container fluid">

  <div class="navbar-header">
    <a href="#" class="navbar-brand ">Allan Moses Fernandes </a>

  </div>

<!-- Menu -->

  <div>
    <ul class="nav navbar-nav navbar-right">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>

  </header>

<h1>
Allan is Home </h1>

somehow my <h1> ends up in the navigation bar could someone help me get it out of there

Alicina Memar
@chocolatechimpcookie
Jan 28 2017 19:53
I had no idea Header is an actual tag
Try a div instead
Bigyan Karki
@bigyankarki
Jan 28 2017 19:53
//get the address from the IP Geolocation API
function getLocation() {
  $.getJSON("http://ip-api.com/json", function(loc){
    $("#cityName").text(loc.city + ', ' + loc.regionName + ', ' + loc.country)
    getWeather(loc.lat, loc.lon);
  })
    .fail(function(err) {
    getWeather()
  });
}

getLocation();

//Retreive temperature details from openweathermap.org using longitude and latitude from previous API
function getWeather(lat, lon) {
var apiAddress = "http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&units=imperial&type=accurate&APPID=9d4a841a5b68f2cc43c97d5224e11086";
  $.getJSON(apiAddress, function (weatherData){

    tempF = weatherData.main.temp.toFixed(0);
    tempC = ((tempF- 32)*(5/ 9)).toFixed(0);
    weather = weatherData.weather[0].description;
    weatherId = weatherData.weather[0].id ;
    console.log(weatherId);
    wind= weatherData.wind.speed;

  $("#weather").text(weather + ', Wind speed: ' + wind + ' mph');
    $("#temp").text(tempF + ' °F');
            });
}
 function logWeatherData (weatherId) {
   console.log(weatherId);
 }
//to convert celcius into farenheit using data from earlier function.
    $("#conversion").click(function() {
      if($("#temp").text().indexOf('F') > -1) {
        $("#temp").text(tempC + ' °C');
      }

      else {
         $("#temp").text(tempF + ' °F');
      }
    })

//to change the background image according to weather.
var imageArray = [];
var png = ['01d', '01n', '02d', '02n', '03d', '03n', '04d', '04n', '09d', '09n', '10d', '10n', '11d', '11n', '13d', '13n', '50d', '50n'];
var bodyImages = [/*clear sky*/ 'https://media.giphy.com/media/l3vRoeR8KaNNs3g88/giphy.gif',
               /* clear night*/ 
                 'https://media.giphy.com/media/SE5Qvze2QBpbq/source.gif', 
                 /* few clouds*/
                 'https://media.giphy.com/media/o6qaN00DUo7x6/giphy.gif',
                 /*few clouds night*/
                 'https://media.giphy.com/media/R19AHAAwMnEpa/giphy.gif',
                 /*scattered clouds*/
                 'https://media.giphy.com/media/qZMonv0Jty1P2/giphy.gif',
                 /*night scattered clouds*/
                 'https://media.giphy.com/media/afuXKLnDHbb8I/giphy.gif',
                 /*broken clouds*/
                 'https://s-media-cache-ak0.pinimg.com/originals/58/25/32/58253287ef7d5f5bccc3490d64017ffd.jpg',
                 /*night brokenn clouds*/
                 'http://www.troyjohnstone.com/astrophotography/images/sky_clouds_night_moon_2006_09_09_04.jpg',
                 /*shower rain*/
                 'https://media.giphy.com/media/oaNFVNEcvWv5K/giphy.gif',
                 /*night shower rain*/
                 'https://s-media-cache-ak0.pinimg.com/originals/52/07/68/5207680e1eafd7233ab094b5f910e6af.gif',
                 /*rain*/
                 'https://media.giphy.com/media/BAD9hUGYZkqPe/giphy.gif',
                 /*night rain*/
                 'http://umad.com/img/2015/6/night-rain-gif-9410-9796-hd-wallpapers.jpg',
                 /*thunderstorm*/
                 'https://media.giphy.com/media/8xY1YYpEZ4dws/giphy.gif',
                 /*night thunderstorm*/
                 'https://media.giphy.com/media/8xY1YYpEZ4dws/giphy.gif',
                 /*snow*/
                 'https://media.giphy.com/media/OdOfTkw2uVADC/giphy.gif',
                 /*night snow*/
                 'https://media.giphy.com/media/Ok928ivi56clq/giphy.gif',
                 /*mist*/
                 'https://media.giphy.com/media/LmC5rpntvJPxe/giphy.gif',
                  /*night mist*/
                  'https://media.giphy.com/media/ofrQ8FYfTD8gE/giphy.gif'
                 ];
var imageArray = [];
for (var i = 0; i < png.length; i++) {
  for (var j = 0; j < bodyImages.length; j++){
    if (png[i] == weatherId) {
      imageArray.push(bodyImages[j]);
      $("body").css('background-image', 'url('+ imageArray[i] +')');
    }
  }
}
Alicina Memar
@chocolatechimpcookie
Jan 28 2017 19:54
And where does the container's end tag end up? Because you haven't listed it
Tyler Moeller
@TylerMoeller
Jan 28 2017 19:54
@Allanfernandes97 Bootstrap's fixed-top navbar requires padding added to the body:
body {
  padding-top: 50px;
}
Bigyan Karki
@bigyankarki
Jan 28 2017 19:54
@TylerMoeller do yo u mean i should do this?
Eli
@elisco-latour
Jan 28 2017 19:55
Hello everyone
Tyler Moeller
@TylerMoeller
Jan 28 2017 19:56
@bigyankarki No :( you need to either include all your code inside your getJSON function or create a new function and pass all the variables to that one instead.
Just like you did with your location function:
  $.getJSON("http://ip-api.com/json", function(loc){
    $("#cityName").text(loc.city + ', ' + loc.regionName + ', ' + loc.country)
    getWeather(loc.lat, loc.lon);
  })
^^ In that function you pass your location data to the getWeather() function
Eli
@elisco-latour
Jan 28 2017 19:57
I’am currently working on random quotes app, and i’am having an issue with using the JSON API. When i send a request this is the error i get: 7index.html:1 XMLHttpRequest cannot load http://quotesondesign.com/wp-json/posts. The 'Access-Control-Allow-Origin' header has a value 'http://null' that is not equal to the supplied origin. Origin 'null' is therefore not allowed access.
Tom
@moT01
Jan 28 2017 20:00
@bigyankarki hey, i made some changes to your project and posted them yesterday when you asked me for help, ...not sure if you got that message but its up there somewhere
Nikki L.R.
@nikkilr88
Jan 28 2017 20:01
Could someone help me out with a sidebar problem?
Tom
@moT01
Jan 28 2017 20:02
whats the problem @nikkilr88 ?
Tyler Moeller
@TylerMoeller
Jan 28 2017 20:02
@elisco-latour There is sample code for that API here: https://quotesondesign.com/api-v4-0/, if you use that sample code, you shouldn't be hitting that error.
Bigyan Karki
@bigyankarki
Jan 28 2017 20:02
@moT01 i was out after i aske for help. my bad
anyways thanaks for your help @moT01
Nikki L.R.
@nikkilr88
Jan 28 2017 20:02
Well, I have it working, but when you load the page it's already open, and I can't figure out how to have it closed by default.
Bigyan Karki
@bigyankarki
Jan 28 2017 20:02
@TylerMoeller
Nikki L.R.
@nikkilr88
Jan 28 2017 20:03
I am using jQuery
Bigyan Karki
@bigyankarki
Jan 28 2017 20:03
//get the address from the IP Geolocation API
function getLocation() {
  $.getJSON("http://ip-api.com/json", function(loc){
    $("#cityName").text(loc.city + ', ' + loc.regionName + ', ' + loc.country)
    getWeather(loc.lat, loc.lon);
  })
    .fail(function(err) {
    getWeather()
  });
}

getLocation();

//Retreive temperature details from openweathermap.org using longitude and latitude from previous API
function getWeather(lat, lon) {
var apiAddress = "http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&units=imperial&type=accurate&APPID=9d4a841a5b68f2cc43c97d5224e11086";
  $.getJSON(apiAddress, function (weatherData){

    tempF = weatherData.main.temp.toFixed(0);
    tempC = ((tempF- 32)*(5/ 9)).toFixed(0);
    weather = weatherData.weather[0].description;
    weatherId = weatherData.weather[0].id ;
    console.log(weatherId);
    wind= weatherData.wind.speed;

  $("#weather").text(weather + ', Wind speed: ' + wind + ' mph');
    $("#temp").text(tempF + ' °F');

    //to change the background image according to weather.
var imageArray = [];
var png = ['01d', '01n', '02d', '02n', '03d', '03n', '04d', '04n', '09d', '09n', '10d', '10n', '11d', '11n', '13d', '13n', '50d', '50n'];
var bodyImages = [/*clear sky*/ 'https://media.giphy.com/media/l3vRoeR8KaNNs3g88/giphy.gif',
               /* clear night*/ 
                 'https://media.giphy.com/media/SE5Qvze2QBpbq/source.gif', 
                 /* few clouds*/
                 'https://media.giphy.com/media/o6qaN00DUo7x6/giphy.gif',
                 /*few clouds night*/
                 'https://media.giphy.com/media/R19AHAAwMnEpa/giphy.gif',
                 /*scattered clouds*/
                 'https://media.giphy.com/media/qZMonv0Jty1P2/giphy.gif',
                 /*night scattered clouds*/
                 'https://media.giphy.com/media/afuXKLnDHbb8I/giphy.gif',
                 /*broken clouds*/
                 'https://s-media-cache-ak0.pinimg.com/originals/58/25/32/58253287ef7d5f5bccc3490d64017ffd.jpg',
                 /*night brokenn clouds*/
                 'http://www.troyjohnstone.com/astrophotography/images/sky_clouds_night_moon_2006_09_09_04.jpg',
                 /*shower rain*/
                 'https://media.giphy.com/media/oaNFVNEcvWv5K/giphy.gif',
                 /*night shower rain*/
                 'https://s-media-cache-ak0.pinimg.com/originals/52/07/68/5207680e1eafd7233ab094b5f910e6af.gif',
                 /*rain*/
                 'https://media.giphy.com/media/BAD9hUGYZkqPe/giphy.gif',
                 /*night rain*/
                 'http://umad.com/img/2015/6/night-rain-gif-9410-9796-hd-wallpapers.jpg',
                 /*thunderstorm*/
                 'https://media.giphy.com/media/8xY1YYpEZ4dws/giphy.gif',
                 /*night thunderstorm*/
                 'https://media.giphy.com/media/8xY1YYpEZ4dws/giphy.gif',
                 /*snow*/
                 'https://media.giphy.com/media/OdOfTkw2uVADC/giphy.gif',
                 /*night snow*/
                 'https://media.giphy.com/media/Ok928ivi56clq/giphy.gif',
                 /*mist*/
                 'https://media.giphy.com/media/LmC5rpntvJPxe/giphy.gif',
                  /*night mist*/
                  'https://media.giphy.com/media/ofrQ8FYfTD8gE/giphy.gif'
                 ];
var imageArray = [];
for (var i = 0; i < png.length; i++) {
  for (var j = 0; j < bodyImages.length; j++){
    if (png[i] == weatherId) {
      imageArray.push(bodyImages[j]);
      $("body").css('background-image', 'url('+ imageArray[i] +')');
    }
  }
}

            });
}
 function logWeatherData (weatherId) {
   console.log(weatherId);
 }
//to convert celcius into farenheit using data from earlier function.
    $("#conversion").click(function() {
      if($("#temp").text().indexOf('F') > -1) {
        $("#temp").text(tempC + ' °C');
      }

      else {
         $("#temp").text(tempF + ' °F');
      }
    })
Chinmaya B
@sharang108
Jan 28 2017 20:03
The tweets are incomplete http://codepen.io/sharang108/pen/ggXgBb
Bigyan Karki
@bigyankarki
Jan 28 2017 20:03
do you mean this?
Chinmaya B
@sharang108
Jan 28 2017 20:04
help the tweeting part is still incomplete
CamperBot
@camperbot
Jan 28 2017 20:04
no wiki entry for: the tweeting part is still incomplete
Allanfernandes97
@Allanfernandes97
Jan 28 2017 20:04
@TylerMoeller Thank you soo much that helped me get it !! :) and @chocolatechimpcookie http://www.w3schools.com/tags/tag_header.asp , there you go
Tyler Moeller
@TylerMoeller
Jan 28 2017 20:05
@bigyankarki Yes, that's closer, now weatherId shouldn't be undefined. That should help you isolate the next problem with png[i] == weatherId
Log the weatherId to see what it looks like and then compare with the values in your png array.
CamperBot
@camperbot
Jan 28 2017 20:05
Archives for HelpFrontEnd
Tyler Moeller
@TylerMoeller
Jan 28 2017 20:06
@bigyankarki The main issue you were hitting though was getting undefined variables. You'll still hit that with your tempF and tempC variables because those are also outside of your getJSON. It's important to understand callback functions and how to handle asynchronous requests in JavaScript to successfully finish this project.
Sorin Ruse
@sorinr
Jan 28 2017 20:08
@bigyankarki what is the reason to construct all that bodyImages aarray if most of it contains dummy links to giphy.gif?
alan-redding
@alan-redding
Jan 28 2017 20:10
Good afternoon, everyone! I could use some help on my portfolio page. Everything is laid out how I want it to be, the problem is with getting it go mobile. I have the media query set, which works great as long as it is in a desktop browser and I resize the browser window, but on a mobile device it just shows the full page. I currently have a live version at https://www.arcoding.com. Could anyone point me in a direction that may solve my mobile problem?
Tyler Moeller
@TylerMoeller
Jan 28 2017 20:11

@nikkilr88 You'll need to have the menubarsclose and toggle class set when the page first loads:

  <i class="fa fa-bars menubars menubarsclose"></i>
  <div class="container-fluid content">
    <div class="sidebar toggle">

Update your HTML with that and I believe you'll get it working the way you want

Bigyan Karki
@bigyankarki
Jan 28 2017 20:11
@sorinr is uding gif files bad?
//get the address from the IP Geolocation API
function getLocation() {
  $.getJSON("http://ip-api.com/json", function(loc){
    $("#cityName").text(loc.city + ', ' + loc.regionName + ', ' + loc.country)
    getWeather(loc.lat, loc.lon);
  })
    .fail(function(err) {
    getWeather()
  });
}

getLocation();

//Retreive temperature details from openweathermap.org using longitude and latitude from previous API
function getWeather(lat, lon) {
var apiAddress = "http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&units=imperial&type=accurate&APPID=9d4a841a5b68f2cc43c97d5224e11086";
  $.getJSON(apiAddress, function (weatherData){

    tempF = weatherData.main.temp.toFixed(0);
    tempC = ((tempF- 32)*(5/ 9)).toFixed(0);
    weather = weatherData.weather[0].description;
    weatherId = weatherData.weather[0].id ;
    console.log(weatherId);
    logWeatherId(weatherId);
    wind= weatherData.wind.speed;

  $("#weather").text(weather + ', Wind speed: ' + wind + ' mph');
    $("#temp").text(tempF + ' °F');
            });
}
//to convert celcius into farenheit using data from earlier function.
    $("#conversion").click(function() {
      if($("#temp").text().indexOf('F') > -1) {
        $("#temp").text(tempC + ' °C');
      }

      else {
         $("#temp").text(tempF + ' °F');
      }
    })

//to change the background image according to weather.
function logWeatherId(weatherId) {
var imageArray = [];
var png = ['01d', '01n', '02d', '02n', '03d', '03n', '04d', '04n', '09d', '09n', '10d', '10n', '11d', '11n', '13d', '13n', '50d', '50n'];
var bodyImages = [/*clear sky*/ 'https://media.giphy.com/media/l3vRoeR8KaNNs3g88/giphy.gif',
               /* clear night*/ 
                 'https://media.giphy.com/media/SE5Qvze2QBpbq/source.gif', 
                 /* few clouds*/
                 'https://media.giphy.com/media/o6qaN00DUo7x6/giphy.gif',
                 /*few clouds night*/
                 'https://media.giphy.com/media/R19AHAAwMnEpa/giphy.gif',
                 /*scattered clouds*/
                 'https://media.giphy.com/media/qZMonv0Jty1P2/giphy.gif',
                 /*night scattered clouds*/
                 'https://media.giphy.com/media/afuXKLnDHbb8I/giphy.gif',
                 /*broken clouds*/
                 'https://s-media-cache-ak0.pinimg.com/originals/58/25/32/58253287ef7d5f5bccc3490d64017ffd.jpg',
                 /*night brokenn clouds*/
                 'http://www.troyjohnstone.com/astrophotography/images/sky_clouds_night_moon_2006_09_09_04.jpg',
                 /*shower rain*/
                 'https://media.giphy.com/media/oaNFVNEcvWv5K/giphy.gif',
                 /*night shower rain*/
                 'https://s-media-cache-ak0.pinimg.com/originals/52/07/68/5207680e1eafd7233ab094b5f910e6af.gif',
                 /*rain*/
                 'https://media.giphy.com/media/BAD9hUGYZkqPe/giphy.gif',
                 /*night rain*/
                 'http://umad.com/img/2015/6/night-rain-gif-9410-9796-hd-wallpapers.jpg',
                 /*thunderstorm*/
                 'https://media.giphy.com/media/8xY1YYpEZ4dws/giphy.gif',
                 /*night thunderstorm*/
                 'https://media.giphy.com/media/8xY1YYpEZ4dws/giphy.gif',
                 /*snow*/
                 'https://media.giphy.com/media/OdOfTkw2uVADC/giphy.gif',
                 /*night snow*/
                 'https://media.giphy.com/media/Ok928ivi56clq/giphy.gif',
                 /*mist*/
                 'https://media.giphy.com/media/LmC5rpntvJPxe/giphy.gif',
                  /*night mist*/
                  'https://media.giphy.com/media/ofrQ8FYfTD8gE/giphy.gif'
                 ];
var imageArray = [];
for (var i = 0; i < png.length; i++) {
  for (var j = 0; j < bodyImages.length; j++){
    if (png[i] == weatherId) {
      imageArray.push(bodyImages[j]);
      $("body").css('background-image', 'url('+ imageArray[i] +')');
    }
  }
}
};
i wrapped it inside the function and called the function inside getjson
it doesnt show the problem of weatherId not defined but background picture is still not working
Nikki L.R.
@nikkilr88
Jan 28 2017 20:13
@TylerMoeller Thanks! I just figured out another way... By using .addClass() at the start of my js code. :D I appreciate the help!
CamperBot
@camperbot
Jan 28 2017 20:13
nikkilr88 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1424 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Nikki L.R.
@nikkilr88
Jan 28 2017 20:13
@TylerMoeller Maybe not :D
Tyler Moeller
@TylerMoeller
Jan 28 2017 20:14
@nikkilr88 Well, that will just result in FOUC: https://en.wikipedia.org/wiki/Flash_of_unstyled_content :)
Tom
@moT01
Jan 28 2017 20:14
@nikkilr88 did you get it then?
Sorin Ruse
@sorinr
Jan 28 2017 20:14
@bigyankarki i suppose you want to change bg based on wearther condition. right?
Bigyan Karki
@bigyankarki
Jan 28 2017 20:15
yes @sorinr
Tom
@moT01
Jan 28 2017 20:15
@bigyankarki that's what i fixed for you yesterday if you find the post i left
Tyler Moeller
@TylerMoeller
Jan 28 2017 20:16
@bigyankarki weatherId is a number, like 400, 500, etc.. it does not equal the png values you are trying to compare them with. Use the good suggestion provided by @moT01 yesterday
Nikki L.R.
@nikkilr88
Jan 28 2017 20:16
@TylerMoeller Got it. I actually tried what you said, but then I also thought for some reason that I had to change around all of the JS. :D Uff... I really wasn't thinking. Thank you again!
CamperBot
@camperbot
Jan 28 2017 20:16
nikkilr88 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: nikkilr88 already gave tylermoeller points
Nikki L.R.
@nikkilr88
Jan 28 2017 20:16
@moT01 Yes... Thanks!
CamperBot
@camperbot
Jan 28 2017 20:16
nikkilr88 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 478 | @mot01 |http://www.freecodecamp.com/mot01
Chinmaya B
@sharang108
Jan 28 2017 20:17
@sorinr I need some help
Sorin Ruse
@sorinr
Jan 28 2017 20:17
@bigyankarki so, why not only four main conditions like sunny, cloudy, rainy and snowy instead of that bodyImage array?
Bigyan Karki
@bigyankarki
Jan 28 2017 20:18
ya that would shorten the code and help a lot to understand
Chinmaya B
@sharang108
Jan 28 2017 20:18
@sorinr Tweet is not working correctly.
Sorin Ruse
@sorinr
Jan 28 2017 20:18
@sharang108 what kind of help?
Adel
@AdelMahjoub
Jan 28 2017 20:19
@bigyankarki what's the relation between i and j , bodyImages[j] and imageArray[i] ?
Bigyan Karki
@bigyankarki
Jan 28 2017 20:21
i was just trying to get the picture from bodyimage and push it to imagearray
and then show imagearray as css
Bigyan Karki
@bigyankarki
Jan 28 2017 20:24
hey that was clean code
i mean how did that key value pair worked?
Tom
@moT01
Jan 28 2017 20:26
weather is your variable for the description
it grabs bodyImages[weather]
it grabs the value for that key, key being weather
Adel
@AdelMahjoub
Jan 28 2017 20:29
I may use a position fixed canvas, window.innerWidth and innerHeight as dimension, create a new image and attach a load eventListener to it, when it loads, draw it on the canvas, faster than setting body background image from a url
siraz shaikh
@sirazsk
Jan 28 2017 20:32
@sharang108 simply use onclick attribute or jquery function .onClick() check if then it works..
Tyler Moeller
@TylerMoeller
Jan 28 2017 20:33
@sharang108 Buttons can't contain hyperlinks (<a>) or vice versa. Use one or the other. Here is some background on when to use the <button> element: https://css-tricks.com/use-button-element/
siraz shaikh
@sirazsk
Jan 28 2017 20:36
@sharang108 just put that <a> tag outside button tag and then try changing its attribute by using some jquery funtion
Bigyan Karki
@bigyankarki
Jan 28 2017 20:45
@moT01 thanks
CamperBot
@camperbot
Jan 28 2017 20:45
bigyankarki sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 479 | @mot01 |http://www.freecodecamp.com/mot01
Tom
@moT01
Jan 28 2017 20:54
@bigyankarki sure thing, i would maybe stick that other array in there as well somehow
Muhammad Hasham
@MohammadHasham
Jan 28 2017 21:10
is there a way to make a sidenav in bootstrap or html5 ?
Sorin Ruse
@sorinr
Jan 28 2017 21:16
Adel
@AdelMahjoub
Jan 28 2017 21:17
@MohammadHasham of course, sidenavs, bottom navs, top navs, everything is possible
Kaz Baig
@kbaig
Jan 28 2017 21:19
Out of curiosity, how long did the 'no repeats please' challenge take you guys?
Adel
@AdelMahjoub
Jan 28 2017 21:19
@kbaig no repeats is the permutations challenge ?
Kaz Baig
@kbaig
Jan 28 2017 21:20
@AdelMahjoub yeah
Adel
@AdelMahjoub
Jan 28 2017 21:22
@kbaig I don't remember how it tooks, but even if it take some times, that's not problem I guess
Nikki L.R.
@nikkilr88
Jan 28 2017 21:22
@MohammadHasham I was just working on a sidenav... I used HTML, CSS and jQuery
The jQuery code is really short
Kaz Baig
@kbaig
Jan 28 2017 21:23
@AdelMahjoub I'm asking because it must have taken me like 8 hours on and off and I was wondering if there was a faster way of doing it than http://bit.ly/2keR4c4
Adel
@AdelMahjoub
Jan 28 2017 21:27
@kbaig , wrote this a while ago, if you want to compare
function permAlone(str) {
        var repeat = /(.)\1+/g;
        if(str.match(repeat) !== null  && str.match(repeat)[0] == str) return 0;
        var arr = str.split('');
        var permutArr = [];
        var temp, position = 0, len = str.length - 1;
        function permutation(position, len){
            if(position == len){
                permutArr.push(arr.map(function(val){return val;}).join(''));
            }else{
                for(var i = position; i<= len; i++){
                    temp = arr[i];
                    arr[i] = arr[position];
                    arr[position] = temp;
                    permutation(position+1,len);
                    temp = arr[i];
                    arr[i] = arr[position];
                    arr[position] = temp;
                }
            }
        }
        permutation(position,len);
        var result = permutArr.filter(function(x){return !x.match(repeat);});
        return result;
    }
Kaz Baig
@kbaig
Jan 28 2017 21:34
@AdelMahjoub thanks!
CamperBot
@camperbot
Jan 28 2017 21:34
kbaig sends brownie points to @adelmahjoub :sparkles: :thumbsup: :sparkles:
:cookie: 407 | @adelmahjoub |http://www.freecodecamp.com/adelmahjoub
Adel
@AdelMahjoub
Jan 28 2017 21:36
@kbaig thanks
CamperBot
@camperbot
Jan 28 2017 21:36
adelmahjoub sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 298 | @kbaig |http://www.freecodecamp.com/kbaig
Not Talent
@nottalent
Jan 28 2017 21:38
Guys is there anybody here to help me with a css less mixin problem? I'm trying to implement mixin and I'm having a hard time.
here' s the code i have if anybody is willing to help.
Gustave Nishimirwe
@gustavebn
Jan 28 2017 22:09
So I'm trying to use lobster font but its not rendering. Why the heck is it not working>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
Gustave Nishimirwe
@gustavebn
Jan 28 2017 22:39
thanks @SkyCoder01
CamperBot
@camperbot
Jan 28 2017 22:39
gustavebn sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 64 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Ian Dallenbach
@idallenbach
Jan 28 2017 23:41
I am trying to do the tribute page, but my bullets are too far away from text on my unordered list. I do not know how to fix this formatting error.
Mike Boardley
@Boardley
Jan 28 2017 23:42
@idallenbach - Do you have a link?
ZenZate
@ZenZate
Jan 28 2017 23:52
I wanna create a new html file and link it as the nav bar in my portfolio usnig i frame how do i do that using codepen
alan-redding
@alan-redding
Jan 28 2017 23:53
If you want to use a separate html file as your nav bar I would recommend looking in to php includes over an iframe.
Hello911
@Hello911
Jan 28 2017 23:53
array.sort(function(a,b){
    return b-a;
  });
There is an error message when I delete the word "return". But I don't want to anything to be returned for now, but I want the compare function sort from greatest to smallest number. How can I do that?
ZenZate
@ZenZate
Jan 28 2017 23:55
@alan-redding this is for my prtfolio challenge
They haven't taught us how to make the nav bar
And thats what i found on google
alan-redding
@alan-redding
Jan 28 2017 23:57
Here is a responsive navigation menu you can use without the need for php or iframes. It uses css and jquery and is easy to customize once you decipher the coding. http://www.w3schools.com/howto/howto_js_topnav.asp