hey guys my pen is going crazy dont know why?
that is among other issues
the closing tags, at the bottom of the js
i label mine, so i know what one is for what
}); //end #button.click
}); //end document.ready
ok but it is not changing anything
make sure they're all there
and correct
that is the problem
i still dont see it
i mean they are all there and im pretty sure correct but i feel like i am looking at the same thing too many times
nvm it worked
though i still don get how to work the outptu
do i use append or what
@ismailhozain
for(var i=0; i<info[1].length; i++) {
$("#output").append('<div>'+info[1][i]+'</div><div>'+info[2][i]+'</div><br><br>');
}
I'm having an issue getting my internal nav to work
anyone available?
hi does anyone in this room have chrome os?
@Netrunner21
all of the sudden my nav buttons don't work
did you change something?
I've been working on it for three hours
not sure when it stopped working
what buttons?
connect and portfolio
seems to be working for me
hmm, it does seem a little goofy
theyre taking me somewhere, but not to the same spot, seems kinda random
there is an error in the console. but i dont think it has to do with that
maybe it does, not sure
it works in firefox, and has the issues you just mentioned
strange
not working at all in chrome anymore
I am getting a strange quirk.postion: absolute hides the element even after i added z-index: 99.
the above mentioned statement is on line-138 in the given codepen below.
https://codepen.io/neel111/pen/EvMmgZ
by removing the position: absolute the element show up. Why position: absolute is hidding the element?
what have you been working on? @Netrunner21
css?
yeah mostly
some media queries and updating thumbnails for projects
i see .nav-items in your css, and .nav-item in html
probly not the problem
yeah they are different
I'll just disable the jQuery smooth scroll for now as it doesn't work right when it works anyway
@NeelDVirus it doesn't hide the list
it's below
with a white background
nav ul li ul {
z-index: 99;
position: absolute;
background-color:green;
Sup peeps!
@Netrunner21 yea, im not sure, i would try and think what youve done recently
helps to keep forks so you can go back
github is great for that
get a good working version like you had and fork it when you want to change something
@moT01 Oh Fish! Thank you man. i couldn't see that. wasted 2hour in this :D :D
neeldvirus sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
api offline
what wrong cbot
you sick?
@moT01 lol
Hi, does anyone have a ChromeOS, or know a way to virtually access a chromeOS?
I need to test my Chrome App
@NeelDVirus yea, it seems like when you give it that position, the container doesnt expand to fit it anymore
@moT01 yeah i wanted it that way. the list will expand while hovering over it. i commented that line below as i was checking out the quirk
i need help
haha
i have a huge json file
when a user inputs a value and clicks a button, i need to filter through the json file and grab certain info
idk if i'm making sense
its for a weather app
how huge
that's not json
@moT01 i know...i have this in a json file
this is just a representation of that file
i'm developing locally
so what's up
doesnt beat the json file i made
@moT01 so when a user types into the input, lets say "New York City" and click the button, it should display weather for NYC
k
so what's the problem
how do i do that. haha
@moT01 this is what i have so far
var requestForecast = function(response) {
for (var i=0; i < response.length; i++) {
if (dom.searchText[0].value == response[i].name) {
let lat = response[i].coord.lat;
let lon = response[i].coord.lon
// break;
} else { console.log('not eq')}
// break;
}
// console.log(dom.searchText[0].value);
}
@moT01 btw one more thing. i haven't used
I'm being blunt here
position: relative to the parent element of the position: absolute and still it is positioning the element relative the the parent element.I'm being blunt here
is there a reason your using a file like that? you can get that info from a weather api
i'm checking if the value has an equal in the json file, and if it does, make lat and lon that coordinates for that
i think
that's my issue i'm having
so i dont know how your file is set up, since you showed me a .txt file
but you could maybe something like yourFile["New York"]
that's how you would find it in an object that looks like this...
var myFile = {
"New York": {
Lat: 1323,
Lon: 34234,...
}
}
@moT01 this is just some of the file
[
{
"id": 707860,
"name": "Hurzuf",
"country": "UA",
"coord": {
"lon": 34.283333,
"lat": 44.549999
}
},
{
"id": 519188,
"name": "Novinki",
"country": "RU",
"coord": {
"lon": 37.666668,
"lat": 55.683334
}
},
{
"id": 1283378,
"name": "Gorkhā",
"country": "NP",
"coord": {
"lon": 84.633331,
"lat": 28
}
},
{
"id": 1270260,
"name": "State of Haryāna",
"country": "IN",
"coord": {
"lon": 76,
"lat": 29
}
},
that's the start of the file?
so it's a giant array
yeah, it has 209575 objects
or array items i mean
you could maybe do a filter there
myArray.filter(item => item.name !== "New York")
not sure if that would work
the caps would matter there
so if someone put in new york, it wouldn't find New York
im wondering why your not using an api to get info
i am using https://openweathermap.org/forecast5
you can make a request to that site, using their api, to get all the info you need
@moT01 i'm making a request
to a file you saved?
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
let lat = position.coords.latitude;
let lon = position.coords.longitude;
let api = 'https://api.openweathermap.org/data/2.5/forecast?lat=' + lat + '&lon=' + lon + '&appid=4d8b02dd6a0915262d9f1d723f477f27&units=imperial';
$.ajax({
method:"GET",
url: api,
cache: false,
datatype: "json"
//populating HTML with data from ajax call
}).then(function(data) {
so what's with the giant file
initially, the app will ask for your location. but if you wanted to check the weather in San Diego while you're in Philadelphia, how would I do that
the browser gets your longitude and latitude from your physical location
i cant physically be in San Diego while i'm in Philly
so the user types in San Diego, US
and pulls the lon and lat from the giant ass file
@moT01 unless there's another way i'm not thinking of?
yea, there is
@moT01 go on...
the q?
yes
@moT01 holy shit, how did i miss that
i'm dumb
cept you need the country there
right
placeholder says city, country
there's a zip code option as well
need the country for that as well
@moT01 i should the read the API document more closely. haha
@moT01 thanks man!
adamfaraj sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
api offline
@NeelDVirus get it figured out?
@moT01 Nope. i googled but din't find the specific details so i moved forward assuming it to be unreliable quirk.
did you got anything significant?
did you got anything significant?
what are you trying to do
This message was deleted
@moT01 just clarifying. are you asking me about the recent quirk i mentioned that
position: absolute is working even without assigning position: relative to the parent element?
yes
sounds like you know more about it than i do, ...im not good with those positionings
@moT01 i got something.. The parent element of the absolute-positioned element has a
float property and in the documentation it is mentioned that position:absolute works on floated elements too. NOw it is making sense indeed and i am getting some relief :D
Neither i am good man. I am just brushing up to refresh my memory
sup guys
I'm having a css issue
after I search, the results get cut off on mobile
hmm I think it's actually a safari issue not device issue
whats up guys, having some trouble getting my json data to tell me whether an twitch use is currently live or offline, i tried passing a url query but I honestly dont know if I am doing it right, the console prints out data but i dont see if I user is live or not
$(document).ready(function(){
var users = ["ESL_SC2", "freecodecamp","noobs2ninjas"]
var i=0;
while (i<users.length){
$.ajax({
type: 'GET',
url: 'https://wind-bow.glitch.me/twitch-api/users/'+users[i]+'?stream_type=live',
success: function(data) {
$('#users').append('<li>'+data.display_name+'</li>');
console.log(data)
}
})
i++
}
});
Is display_name on of the keys in the twitch API object? I thought it was user. I might be wrong though, I didn't code that data, I hardcoded it into the html.
One*
I mean I didn't call that data.
Also, $(document).ready() is not recommended anymore. Wrap your code in a function and do $(yourFunctionName) instead.
found answer to my overflow issue here if anyone's curious: https://stackoverflow.com/questions/33454533/cant-scroll-to-top-of-flex-item-that-is-overflowing-container
Awesome @ksc23
@piteto cool thanks, so no more doccument ready? i saw something about it,i think they called it short code and it was $(function(){<code>}; is that what you’re referring to?
rafaelmonroy sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
api offline
can someone take a look at my weather app and tell me why my weather icons will not go away when a new icon pops up?
@just1witness yeah, i was just messing around with a code to see what info I can, I like to do that to familiarise myself witht that data, also just to practice lol
we need a medic ... cbot is down, i repeat, cbot is down
@rafaelmonroy They all work (for now), but the only recommended way is
$( functionName )
@piteto ohh ok, ill make sure to implement this from now on, thanks
rafaelmonroy sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
api offline
no problem
@adamfaraj That's some complicated caching code you have, I'll see if I can figure out why the icon doesn't change
@piteto thanks. everything changes, except the icon
adamfaraj sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
api offline
@adamfaraj It seems you arne't resetting the icons back to display: none before setting them to display:block
if (dom.wthr[0].textContent == "Clouds") {
dom.clouds.css({"display": "block"})
} else if (dom.wthr[0].textContent == "Rain" || dom.wthr[0].textContent == "Mist") {
dom.rain.css({"display": "block"})
} else if (dom.wthr[0].textContent == "Clear") {
dom.sunny.css({"display": "block"});
}
Once it's set up as display: block, it never gets set back to display: none
@piteto is it not covered by my if else statements?
@piteto how do i reset it
@adamfaraj Your if/else statements only set it to display: block. They don't set it to display: none.
So, when you search for a new city, all of them have to be set to display: none again
Then your if/else statement can run as usual
@piteto before or after my if/else?
@piteto nvm got it
why isn't my function executing when i hit "enter"?
dom.searchButton.on('click keypress', requestForecast);
var requestForecast = function(e) {
if (e.which === 13 || e.type === 'click') {...
What kind of CSS tool do I need to use to make the background kinda cut off a bit to make this kind of effect? What is it called, anyway?
Might be skewed.
Like this @krckyboy ? https://www.viget.com/articles/angled-edges-with-css-masks-and-transforms
@hashtagyolo1 Yes, thank you! Want to make some projects for practicing and I always wondered how to make that. Thank you once again.
krckyboy sends brownie points to @hashtagyolo1 :sparkles: :thumbsup: :sparkles:
api offline
np
@krckyboy
Hi Need little help, Bug in one line is stopping me complete "Wherefore art thou" challenge. Bug is on line 37 of code which is never true while it should be, I have checked this code through debugger. Here is the code https://repl.it/KjvR/2
hello guys
i have a problem here
study (title="Ultimate Oscillator Bars [LazyBear]", shorttitle="UOBARS [LazyBear]")
length7 = input(7, minval=1),
length14 = input(14, minval=1),
length28 = input(28, minval=1)
lengthSlope = input(1)
average(bp, tr, length) => sum(bp, length) / sum(tr, length)
high = max(high, close[1])
low = min(low, close[1])
bp = close - low
tr = high - low
avg7 = average(bp, tr, length7)
avg14 = average(bp, tr, length14)
avg28 = average(bp, tr, length28)
out = 100 (4avg7 + 2*avg14 + avg28)/7
plot(out, color=red, title="UO")
bgcolor(falling(out, lengthSlope) ? red : (rising(out, lengthSlope) ? green : blue), transp=50)
}
length7 = input(7, minval=1),
length14 = input(14, minval=1),
length28 = input(28, minval=1)
lengthSlope = input(1)
average(bp, tr, length) => sum(bp, length) / sum(tr, length)
high = max(high, close[1])
low = min(low, close[1])
bp = close - low
tr = high - low
avg7 = average(bp, tr, length7)
avg14 = average(bp, tr, length14)
avg28 = average(bp, tr, length28)
out = 100 (4avg7 + 2*avg14 + avg28)/7
plot(out, color=red, title="UO")
bgcolor(falling(out, lengthSlope) ? red : (rising(out, lengthSlope) ? green : blue), transp=50)
}
Always having error declaration without type
Looks like clip-path isn't supported by most browsers. Any better alternatives?
@krckyboy I heard SVG is the alternative with better support
could anyone please help me in front end. In the given codepen link I want to make them blink. how can i do that?
https://codepen.io/mukul09/pen/KvYYEG?editors=1010
https://codepen.io/mukul09/pen/KvYYEG?editors=1010
try with fadein and fadeout...
$(document).ready(function(){
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
if(navigator.geolocation)
{
getTheLocation();
}
function getTheLocation()
{
img.src getJSON("https://api.apixu.com/v1/current.json?key=0ae3f8564e5642f19da100047172308&q=Paris")
output.appendChild(img);
}
});
what is wrong in this?
@Ranacode
Hey guys I have one question working with gulp
I want to uglify all the js files inside my directory but I don't want to concat them, just output in separate files in another folder
how can I achieve this without make an individual task for each one?
Hey guys I have one question working with gulp
I want to uglify all the js files inside my directory but I don't want to concat them, just output in separate files in another folder
how can I achieve this without make an individual task for each one?
I dont know about this concept...
I think it will help u...
I am trying to achieve an overlay color on top of my background image. I corrected the order of the div and still no success. Here is the link to my codepen: https://codepen.io/quickspeedy/pen/LjvrNx
Hi, I'm working on the Local Weather API and having a hard time constructing my query string. I have two variables that hold the lat, long, but when I pass them in as data objects in my AJAX call it is coming back undefined. Can anyone help? Here is my codepen: https://codepen.io/Feldbot/pen/MvRZqZ?editors=1011.
@quickspeedy I tried just switching the class names on your divs and it seemed to work (lines 20, 21)
@Feldbot It worked and it is strange since it's not in the correct order. Thank you!
quickspeedy sends brownie points to @feldbot :sparkles: :thumbsup: :sparkles:
api offline
@quickspeedy Glad that worked :-)
@Feldbot the ajax call is running before location is determined. Wrap your .ajax call in a function and call that function inside your navigator.geolocation function.
Hey guys I found a good introductory course and its free https://flatironschool.com/programs/online-bootcamp-prep-course/
@rafaelmonroy I think to check whether a stream is online or not you have to access this api https://wind-bow.gomix.me/twitch-api/streams/freecodecamp.It returns a stream object which if null means the person is not streaming and hence offline.
@mukul09 Looks like they are blinking - from looking at your CSS, is this what you're trying to do? https://codepen.io/anon/pen/NvVgXG?editors=0110
hi guys... in input text box, i want the input text disappear and be replaced by "bubbles" , how can i? i created a bubbles in a div but i need help in input
@piteto The call is still coming back undefined... By the way, do you know of a way to display what the fully built URL and query string is so I can check the output?
@Feldbot Sorry, to be clear, put
getWeather(latitude, longitude); inside your showPosition function, after you define latitude and longitude.
Your function that wraps around the ajax also needs to have
latitude, longitude in the parentheses so you can pass that data over
To see the fully built url, use your dev tools
F12
Thanks piteto, that worked. I have a really hard time still understanding how arguments are passed. I didn't know they could actually be variables that were passed out from the function, I thought they were always placeholder values for things that were being passed around.
@piteto I'm still wondering if I needed to create global vars for longitude and latitude. I tried making them local variables in the showPosition function to see if they would get passed to the Ajax call, and it didn't seem to.
@Feldbot Yeah, those aren't needed with the code you have now. location is async, so the variables won't be global until after your location is available.
does anyone know how I can use the * to remove the margin? It's not working https://codepen.io/anon/pen/OjYjQp
@intcreate The * is low priority for CSS rules, so it can't override your
h1 selector
You would have to use
!important
oh
I guess you could use :root too:
:root * {
margin: 0;
}
that worked
what is root
It is the root of the document
ok thanks i used the html * instead
because :root is not supported by some browsers
Some really old browsers perhaps. http://caniuse.com/#search=%3Aroot
yeah
@piteto I have another question maybe you can help me with. I'm still learning how to build query strings, and in the current project it is set up to pass parts of the string as data through Ajax. As I understand it, all the data parts of the call are key/value pairs. How would I append another part of a URL string itself? For example, the instructions say to use
https://fcc-weather-api.glitch.me/ as the endpoint, but the route is /api/current?lon=:longitude&lat=:latitude. I wrote my code to have the endpoint URL as https://fcc-weather-api.glitch.me/api/current? so I could then have the data append the query. How would I pass in something like api/current/? to the Ajax call?
@Feldbot I don't think there's a way to do that with a $.ajax parameter
This may be "controversial"...but if you're worried about the URL getting too long, you can put individual components in an array and join them. I did that for my Wikipedia project
Instead of this:
var url = "https://en.wikipedia.org/w/api.php?action=query&origin=*&format=json&formatversion=2&prop=pageimages|extracts&pithumbsize=500&exintro=true&generator=search&gsrsearch=" + encodeURIComponent(searchInput.value) + "&gsrlimit=18";I did this:
var url = [
"https://en.wikipedia.org/w/api.php",
"?action=query",
"&origin=*",
"&format=json",
"&formatversion=2",
"&prop=pageimages|extracts",
"&pithumbsize=500",
"&exintro=true",
"&generator=search",
"&gsrsearch=" + encodeURIComponent(searchInput.value),
"&gsrlimit=18"
].join("");
@piteto Thanks for looking, and for the heads up! Moving on to the Wikipedia challenge soon and am dreading that after looking at their API docs. Using .join is a neat way to do that. I was looking at jQuery's $.param() method which does similarly.
feldbot sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
api offline
Yo guys, im kinda really new here, and a friend told me about the chat of freecodecamp, thing is im learning to html/css/bootstrap and trying with a downloaded template, but im having troubles to make a text curvy or italic on a <p> so i've tried using <i> and also <em> on it, and it won't show the selected text on italic. Somebody could guide me on what might be wrong, please please ? THANK YOU A LOT!
@diegoignacious What happens if you make
<p style="font-style: italic;">My paragraph</p>?
oh, let's see !
@diegoignacious (But that is not the way it should be done then, I just want to know it ^^)
f*ck, it did it!
but there is another trouble
that red text
it should next to "unos jovenes"
im Chilean btw, thats why the spanish text
but, it seems it's getting better, because at least it prints on italic
@Otto-AA thanks! , would you know how can i make it on the same line ?
diegoignacious sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
api offline
this is my code
<section id="skill_sec" class="col-lg-10 col-md-11 col-sm-11 center-div skills-wrap sec-pad-top sec-pad-bottom-xs">
<h6>technical skills</h6>
<p class="wow fadeInUp" data-wow-duration=".4s">La busqueda empieza a unos jovenes <p style="font-style: italic;">muy jovenes</p>, cuando por mera egolatría, quise <em>sprintear</em> mis frags en aquél codiciado shooter <strong>cs1.6</strong> descargando y manipulando por primera vez un software de edición ; <b>Adobe Photoshop CS.</b> El tiempo libre y el hambre de crear me llevó a practicar, observar <em>sobre todo observar</em>, a leer y a cobrar por mis primeros "humildes" trabajos <strike>por no decir horri..ejem inexpertos, incoherentes y saturados, con organizadores de fiestas de dudosa reputación que se dedicaban a <em>poncear</em> un domingo a las tres de la tarde</strike>,<em><a href=http://www.flickr.com/diegoignaciophotos>si quiere llorar con mi talento de aquellos años, click aquí</a></em> </p>
<h6>technical skills</h6>
<p class="wow fadeInUp" data-wow-duration=".4s">La busqueda empieza a unos jovenes <p style="font-style: italic;">muy jovenes</p>, cuando por mera egolatría, quise <em>sprintear</em> mis frags en aquél codiciado shooter <strong>cs1.6</strong> descargando y manipulando por primera vez un software de edición ; <b>Adobe Photoshop CS.</b> El tiempo libre y el hambre de crear me llevó a practicar, observar <em>sobre todo observar</em>, a leer y a cobrar por mis primeros "humildes" trabajos <strike>por no decir horri..ejem inexpertos, incoherentes y saturados, con organizadores de fiestas de dudosa reputación que se dedicaban a <em>poncear</em> un domingo a las tres de la tarde</strike>,<em><a href=http://www.flickr.com/diegoignaciophotos>si quiere llorar con mi talento de aquellos años, click aquí</a></em> </p>
sorry, dont know how to send it like a code frame, don't ban me please :(
@diegoignacious use <span> instead of <p>
HOLY SH*T ! , im so excited right now
it did it !
thank you @piteto , im starting to believe on humanity again
diegoignacious sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
api offline
every time i was stuck, i got bored and i used to quit onthis sh*t, but now i have the feeling that i'm not alone. THANKYOU! @piteto
diegoignacious sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
api offline
thankyou also @Otto-AA
Hello, I just added an overlay div on top of the background image, however there is a problem with the positioning for overlay div. It's not positioned correctly. I tried to use top and left, but no luck. Any help would be appreciated. https://codepen.io/quickspeedy/pen/Mvdmxw
@quickspeedy you want the overlay to cover the image?
@jtan3 Yes. The overlay div is not positioned correctly on the image.
@quickspeedy move
<div class="overlay"> and put it under <div class='bg>
@quickspeedy look up z-index to make your text be in front of the overlay
@jtan3 I tried but now there is a white space between the nav and the image. The image is brighter which it shouldn't happen.
<div class="bg">
<div class="overlay">
<h1 class="text-center title">Web Developer</h1>
<h3 class="text-center subtitle">-- Daniel Saavedra --</h3>
</div>
</div>
@quickspeedy
@jtan3 My apology, I got it. I must it move the bg under the overlay. Works now.
@jtan3 Thank you!
quickspeedy sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
api offline
@jtan3 I tried the z-index for the title and subtitle and it seems to not work. Here is the updated code: https://codepen.io/quickspeedy/pen/Mvdmxw
@quickspeedy did you read z-index?
@quickspeedy you want the text to be in front of the overlay.
Yes I did, it had to do with the layer and you can assign number to the layer as the larger number will be front correct?
@jtan3
So I assigned title and subtitle as z-index 5 and overlay as z-index 1. Seems to not do anything, but if I changed the overlay and image div. It worked.
I changed the color of the and z-index of the h1 @quickspeedy
@quickspeedy its still kinda of hard to read with the overlay
I tried to change the color but it has not effect. @jtan3 Am I allowed to upload a picture to show my problem?
@quickspeedy why do you need an overlay?
I need the overlay to help darken the background image. @jtan3
Or to add gradient to the image for the future.
@quickspeedy the overlay div is connect to your text. So everything you do to the overlay the text is affected too.
@quickspeedy not sure how to fix it.
@jtan3 I see. I appreciate your help!
Having trouble with a null value on an http request, anyone have a minute to look over what I'm doing wrong?
@cjharkins you can just ask your question. I'm sure someone will try to help.
@jtan3 Will do thank you!
quickspeedy sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
api offline
@quickspeedy https://stackoverflow.com/questions/21957356/darken-a-background-image-without-affecting-the-text maybe this can help
My $.get(stream) won't populate users on fail
The object returns null
I've tested inside the callback for null, to display one message or the other
@cjharkins the api call doesn't fail when the user isn't streaming
if the api call failed, you could run code inside .fail()
When I test for null inside the callback to run the alternate message, the users don't populate
@cjharkins change your streams url to an invalid url and you'll see that .fail() will fire. you need to test for online/offline inside the success function
For example:
const stream = "https://wind-bow.glitch.me/twitch-api/streamsssssssss/" + arr;
I'm still not sure what to test for within callback, I do
if (streamData === null) {
do the alternate;
}and I still get nothing
Look at
streamData.stream
test against that?
I updated equality to streamData.stream === null and still got nothin
@cjharkins Hit F12 and look at your dev tools for errors to debug
Uncaught TypeError: Cannot read property 'game' of null
You're trying to use streamData.stream before checking whether or not it's null
You rock!
Thank you!
@piteto thank you!
cjharkins sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
api offline
:)
Hey everyone,
I'm having an issue with one of the API problems. Anyway I'm unable to get the the variables from my code to work in the rest of the code.
var navigator = '';
var latitude, longitude, url
function getVars(){
navigator.geolocation.getCurrentPosition(function(position){
latitude = position.coords.latitude;
longitude = position.coords.longitude;
url = "https://fcc-weather-api.glitch.me/api/current?lat="+latitude+"&lon="+longitude
});
console.log(url)
}
function getJson(json){
$.getJSON(url, function(json) {
$("#city").html(json.name + ", "+json.sys.country );
});
}
$(document).ready(function(){
getVars();
console.log(latitude, longitude)
getJson();
})So when I run the page I get three undefined's for the console.logs that I ran. But then after everything has run, if I input latitude or longitude on the Chrome console, it will actually return those values. Can anyone think of the issue?
Thanks,
@Keggatron yup both of those calls are asynchronous, so by the time your getVars function completes the other code has already run. You can try nesting your getJSON within your getVars function, or use promises or callbacks
you can just move your getJson function call to the inside of your getVars function, passing the url as the argument and modify the parameter in getJson to url or whatever
So something like this:
var latitude, longitude, url
function getVars(){
navigator.geolocation.getCurrentPosition(function(position){
latitude = position.coords.latitude;
longitude = position.coords.longitude;
url = "https://fcc-weather-api.glitch.me/api/current?lat="+latitude+"&lon="+longitude
});
getJson(url);
}
@cmccormack sorry
@Keggatron close , the function call has to be within your getCurrentPosition callback
That way it will only call getJson once the ajax call for the location has returned, instead of immediatly after you start the call
@cmccormack seriously? That was it eh. Thanks a bunch bud. Took me a while to try that , such a simple thing I probably should have tried.
keggatron sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
api offline
@Keggatron Just about everyone has issues with asynchronous calls in the beginning
So why does even if I call the getVars function first, why would the the getJson function complete before it?
if you call them both asynchronously, your getJson function will fail as the url will be undefined
Which one completes first is entirely up to how fast the ajax call can be completed, but because you can't know that ahead of time you have to set up your code to react only to the response
Great thanks again!
np
hello everyone....I need some advice, what's the recommended container max-width in a website? I usually use max-width of 1200px... is this correct?
How can i make the earth spin/rotate? https://jsfiddle.net/La3qbr0v/
@intcreate it's a 2d picture, probably best to use a video or animated image. If you want a 2D spin, though: https://jsfiddle.net/La3qbr0v/2/
@ingundela The recommendation depends entirely on your website content and customer requirements