Update app.js

CodeExplainedRepo · web-flow · commit 43da0c2dd9b8 · 2019-05-19T18:17:43.000Z
diff --git a/app.js b/app.js
@@ -1,100 +1,94 @@
+// Tutorial by http://youtube.com/CodeExplained
+// api key : 82005d27a116c2880c8f0fcb866998a0
+
 // SELECT ELEMENTS
 const iconElement = document.querySelector(".weather-icon");
 const tempElement = document.querySelector(".temperature-value p");
 const descElement = document.querySelector(".temperature-description p");
 const locationElement = document.querySelector(".location p");
 const notificationElement = document.querySelector(".notification");
 
-// OUR APPLICATION DATA
+// App data
 const weather = {};
 
 weather.temperature = {
     unit : "celsius"
-};
+}
 
-// APP CONSTANTS AND VARS
+// APP CONSTS AND VARS
 const KELVIN = 273;
-
 // API KEY
 const key = "82005d27a116c2880c8f0fcb866998a0";
 
-// CHECK IF BROWSER SUPPORT GEOLOCATION and GET LOCATION
-if("geolocation" in navigator){
+// CHECK IF BROWSER SUPPORTS GEOLOCATION
+if('geolocation' in navigator){
     navigator.geolocation.getCurrentPosition(setPosition, showError);
-    
 }else{
     notificationElement.style.display = "block";
-    notificationElement.innerHTML = "<p>Browser Doesn't Support Geolocation.</p>";
+    notificationElement.innerHTML = "<p>Browser doesn't Support Geolocation</p>";
 }
 
-// SET POSITION
+// SET USER'S POSITION
 function setPosition(position){
-    console.log(position);
     let latitude = position.coords.latitude;
     let longitude = position.coords.longitude;
     
     getWeather(latitude, longitude);
 }
 
-// GET WEATHER FROM API
+// SHOW ERROR WHEN THERE IS AN ISSUE WITH GEOLOCATION SERVICE
+function showError(error){
+    notificationElement.style.display = "block";
+    notificationElement.innerHTML = `<p> ${error.message} </p>`;
+}
+
+// GET WEATHER FROM API PROVIDER
 function getWeather(latitude, longitude){
     let api = `http://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${key}`;
+    
     fetch(api)
         .then(function(response){
             let data = response.json();
             return data;
-            
-        }).then(function(data){
-            weather.temperature.value = Math.floor(data.main.temp - KELVIN); // Celsius
+        })
+        .then(function(data){
+            weather.temperature.value = Math.floor(data.main.temp - KELVIN);
             weather.description = data.weather[0].description;
             weather.iconId = data.weather[0].icon;
             weather.city = data.name;
             weather.country = data.sys.country;
-        }).then(function(){
+        })
+        .then(function(){
             displayWeather();
         });
 }
 
-// SHOW ERROR
-function showError(error) {
-    notificationElement.style.display = "block";
-    notificationElement.innerHTML = `<p> ${error.message} </p>`;
+// DISPLAY WEATHER TO UI
+function displayWeather(){
+    iconElement.innerHTML = `<img src="icons/${weather.iconId}.png"/>`;
+    tempElement.innerHTML = `${weather.temperature.value}°<span>C</span>`;
+    descElement.innerHTML = weather.description;
+    locationElement.innerHTML = `${weather.city}, ${weather.country}`;
+}
+
+// C to F conversion
+function celsiusToFahrenheit(temperature){
+    return (temperature * 9/5) + 32;
 }
 
-// toggle fahrenheit ans celcius
+// WHEN THE USER CLICKS ON THE TEMPERATURE ELEMENET
 tempElement.addEventListener("click", function(){
     if(weather.temperature.value === undefined) return;
-    if(weather.temperature.unit === "celsius"){
-        
+    
+    if(weather.temperature.unit == "celsius"){
         let fahrenheit = celsiusToFahrenheit(weather.temperature.value);
         fahrenheit = Math.floor(fahrenheit);
         
-        tempElement.innerHTML = `${fahrenheit}° <span>F</span>`;
-        weather.temperature.unit = "fahrenheit"
+        tempElement.innerHTML = `${fahrenheit}°<span>C</span>`;
+        weather.temperature.unit = "fahrenheit";
     }else{
-        tempElement.innerHTML = `${weather.temperature.value}° <span>F</span>`;
+        tempElement.innerHTML = `${weather.temperature.value}°<span>C</span>`;
         weather.temperature.unit = "celsius"
     }
 });
 
-// display weather info to ui
-function displayWeather(){
-    
-    iconElement.innerHTML = `<img src="icons/${weather.iconId}.png"/>`;
-    tempElement.innerHTML = `${weather.temperature.value}° <span>C</span>`;
-    descElement.innerHTML = weather.description;
-    locationElement.innerHTML = `${weather.city}, ${weather.country}`;
-}
-
-// °C to °F conversion 
-function celsiusToFahrenheit(temperature){
-    // (0 °C × 9/5) + 32 = 32 °F
-    return (temperature * 9/5) + 32;
-}
-
-
-
-
-
-
-
