Day 183: FCC, Exploring Scope, API's, and Redoing the Weather App

O.k today I'm continuing with my exploration of scope, recursion, and API's.  I actually have a much better understanding of how to get the data from an API.  All right, in restructuring my Weather App, I now have a better grasp of both JQuery, scope, and API's.  Here's a screenshot of the final App (also, it has a default background image now, but this screenshot captures the site after the API loads, which means the background image has already changed from the default to the one based on the temperature):

And here's the code I ended up finishing up with.  I broke the functions up to make the code more modular and I also made the variables globals.  I like this code much better than my first attempt, which met all the criteria of the project, but had functions nested like Russian matryoshka dolls, and that was not ideal.  I also left much better notes, I've been getting into the habit of leaving much better notes and naming variables so that a reader can intuitively know what the variable is holding, as much as possible:

// Variables
var apiKey = "dfb43772e2aef43ded711dd9faeebb9b";
var temperature;
var weatherCon;
var area;
var url;
var lat;
var lon;
var counter = 0;
var data;
var weather;

$(document).ready(function() { 
  //The code below pulls the geolocation coordinates and places them inside the url, in the appropriate format.
  navigator.geolocation.getCurrentPosition(function(position) {
    lat = position.coords.latitude;
    lon = position.coords.longitude;
    url = "http://api.openweathermap.org/data/2.5/weather?" +
"lat=" + lat + "&lon=" + lon +
"&APPID=" + apiKey;
    sendRequest(url);   
  });
  
  // The code below enters the url above into the sendRequest() function
  function sendRequest(url) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        data = JSON.parse(xmlhttp.responseText);
        weather = {};
        weather.loc = data.name;
        //  The line of code below turns the kelvin output into fahrenheit.
        weather.temp = kelvinToFahrenheit(data.main.temp);
        weather.desc = data.weather[0].description;
        update(weather);
        function update(weather) {
          area = weather.loc;
          // The line of code below places the fahrenheit temperature into the temperature variable.
          temperature = weather.temp;
          weatherCon = weather.desc;
          $('#location').html(area);
          $('#temperature').html(temperature + "°" + "F");
          $('#weatherCon').html(weatherCon);
          setBackground();
        }
      }
    };
    // The code below specifies the type of request that is being sent to the server.
    xmlhttp.open("GET", url, true);
    // The code below sends the request to the server.
    xmlhttp.send();
  }  
  
  $("#convert").click(function() {
    toggleFahrenheitAndCelcius(temperature);
  });
  
  // The function below takes the fahrenheit measurement, which is in the temperature variable now, and uses it to create a celcius variable.  The temperature variable remains unchanged.  If the output is already in celcius (determined by the 0 and 1 counter), the output simply switches back to the temperature variable (which holds the celsius temperature).
  function toggleFahrenheitAndCelcius(temperature) { 
    if (counter === 0) {
    var celcius = Math.round((temperature - 32) * 5/9);
    $('#temperature').html(celcius + "°" + "C");
    counter = counter + 1;  
    }
    else {
    $('#temperature').html(temperature + "&deg" + "F")
    counter = counter - 1;  
    }
  }
  
  // This code sets the background for the site depending on the temperature.  I picked some images from Creative Commons.
  function setBackground() {
    if (temperature > 70) {
      $('body').css('background-image', 'url("http://i65.tinypic.com/mvrazd.jpg")');
    }
   if (temperature >= 40 && temperature <= 70) {
      $('body').css('background-image', 'url("http://i68.tinypic.com/14xoyfc.jpg")');
    }
   if (temperature < 40) {
      $('body').css('background-image', 'url("http://i68.tinypic.com/2qaohva.jpg")');
    } 
   
  }
  
  // This is the code to switch from kelvin, which is what the API outputs the temperature data at, to Fahrenheit.
  function kelvinToFahrenheit(k){
    return Math.round(k*(9/5)-459.67);
  }
  

});

All right, so the next project is the "Stylize Stories on Camper News."

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: 4

Total Hours Coding: 888