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('.'))```
@moT01 . Yes. I am checking my code to see if I find out what's wrong.
@chriswingler try setting it to a variable first maybe
var s = f.split('.');
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
@chriswingler split is a STRING method....
soo question is.. WHATS
soo question is.. WHATS
f ?
@remdata working for me
@moigithub thanks.. figured it out
chriswingler sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 2620 | @moigithub |http://www.freecodecamp.com/moigithub
Anyone know why my bootstrap buttons are not being constrained to their parent container?
...IF u post some code.. how u doing.. probably u will get an answer....
@charlesdarkwind
@charlesdarkwind
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">  Google Plus</i></a>
<a class="btn btn-primary btn-block"><i class="fa fa-youtube" aria-hidden="true">  YouTube</i></a>
<a class="btn btn-primary btn-block"><i class="fa fa-twitter" aria-hidden="true">  Twitter</i></a>
</div>
</div>
<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">  Google Plus</i></a>
<a class="btn btn-primary btn-block"><i class="fa fa-youtube" aria-hidden="true">  YouTube</i></a>
<a class="btn btn-primary btn-block"><i class="fa fa-twitter" aria-hidden="true">  Twitter</i></a>
</div>
</div>
is compose mode for code?
..and what u mean by "constrained to their parent container" .. i see they still inside its "parent" @charlesdarkwind
https://i.gyazo.com/0a75414bd11839823dd1e8cbb6a47cf9.png
https://i.gyazo.com/0a75414bd11839823dd1e8cbb6a47cf9.png
well some part of it appears outsise of my .footer if im not missin something http://imgur.com/a/ipLgL
@moigithub
remove the height property on ur footer class..then it will be "auto"
.. should "adapt" itself to its content
.. should "adapt" itself to its content
ok so it just coulndt fit in because it was too big?
:)
Thanks mate
@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.
@TylerMoeller . How do I prevent caching of my API response?
Hi there! Can you recommend a site where i can read a little and find how to code scrolling webpage? :D
guess noone around
@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:
hi @TylerMoeller ! :D i mean that you can access all the content of the site just by scrolling
@kikykindagirl w3school.com and go to jQuery section
@kikykindagirl you mean a one page website, that doesn't need any special code 😎
@rami90 thanks! that is what i was looking for!
kikykindagirl sends brownie points to @rami90 :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @rami90 |http://www.freecodecamp.com/rami90
@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
@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
@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
Here is some inspiration: https://github.com/iRaul/awesome-portfolios
Start here to build on the bootstrap that Free Code Camp has already taught: http://getbootstrap.com/components/
@TylerMoeller thank you !! <3
kikykindagirl sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1420 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
guys. where can i get APIs
ex the random quote
hi everyone
Hi
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
I going to rest and start fresh tomorow
@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
@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">
is somebody able to help me with react?
@jpchaufan Did you get your front end certificate already? :clap: I'm working on my quote machine now...
yea
did you need help with something?
No I'm just learning it as I go, but thank you :)
Haven't talked to anyone who got a front end certificate yet
ah
yea well good luck to you. its fun huh? to get these cool projects done
Hope my quote machine is good, I think I'll try it with materialize. So many look the same on codepen
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
https://codepen.io/greensoul/pen/xgPXPR?editors=1100
brb
@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?
ah ok thx for the input !
@rene-meda Maybe this will help? http://getbootstrap.com/css/#tables-responsive
You can put a div with class
You can put a div with class
table-responsive around the table and it adds a scroll bar on smaller screens.
ah nice, that'd be helpful! thx for the help
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 !
@TylerMoeller how can I put this vertical line in the right of the navbar? http://tommusdemos.wpengine.com/demo-selector/?theme=Kubb
do you want to seperate elements or just have a verticle line?
@chiuyong
<ll style="display: inline;"> text</li>
@chiuyong
just verticle line @monkeyfingerz
just finished weather and wikipedia viewer projects today and i feel like a boss! thanks freecodecamp.
:point_up: January 28, 2017 12:02 AM @TylerMoeller thanks for that Tyler
winroy sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1421 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
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
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
Anyone know where I can find sound files for making the simon game?
preferably that I can just link to?
sound cloud?
@Willow606 in the challenge theres links to sounds provided, do those not work?
I didn't see links there?
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.
oh haha so they are. Ty
np
Having problem in Finders Keepers Challenge
Any help possible?
@V1shvesh I can help!
@coymeetsworld they do ty just didn't see em
willow606 sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 1970 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
you already said thanks lol @Willow606 (free point)
coymeetsworld sends brownie points to @willow606 :sparkles: :thumbsup: :sparkles:
:cookie: 303 | @willow606 |http://www.freecodecamp.com/willow606
thank you @St3ps and @coymeetsworld
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
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
for what @Kasmin23 ?
the reply
? mustve been from days ago?
@Willow606 you have codepen?
yes I do. :)
@adityaparab yes I do. :)
logged in after a long vacay @coymeetsworld
http://codepen.io/Willow606/full/apVLWZ/ @adityaparab
@Willow606 lol.. then post it here :D
I see.. you did
ah ok @Kasmin23 you're welcome :D
it happens when count gets to 2+
taking a look
kk
how can i remove space from above i have applied
body{
margin:0;
padding:0;
}
but still nothing is changing.
body{
margin:0;
padding:0;
}
but still nothing is changing.
you could try adding negative margins?
@Willow606 Thanks
mohammadhasham sends brownie points to @willow606 :sparkles: :thumbsup: :sparkles:
:cookie: 304 | @willow606 |http://www.freecodecamp.com/willow606
more than welcome. :)
@adityaparab any luck?
@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
sorinr sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 1972 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
heard so many discussions and companies moving from one to the other @sorinr I lost count :)
whats wrong with mySQL?
@coymeetsworld i imagine. so do i. :)
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?
@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
@sorinr but then when i resize it, it leaves a white gap under the image
like the image doesn't scale with the screen
@chungeric thats the firs step. u said it repeats and we removed that. right? :)
@sorinr okay, but background-size: cover doesn't do it either
@chungeric try to add also background-position: center center;
@sorinr That made it worse :(
I don't get what's going on grr
@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;
}
@sorinr if you developed something for a company are you able to give it out to others?
@coymeetsworld i want to share the same code only not the data
yeah but can you do that? Doesn't the company own it as IP?
@sorinr Ahhh you sir are awesome. Should've thought of that, thanks!
chungeric sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1146 | @sorinr |http://www.freecodecamp.com/sorinr
Can someone tell me how to make decoration to none for <a> tag ?
text-decoration: none
@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
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
text-decoration: none;
}
I have inside <aside> a h3 element wich is nested with <a> and when I try this doesn't work
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
@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
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?
@coymeetsworld yes. don't know if a combination of using both mongo for shared "fixed" data and postgres will have some benefits
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
@coymeetsworld i understand that but have any idea what was your worst problem encountered using postgres/
we used a clustered solution, so only issues revolved around postgres nodes going out of sync
@chungeric welcome. sorry for the late reply :)
you may not need a clustered solution if the usage is minimal, we have enterprise applications with needs to perform many transactions
@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?
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
@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
:star2: 1973 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
sorinr sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
np @sorinr good luck w/ the project sounds interesting
@coymeetsworld as the actual app its working just fine for this client for the moment i feel no pressure so i can experiment :)
nice @sorinr well that works
take time and research different solutions, better to do planning now than correct things in production
@coymeetsworld lol. i know what means correcting problems for apps in production :)
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. -.-
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
@Rish-hap wrap it inside a container
That specific collumn class into a container?
your whole three columns
to be nested inside a container class
something wrong with your grid. The text does not come out if grid is correct
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...
All three collumn are in a row and that row is in a container..
@Rish-hap Code pls?
<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>
<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???
@Rish-hap then probably
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
@Rish-hap What's the css for row-eq-height and p*?
P* for bcxkground color and text color and with row-eq-height i was trying for equal heights of 3 collumns
can you remove those classes and see if the overflow still happens for your paragraph?
do you have codepen link? @Rish-hap
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>
@sharang108 What error you get?
@NitinNair89 Well there is no error the code pen reloads and then a blank output screen whatsoever static things are all gone.
@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
@sorinr Well yeah that is one mistake but it's still not working http://codepen.io/sharang108/pen/ggXgBb
$(document).ready(function () {
...
});
How to set max-height for col-md-4
@sharang108 in pen settings->javascript add jquery library
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
how to override predefined inline-style with my own inline style?
@relentless-coder why would you do that?
@sorinr @NitinNair89 Okay I changed settings
ok
How to set max-height for col-md-4 ?
https://www.freecodecamp.com/willow606/front-end-certification ^^ ty to all those who've helped me along the way!!
I think missing $(.document).ready() thing is affecting the code
@VasileBotnaru because I am using graph library and it is setting it's own inline styles on page load.
@Willow606 are you there?
@relentless-coder ok, i don't know, anyone knows how?
@sharang108 move what you have between <style></style> within the js panel of codepen
@relentless-coder what does google say?
@ajithvallabai yep
@sorinr Once again its not working http://codepen.io/sharang108/pen/ggXgBb
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
@sharang108 its working.take a look at the example
@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
@relentless-coder How are you adding inline styles? can you show?
@relentless-coder <tag style="">?
@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
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 ?
@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
How do I check which Bootstrap version I have?
@playingwithinfinity how do you load bootstrap?
@sorinr You include it in your html file
@playingwithinfinity i know that. whats ur link ur using now?
@sorinr Now its showing some errors
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
@sharang108 the problem is in your doc.ready opening and closing function. if you remove that your on.("click" function will work just fine :)
@ajithvallabai it was all working when I tested it before submitting it
@ajithvallabai but ty
@playingwithinfinity are you working locally and you have the bootstrap.css downloaded to your pc or you just wanna link it from internet?
@Willow606 :)
@ajithvallabai https://www.freecodecamp.com/willow606/front-end-certification ;)
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?
@Willow606 congrats you got it . for me i need to complete simons game
@ajithvallabai it was so intimidating! (>.<)
It works! :D
So in code pen I don't have to write document.write???
So in code pen I don't have to write document.write???
@sorinr
@sharang108 you mean document ready ? its not absolutely necessary.
@Willow606 i have less humor
@sorinr So where was the problem?
What was the problem*
@ajithvallabai all I can say is that larger things are easier to test and debug with as many functions as you can. :P
@sharang108 think it was a correct opening-closing doc.ready function
You mean missing '{' I resolved that error
@Willow606 will wait for the right test to take :)
@sorinr Thanks
sharang108 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1147 | @sorinr |http://www.freecodecamp.com/sorinr
http://codepen.io/gjergjk71/full/rjYJre/ My first website :)
shitty tho' haha
@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
@sorinr I have one more problem
@sharang108 whats that problem holding u back?
@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/
@sorinr thanks for the feedback :)
gjergjk71 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1148 | @sorinr |http://www.freecodecamp.com/sorinr
@sharang108 I think you are not calling the api the right way. take a look at its documentation:http://quotesondesign.com/the-api/
@sorinr I am handling JSON API for the first time
SO I don't understand it, is there any easier options?
option*
@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
@sorinr so there is no easier API
@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
Hi guys, I need some hints with my Wikipedia Viewer..I'm a little confused..thanks
https://codepen.io/saylos/pen/ygoGEW?editors=0010
https://codepen.io/saylos/pen/ygoGEW?editors=0010
@sorinr So reloading is a jQuery issue right how do i address that issue?
consider that this is just a skeleton..I'm just trying to make the api request work
@sharang108 in pen settings->javascript tab load jquery :) if thats the problem
@saylos You may want to read this: https://www.mediawiki.org/wiki/API:Main_page#Identifying_your_client
http://codepen.io/cloko100/full/KayoEq/ , any opinion? :smile:
@sorinr No i mean resending request to json api after on-click event
@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
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/
- 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.
- 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:
@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.
@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.
saylos sends brownie points to @tariellaelius :sparkles: :thumbsup: :sparkles:
:cookie: 280 | @tariellaelius |http://www.freecodecamp.com/tariellaelius
Guys please give me your valuable feedback on my local wether app http://weather-app-fcc.surge.sh/ :clap:
@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 ;)
@tariellaelius :+1: hope to finally see the light at the end of the tunnel :smile:
@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.
@tariellaelius thanks mate, I am improving on mobile view
imondal007 sends brownie points to @tariellaelius :sparkles: :thumbsup: :sparkles:
:cookie: 281 | @tariellaelius |http://www.freecodecamp.com/tariellaelius
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
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
ohh. not really sure why but now it makes perfect sense. @NitinNair89 thanks appreciate the help
stevo99 sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 383 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
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!!
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
@alexg1990 Since you are using jQuery, the correct function would be -
$("#quote-text").html("Here is quote number2");
@NitinNair89 thank you! When would I be using "innerHTML"?
alexg1990 sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 384 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
@alexg1990 You use it when doing it via plain javascript -
document.getElementById('quote-text).innerHTML = "Here is quote number2";
@NitinNair89 makes sense. Thank you!
alexg1990 sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:warning: alexg1990 already gave nitinnair89 points
@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
checking..
which section you referring to?
portfolio is still centered..
3rd section down
this one? -
<div class="background3" id="page3">
yes
it is appearing similar to "about" and "contact info" text
right and there aligned left
maybe a small mistake
so how do you want it to be?
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
i see it on the left only
oh in my pen its still centered maybe just refresh?
yeah try
Any body here knows android?
programming
nope nothin. when i check it in the chat it looks on the left cause its soo small but full size its centered
opinions?
@Stevo99
hmm diff on my comp.. @NitinNair89 thanks
stevo99 sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:warning: stevo99 already gave nitinnair89 points
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.
@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
stevo99 sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 385 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Well done @Stevo99 :+1:
The justify-content: space-between is removed and I am not sure why..
@NitinNair89 check it out now https://codepen.io/Stevo914/full/VPWXNK/
@janepohorecka fixed means it stays where it is and doesn't care about the scroll position
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
@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..
@janepohorecka Do you have a pen?
@alpox I have it on Github. https://janepohorecka.github.io/Test-Northwest/
@alpox do you mind helping me figure this out?
@janepohorecka its cause your container shrinks or something
@moT01 is right @janepohorecka
add
min-width: 80%; to your header
@moT01 y is it because the "space-between" is removed?
@janepohorecka You have to set the header to
width: 100%;
that is not removed
it just has less space to work with
@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.
The layout still looks wacky when I apply these changes. @alpox
I updated my github page https://janepohorecka.github.io/Test-Northwest/
The li elements are off the page and my hamburger menu does not appear at a small screen size
@alpox
@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;
Can anyone explain what the spread operator does?
@janepohorecka Hi there! do you happen to use ruby?
@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.
@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);
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 functionThis 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?
If
params is [1,2,3] this would be equivalent to calling someFuncCall(1, 2, 3) @UsamaHameed
@janepohorecka what do you use in backend then? how long have you been coding?
@pratfallbat haven't started doing backend stuff just yet :P
okay but i started from backend and now i am learning frontend
@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.
@janepohorecka i am leaning both at the same time now which is crazy :smile:
@philipp32 Both what you said is right though.
You have another problem. The variable
You wanna use
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.
@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.
@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
At least the object spread operator is nowhere yet. Maybe the function spread is
(Array spread)
@alpox What can I do to solve the first two problems?
@UsamaHameed Maybe also look into destructuring if you are already interested in ES6 features :-)
@philipp32 They are no problems. The code there is right :-)
Isn't spread operator from ES5? @alpox
@philipp32 Now you changed something else :D
@alpox thank you. Works now
:cookie: 751 | @alpox |http://www.freecodecamp.com/alpox
philipp32 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
@philipp32 Ah good
what is ECMAScript2015? @alpox
ES5?
@UsamaHameed No thats ES6
@alpox I definately want my header to have a max-width of 1300px, not 100%
@alpox thanks :)
usamahameed sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 752 | @alpox |http://www.freecodecamp.com/alpox
@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.
@TylerMoeller yeah I tried text-size-adjust but no luck, oh nice I needed that tip for the text field zoom in :smile:
@janepohorecka Then do that :D
@alpox I try but the list items are not all visible. They obviously moved outside the window.
@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
@alpox Oh, yeah I definitely have tried that but the content is shifted to the right
@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 ?
@janepohorecka Hmm looks okay on my screen like this
@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
@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 ?
Yeah, retina is an example. Some android devices have higher pixel densities than that
@ghulamshabir http://mydevice.io/devices/
@TylerMoeller good to know that :smile: , so I should use base line css for less than 576px screen widths what do you think ?
@ghulamshabir I think that's the easiest approach to accommodate all the different devices out there :)
@TylerMoeller thanks alot will do that :smile:
ghulamshabir sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1422 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
:+1:
@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/
@janepohorecka add padding- instead of margin
@sorinr I have tried this and it has not worked
@janepohorecka Hmm you have to put there
box-sizing: border-box;. You had content: border-box; which is not valid
@alpox OMG!
I got it the way I wanted
Thanks you so much for your help!!! I really appreciate it ;)
Can someone help me
i need to understand what i am doing wrong and master basics before alogrythm scriptung
@EphremL Sure, ask away and we'll see what we can do to help :)
@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
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
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
@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?
@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
@TylerMoeller i will try that
@ghulamshabir I'll see if I can help. Can you send me the link to your pen?
@TylerMoeller yes sure , here it is http://codepen.io/ghulamshabir/full/GrvLrE/
@TylerMoeller it still says weatherId not defined
Hey guys, does anyone know why the Weather App sample doesn't get the mixed content block?
But mine does
@bigyankarki Yeah, it's undefined even though we've made weatherId global. That's because getJSON is asyncrhonous.
asyncrhonous?
what is meant by that?
can i get any material to read this?
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
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.
@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
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.
@ghulamshabir Hmmm, it actually works great for me on iOS safari and Android Chrome... ;)
@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
@chocolatechimpcookie The example project doesn't use navigator.geolocation to get the location, they use https://ipinfo.io/json
How will that affect calling the API tho
@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 :/
They need to update the instructions for that challenge :/
Ahhhh
Gotchya
That makes sense
How do I give ya a something
points
No need ;) but in the future you just say
thanks @username
thanks @TylerMoeller
chocolatechimpcookie sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1423 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
hi I need some help
Im building basic front end projects and Im stuck on a silly problem
Im building basic front end projects and Im stuck on a silly problem
@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.
<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
I had no idea Header is an actual tag
Try a div instead
//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] +')');
}
}
}
And where does the container's end tag end up? Because you haven't listed it
@Allanfernandes97 Bootstrap's fixed-top navbar requires padding added to the body:
body {
padding-top: 50px;
}
@TylerMoeller do yo u mean i should do this?
Hello everyone
@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
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.
@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
Could someone help me out with a sidebar problem?
whats the problem @nikkilr88 ?
@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.
@moT01 i was out after i aske for help. my bad
anyways thanaks for your help @moT01
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.
@TylerMoeller
I am using jQuery
//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');
}
})
The tweets are incomplete http://codepen.io/sharang108/pen/ggXgBb
do you mean this?
help the tweeting part is still incomplete
no wiki entry for:
the tweeting part is still incomplete
@TylerMoeller Thank you soo much that helped me get it !! :) and @chocolatechimpcookie http://www.w3schools.com/tags/tag_header.asp , there you go
@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.
@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.
@bigyankarki what is the reason to construct all that bodyImages aarray if most of it contains dummy links to giphy.gif?
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?
@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
@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
@TylerMoeller Thanks! I just figured out another way... By using .addClass() at the start of my js code. :D I appreciate the help!
nikkilr88 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1424 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@TylerMoeller Maybe not :D
@nikkilr88 Well, that will just result in FOUC: https://en.wikipedia.org/wiki/Flash_of_unstyled_content :)
@nikkilr88 did you get it then?
@bigyankarki i suppose you want to change bg based on wearther condition. right?
yes @sorinr
@bigyankarki that's what i fixed for you yesterday if you find the post i left
@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
@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!
nikkilr88 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: nikkilr88 already gave tylermoeller points
@moT01 Yes... Thanks!
nikkilr88 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 478 | @mot01 |http://www.freecodecamp.com/mot01
@sorinr I need some help
@bigyankarki so, why not only four main conditions like sunny, cloudy, rainy and snowy instead of that bodyImage array?
ya that would shorten the code and help a lot to understand
@sorinr Tweet is not working correctly.
@sharang108 what kind of help?
@bigyankarki what's the relation between i and j , bodyImages[j] and imageArray[i] ?
i was just trying to get the picture from bodyimage and push it to imagearray
and then show imagearray as css
http://codepen.io/moT01/pen/Kayqqg @bigyankarki
hey that was clean code
i mean how did that key value pair worked?
weather is your variable for the description
it grabs bodyImages[weather]
it grabs the value for that key, key being
weather
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
@sharang108 simply use onclick attribute or jquery function .onClick() check if then it works..
@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/
@sharang108 just put that <a> tag outside button tag and then try changing its attribute by using some jquery funtion
@moT01 thanks
bigyankarki sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 479 | @mot01 |http://www.freecodecamp.com/mot01
@bigyankarki sure thing, i would maybe stick that other array in there as well somehow
is there a way to make a sidenav in bootstrap or html5 ?
@MohammadHasham a sidebar like http://demos.creative-tim.com/light-bootstrap-dashboard/dashboard ?
@MohammadHasham of course, sidenavs, bottom navs, top navs, everything is possible
Out of curiosity, how long did the 'no repeats please' challenge take you guys?
@kbaig no repeats is the permutations challenge ?
@AdelMahjoub yeah
@kbaig I don't remember how it tooks, but even if it take some times, that's not problem I guess
@MohammadHasham I was just working on a sidenav... I used HTML, CSS and jQuery
The jQuery code is really short
@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
@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;
}
@AdelMahjoub thanks!
kbaig sends brownie points to @adelmahjoub :sparkles: :thumbsup: :sparkles:
:cookie: 407 | @adelmahjoub |http://www.freecodecamp.com/adelmahjoub
@kbaig thanks
adelmahjoub sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 298 | @kbaig |http://www.freecodecamp.com/kbaig
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.
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">
@gustavebn This might help: https://www.freecodecamp.com/challenges/import-a-google-font
thanks @SkyCoder01
gustavebn sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 64 | @skycoder01 |http://www.freecodecamp.com/skycoder01
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.
@idallenbach - Do you have a link?
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
If you want to use a separate html file as your nav bar I would recommend looking in to php includes over an iframe.
array.sort(function(a,b){
return b-a;
});
@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
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