Day 181: FCC, "Show the Local Weather"

Today I'm starting on the first of the 6 Intermediate Front End Projects, "Show the Local Weather."  This project requires us to use an API to create a webpage that gives the user the weather at his location.  Here's the user stories we need to complete:

All right, let's get started.  Here's the geolocation code we used in the JSON earlier:

$("#getMessage").on("click", function(){
      // Only change code below this line.  The code below pulls the raw JSON into the message.
      $.getJSON("/json/cats.json", function(json) {    
        $(".message").html(JSON.stringify(json));      
      });

    });

With that code, I can get the coordinates, and then I have to input that into the API somehow.

Ok, so my challenge right now is to get the data from the weather API and somehow work with it.  That's what I'm working on right now.

Well, I finished the challenge, I used a Udemy course for guidance, it helped a lot, but it was written in pure JavaScript, and I wanted to do the design in JQuery, so I had to research a lot anyways.  It also didn't have the converter, so I had to do that as well.  The main thing I took away from it was how to pull the JSON data from the weather API.  That actually has to be done in a certain format or the data just won't come through.  Here's my design:

Pretty cool, huh?  It converts to celsius, and one neat thing was that to convert back, I didn't need to calculate back to fahrenheit (because we already had that value).  I mean I had the formula, but what I did was when I converted from fahrenheit to celsius, I didn't change the original variable, I simply created a new variable, celsius (based on the temperature variable), and when I needed to switch back, I just output the temperature variable, which was still the same.

I had a big problem with the code not functioning properly due to scope issues, so I ended up nesting the code within itself, deeper and deeper, but I'd like to come up with a more modular solution, if possible, so I'm going to rework the code tomorrow.  Another thing is that the background image loads after several seconds, so perhaps there's a way to speed that up (maybe by making the code more modular).  Also, before the data loads, the divs are empty and there is no background at all (just a black background), and that's not very user-friendly, so perhaps I'll give the divs (or create divs) that hold the data a default size tomorrow, and perhaps I'll make a friendlier-looking default background.  Another option is to remove the background image altogether and instead insert a small icon next to the degrees, as that's allowed as well.  An icon would load faster, but since the images will be pulled from elsewhere either way (I'm not hosting locally, I'm linking to tinypic), maybe it will still take a bit to load anyways.  We'll see, but there's a lot of room for improvement here, and also, a lot of room for much more learning.  

This is a GREAT project.

SUMMARY OF CODING SKILLS

Total Treehouse Points: 5,503
Treehouse Points by Subject Matter (Miscellaneous not included): 
HTML:                                663 
CSS:                                1,599 
Design:                            1,193 
Development Tools:            747 
JavaScript:                      1,239

Treehouse Ranking (%): "You have more total points than 93% of all students."

Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques

Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% complete, switched focus from web design to web dev)
Console Foundations
Git Basics
Introduction to Programming
JavaScript Basics

Codecademy (& other) Courses Completed:
HTML and CSS (Codecademy) 

Books Read or in Progress:

Completed: "Head First HTML and CSS," by E. Robson & E. Freeman

Completed: "A Smarter Way to Learn JavaScript," by Mark Myers 

Completed: "HTML and CSS," by Jon Duckett
Completed: "JavaScript and JQuery," by Jon Duckett

My Progress on The Odin Project:

1.  Introduction to Web Development                                             100% Complete

2.  Web Development 101                                                               33% Complete 
Note: I switched to FCC for the great online community and better updates/support.

My Progress on Free Code Camp (FCC): 
1. Get Started with Free Code Camp                                                      Complete
2. HTML5 and CSS                                                                                  Complete
3. Responsive Design with Bootstrap                                                       Complete
4. Gear up for Success                                                                           Complete
5. jQuery                                                                                              Complete
6. Basic JavaScript                                                                                 Complete
7. Object Oriented and Functional Programming                                     Complete
8. Basic Algorithm Scripting                                                                   Complete
9. Basic Front End Development Projects                                                Complete
10. JSON API's and Ajax                                                                          Complete
11. Intermediate Algorithm Scripting                                                      Complete
12. Intermediate Front End Development Projects                                   On 2 of 6
13. Claim Your Front End Development Certificate
14. Upper Intermediate Algorithm Scripting
15. Automated Testing and Debugging
16. Advanced Algorithm Scripting
17. AngularJS
18. Git
19. Node.js and Express.js
20. MongoDB
21. Full Stack JavaScript Projects
22. Claim Your Full Stack Development Certificate

After the 800 hours of FCC work above, there are 800 more hours of non-profit coding projects.

Hours Spent Coding Today: 10

Total Hours Coding: 880