CodeYourFuture · AltomHussain · Jul 10, 2020 · lannem · Jul 10, 2020 · lannem
diff --git a/week-9/Homework/mandatory/1-practice/2-code-reading.md b/week-9/Homework/mandatory/1-practice/2-code-reading.md
@@ -13,7 +13,8 @@ Take a look at the following code:
 6    console.log(x);
 ```
 
-Explain why line 4 and line 6 output different numbers.
+Explain why line 4 and line 6 output different numbers?
+Because line 4 is global variable and line 6 is local variable
 
 ## Question 2
 
@@ -34,6 +35,8 @@ console.log(y)
 
 What will be the output of this code. Explain your answer in 50 words or less.
 
+The output will 10 for the console.log of x and and undefined because of the y is not defined outside the function f1()
+
 ## Question 3
 
 Take a look at the following code:
@@ -61,3 +64,6 @@ console.log(y);
 ```
 
 What will be the output of this code. Explain your answer in 50 words or less.
+
+The console.log of x will be 9 and the f1() will not give any output because we did not console.log it.
+The console.log of y will be { x: 9 } and the f2() will not give any output because we did not console.log it
diff --git a/week-9/Homework/mandatory/1-practice/exercise.js b/week-9/Homework/mandatory/1-practice/exercise.js
@@ -0,0 +1,57 @@
+window.addEventListener("load", () => {
+  let long;
+  let lat;
+  let temperatureDescription = document.querySelector(
+    ".temperature-description"
+  );
+  let temperatureDegree = document.querySelector(".temperature-degree");
+  let locationTimeZone = document.querySelector(".location-timezone");
+  let temperatureSection = document.querySelector(".temperature");
+  let temperatureSpan = document.querySelector(".temperature span");
+  console.log(temperatureSpan);
+  if (navigator.geolocation) {
+    navigator.geolocation.getCurrentPosition((position) => {
+      long = position.coords.longitude;
+      lat = position.coords.latitude;
+      const proxy = "https://cors-anywhere.herokuapp.com/";
+      const url = `${proxy}https://api.darksky.net/forecast/fd9d9c6418c23d94745b836767721ad1/${lat},${long}`;
+      fetch(url)
+        .then((response) => {
+          return response.json();
+        })
+        .then((data) => {
+          console.log(data);
+          const { temperature, summary, icon } = data.currently;
+          // set dom elements from API
+          temperatureDegree.textContent = temperature;
+          temperatureDescription.textContent = summary;
+          locationTimeZone.textContent = data.timezone;
+          //Formula for Celsius
+          let celsius = (temperature - 32) * (5 / 9);
+
+          ///Set Icon
+          setIcons(icon, document.querySelector(".icon"));
+          ////// change temperature to Celsius/Fahrenheit
+          temperatureSection.addEventListener("click", function () {
+            if (temperatureSpan.textContent === "F°") {
+              temperatureSpan.textContent = "C";
+              temperatureDegree.textContent = Math.floor(celsius);
+            } else {
+              temperatureSpan.textContent = "F°";
+              temperatureDegree.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]);
+  }
+});
diff --git a/week-9/Homework/mandatory/1-practice/index.html b/week-9/Homework/mandatory/1-practice/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+
+  <html lang="en">
+    <head>
+      <meta charset="UTF-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <link href="style.css" rel="stylesheet" />
+      <title>Document</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="temperature-degree">34</h2>
+          <span>F°</span>
+        </div>
+        <div class="temperature-description">It is very cold</div>
+      </div>
+      <script src="skycons.js"></script>
+      <script src="exercise.js"></script>
+    </body>
+  </html>
+</html>