Day 182: FCC, Deconstructing "Show the Weather" and Redoing "Where Art Thou"

Today I'm going to rebuild my "Show the Weather" app, here's the code I have, a lot of it is from the Udemy course, but with my own key, and I chopped the code up so that I can use it inside JQuery, and then I added the temperature converter and the picture converter (the background picture changes depending on the temperature):

$(document).ready(function() { 
  //The code only runs if navigator is working and the user allows it to run.
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
    /*$("#data").html("latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude);*/
    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);
    function sendRequest(url) {
      var xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          var data = JSON.parse(xmlhttp.responseText);
          var weather = {};
          weather.loc = data.name;
          weather.temp = kelvinToFahrenheit(data.main.temp);
          weather.desc = data.weather[0].description;
          update(weather);
          function update(weather) {
            location1 = weather.loc;
            temperature = weather.temp;
            weatherCon = weather.desc;
            $('#newId').html(location1);
            $('#temperature').html(temperature + "&deg;" + "F");
            $('#weatherCon').html(weatherCon);
            setBackground();
          }
        }
    };
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
  }  
    });
  }
  // Button to convert Fahrenheit to Celcius and back
  $("#convert").click(function() {
    toggleFahrenheitAndCelcius(temperature);
  });
  function toggleFahrenheitAndCelcius(temperature) { 
    if (counter === 0) {
    // If the counter is 0, the variable celcius is calculater and output.
    var celcius = Math.round((temperature - 32) * 5/9);
    $('#temperature').html(celcius + "&deg;" + "C");
    counter = counter + 1;  
    }
    else {
    // If the counter is 1, the variable temperature, which has not changed, is output.  It isn't necessary to convert celcius back to fahrenheit, since we already know the value for fahrenheit.
    $('#temperature').html(temperature + "&deg" + "F")
    counter = counter - 1;  
    }
  }
  
  function setBackground() {
    if (temperature > 70) {
      $('#testing').html("the if statement ran");
      $('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")');
    } 
   
  }
  
});

// Variables
var apiKey = "dfb43772e2aef43ded711dd9faeebb9b";
var temperature;
var weatherCon;
var location1;
var url;
var lat;
var lon;
var counter = 0;

function kelvinToFahrenheit(k){
    return Math.round(k*(9/5)-459.67);

}

See the nesting?  I want to make it so that it's not so nested, that way you can pull a certain piece out and swap it with other code without breaking the whole thing.  That's what I'll be working on today, and after that, I'll work on the CSS.

Also, I'm watching a video called JavaScript: Understanding the Weird Parts.  I went back to "Where Art Thou," and re-did my code after pair programming with a buddy of mine.  To be honest, now that I see my old code and my new code, my old code was not good at all.  The new code actually solves the problem, in the correct manner, here it is:

function where(collection, source) {
  var finalArr = [];
  var count;
  for (var i = 0; i < collection.length; i++) {
    
    count = 0 ;
    
    for (var key in source) {
      //If the object has the property AND the value of the property in the object equals the value of the property in the source, THEN add one to the count, which makes the if statement push the object IF the count equals the amount of keys in source (because ALL the key/value pairs have to match in order for the object to be pushed to the final array).
      if(collection[i].hasOwnProperty(key) && collection[i][key] === source[key])        
      count = count + 1; 
       }
    
    if(count === Object.keys(source).length){ 
        finalArr.push(collection[i]);
        }
    
  }
    return finalArr;
}


where([{ "a": 1, "b": 2 }, { "a": 1 }, { "a": 1, "b": 2, "c": 2 }], { "a": 1, "b": 3 });

Here's the question again:

And now I'm going to go back to studying scope some more, so I can rework the weather app.

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