CodeYourFuture · AliHaider-1 · Sep 23, 2020 · Sep 24, 2020 · Sep 24, 2020 · Sep 24, 2020
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,9 @@ Take a look at the following code:
 
 Explain why line 4 and line 6 output different numbers.
 
+The line 4 and line 6 displays different output because the line 4 is inside the block scope and get the value from line 3 . The line 6 display the value which it get from line 1 which is global variable. and the value of x at line 3 is not accessible at line 6 because of its block scope.
+
+
 ## Question 2
 
 Take a look at the following code:
@@ -33,6 +36,8 @@ console.log(y)
 ```
 
 What will be the output of this code. Explain your answer in 50 words or less.
+The output will be 10 from line 34 and undefined from line 35. The reason of undefined output of y at line 35 is because y is defined inside the block scope at line 31 and not accessible outside the block scope.
+
 
 ## Question 3
 
@@ -61,3 +66,5 @@ console.log(y);
 ```
 
 What will be the output of this code. Explain your answer in 50 words or less.
+As the x is assigned as the constant variable so its value cannot be changed after the function run and will display the value 9.
+As the y is constant but it is assigned to an object thats why with in the object the value of x is changed by using function f2 and will display { x:  10 } .
diff --git a/week-3/Homework/mandatory/1-practice/app.js b/week-3/Homework/mandatory/1-practice/app.js
@@ -0,0 +1,52 @@
+let temperatureDescription = document.querySelector(".temperature-description");
+let temperatureDegree = document.querySelector(".temperature-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 => {
+                const { temperature, summary, icon } = data.currently;
+                // set DOM elements from the API
+                temperatureDegree.textContent = temperature;
+                temperatureDescription.textContent = summary;
+                locationTimezone.textContent = data.timezone;
+                // formula for celcius
+                let celsius = (temperature - 32) * (5 / 9);
+                // set icon
+                setIcons(icon, document.querySelector(".icon"));
+
+                // change temp C/F
+                temperatureSection.addEventListener("click", () => {
+                    if (temperatureSpan.textContent === "F") {
+                        temperatureSpan.textContent = "C";
+                        temperatureDegree.textContent = Math.floor(celsius);
+                    } else {
+                        temperatureSpan.textContent = "F";
+                        temperatureDegree.textContent = temperature;
+                    }
+                })
+            });
+    });
+
+
+}
+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-3/Homework/mandatory/1-practice/index.html b/week-3/Homework/mandatory/1-practice/index.html
@@ -0,0 +1,27 @@
+<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" />
+    <title>Weather</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">Its friggnin cold</div>
+    </div>
+    <script src='skycons.js'></script>
+    <script src='app.js'></script>
+</body>
+
+</html>