CodeYourFuture · HadiyahL · Sep 15, 2020 · Sep 18, 2020
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/week-3/Homework/mandatory/1-practice/2-code-reading.md b/week-3/Homework/mandatory/1-practice/2-code-reading.md
@@ -15,6 +15,8 @@ Take a look at the following code:
 
 Explain why line 4 and line 6 output different numbers.
 
+x on line 4 is referring to the x declared within it's block scope while the x on line 6 can only access the x on line 1 which is declared within a global scope. The main reason for the difference is the use of the keyword 'let' on line 3.
+
 ## Question 2
 
 Take a look at the following code:
@@ -33,6 +35,7 @@ console.log(y)
 ```
 
 What will be the output of this code. Explain your answer in 50 words or less.
+Line 33 will log 10 as x is a global variable, while line 34 will log an error message as the y declared in line 30 is outside of it's scope.
 
 ## Question 3
 
@@ -61,3 +64,4 @@ console.log(y);
 ```
 
 What will be the output of this code. Explain your answer in 50 words or less.
+Lines 53 and 63 will log the original value of the global variable x which is 9 & y - {x:9} respectively, because that is the value that is declared within its scope. The result will however be different if the function call (on lines 52 & 62) was logged.
diff --git a/week-3/Homework/mandatory/1-practice/weather-app/index.html b/week-3/Homework/mandatory/1-practice/weather-app/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Grandstander:ital@0;1&family=Ranchers&display=swap"
+      rel="stylesheet"
+    />
+    <title>Weather app</title>
+  </head>
+  <body>
+    <div class="location">
+      <h1 class="location-timezone">Timezone</h1>
+      <canvas class="icon" width="128" height="128"></canvas>
+    </div>
+    <div class="temperature">
+      <div class="degree-section">
+        <h2 class="temp-degree">36</h2>
+        <span>F</span>
+      </div>
+
+      <div class="temp-description">It's friggin cold</div>
+    </div>
+    <script src="skycons.js"></script>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/week-3/Homework/mandatory/1-practice/weather-app/script.js b/week-3/Homework/mandatory/1-practice/weather-app/script.js
@@ -0,0 +1,56 @@
+window.addEventListener("load", () => {
+  let long;
+  let lat;
+  let tempDescription = document.querySelector(".temp-description");
+  let tempDegree = document.querySelector(".temp-degree");
+  let locationTimezone = document.querySelector(".location-timezone");
+  let temperatureSection = document.querySelector(".temperature");
+  const temperatureSpan = document.querySelector(".temperature span");
+
+  if (navigator.geolocation) {
+    navigator.geolocation.getCurrentPosition((position) => {
+      long = position.coords.longitude;
+      lat = position.coords.latitude;
+
+      const proxy = "https://cors-anywhere.herokuapp.com/";
+      const api = `${proxy}https://api.darksky.net/forecast/fd9d9c6418c23d94745b836767721ad1/${lat},${long}`;
+      fetch(api)
+        .then((response) => {
+          return response.json();
+        })
+        .then((data) => {
+          console.log(data);
+          const { temperature, summary, icon } = data.currently;
+
+          //SET DOM ELEMENTS FROM THE API
+          console.log(data.currently);
+          tempDegree.textContent = temperature;
+          tempDescription.textContent = summary;
+          locationTimezone.textContent = data.timezone;
+          //CONVERTING TEMPERATURE TO CELSIUS
+          let celsius = (temperature - 32) * (5 / 9);
+          //SET ICON
+          setIcons(icon, document.querySelector(".icon"));
+
+          //CHANGE TEMPERATURE TO CELSIUS/FAHRENHEIT
+          temperatureSection.addEventListener("click", () => {
+            if (temperatureSpan.textContent === "F") {
+              temperatureSpan.textContent = "C";
+              tempDegree.textContent = Math.floor(celsius);
+            } else {
+              temperatureSpan.textContent = "F";
+              tempDegree.textContent = temperature;
+            }
+          });
+        })
+        .catch((error) => console.log(error));
+    });
+  }
+
+  function setIcons(icon, iconID) {
+    const skycons = new Skycons({ color: "white" });
+    const currentIcon = icon.replace(/-/g, "_").toUpperCase();
+    skycons.play();
+    return skycons.set(iconID, Skycons[currentIcon]);
+  }
+});