This is the first time I’ve actually been happy with what I made, though I realize there are a few issues.
I could not get the geolocation stuff to work on my computer (not a single completed Pen with it was viewable for me, the data just registered blank) so I used a bit of a shortcut with the autoip from Weather Underground. I wanted to learn geolocation but without a way to be sure it was working or not, this seemed like the best thing to do.
I think my code is a bit messy; I struggle with figuring out the best way to order things in JS. (Is the changeMeasurement function even necessary, or would it have been better to simply put that code under the click button event? I’m not sure how to make those decisions yet.) I’m also not sure the background works well on all platforms.
Still, though. It works! And it’s pretty! I’m getting better at this, I hope. Thank you in advance for your thoughts.
Looks good! One thing to note though is that the (document).ready(function() part should nest all your JS code, including the functions and variables. Having said that, I don’t believe it’s necessary in CodePen to have it at all so you can remove it all together.
I wouldn’t sweat the minor details now, you can always go back to your projects and clean them up when you get more experience. I would move onto the next project and keep learning.
Thank you, that is very helpful! The document ready function was confusing to me. I understand its purpose (everything within it runs when the pages loads), but I did not understand when to use it, if it should be repeated, if everything should be in it, etc. I suppose I should think of it as something like the html tag in HTML, that everything is contained in it, always?
The document ready function only needs to be called at most once, and only if your JavaScript code is going to interact with the DOM (i.e. your HTML). In other words, if you use JS to add/modify/delete any of your HTML content. For example when you initially display the weather, you’re adding content. When you click the button to convert the weather, you’re modifying content.
Best practice is just to put all your JS code inside this function, it guarantees it will only run once the browser renders all the HTML content. The order is important because jQuery selectors will look at what is currently in the DOM, not what will be there.
For example, if this code is run:
$("#location-box").html(weather.current_observation.display_location.full)
but the HTML page hasn’t finished loading onto the browser and hasn’t yet loaded this part:
<div id="location-box" class="row center box">Location</div>
that JS code won’t display anything because `$("#location-box") won’t return anything. Hope that makes some sense. If you look back at the jQuery section on FCC you’ll see all the code you write is nested inside the document.ready function.