CodeYourFuture · HusseinAlsakkaf · Sep 16, 2020 · Sep 16, 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 first 'x' declared in line 1 is global and the second 'x' declared in line 3
+ is block scoped and is undefined outside that block. -->
+
 ## Question 2
 
 Take a look at the following code:
@@ -34,6 +37,11 @@ console.log(y)
 
 What will be the output of this code. Explain your answer in 50 words or less.
 
+<!-- at line 34 the invoked function will log 'x' which is a global variable declared 
+as the number 10 while at line 35 'y' will not be loged as it is undefined ouside 
+the function f1() -->
+
+
 ## Question 3
 
 Take a look at the following code:
@@ -61,3 +69,8 @@ console.log(y);
 ```
 
 What will be the output of this code. Explain your answer in 50 words or less.
+<!-- 
+at line 57 the code will log 'x' as 9 as it was origionaly declared 
+at line 60 'y' was declared as an object with one element 'x: 9' 
+function f2() at 62 will change the value of y["x"] from 9 to 9+1 
+ and thus at line 68 the code will display 'y' as { 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,57 @@
+window.addEventListener("load", () =>{
+let long;
+let lat;
+let temperatureDegree = document.querySelector(".temperature-degree");
+let temperatureDescription = document.querySelector(".temperature-description");
+let locationTimezone = document.querySelector(".location-timezone");
+let icon = document.querySelector(".icon");
+let tempUnit = document.querySelector(".degree-section");
+let tempSpan = document.querySelector(".tempSpan");
+
+
+
+
+if(navigator.geolocation){
+    navigator.geolocation.getCurrentPosition(position =>{
+      long = position.coords.longitude;
+      lat = position.coords.latitude;
+
+      const api = `http://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${long}&appid=94e23f099b7dccbcf0c17f90983d18bc`;
+
+      //api = `http://api.openweathermap.org/data/2.5/weather?lat=15.034599&lon=45.539035&appid=94e23f099b7dccbcf0c17f90983d18bc`;
+
+      fetch(api)
+        .then((Response) => {
+          return Response.json();
+        })
+        .then((data) => {
+          const temp = Math.round((data.main.temp * 9) / 5 - 459.67);
+          const description = data.weather[0].description;
+          const location = data.name;
+          //DOM
+          temperatureDegree.textContent = temp;
+          temperatureDescription.textContent = description;
+          locationTimezone.textContent = location;
+          // icon
+          let iconImg = document.createElement("img");
+          iconImg.src = `http://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png`;
+          icon.appendChild(iconImg);
+          //change unit
+          let celsius = (temp - 32) * (5 / 9);
+          tempUnit.addEventListener("click", () => {
+            if (tempSpan.textContent === "F") {
+              tempSpan.textContent = "C";
+              temperatureDegree.textContent = Math.floor(celsius);
+            } else {
+              tempSpan.textContent = "F";
+              temperatureDegree.textContent = temp;
+            }
+          });
+        });
+    });
+
+
+}
+
+
+});
diff --git a/week-3/Homework/mandatory/1-practice/index.html b/week-3/Homework/mandatory/1-practice/index.html
@@ -0,0 +1,30 @@
+<!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">
+    <title>Weather App</title>
+</head>
+<body>
+<div class="location">
+<h1 class = "location-timezone">timezone</h1>
+<p class="icon"></p>
+</div>
+<div class="temperature">
+
+    <div class="degree-section">
+    <h2 class="temperature-degree">43</h2>
+    <span class="tempSpan">F</span>
+    </div>
+
+    <div class="temperature-description">it is hot</div>
+
+
+
+</div>
+
+
+    <script src="app.js"></script>
+</body>
+</html>
diff --git a/week-3/Homework/mandatory/1-practice/style.css b/week-3/Homework/mandatory/1-practice/style.css
@@ -0,0 +1,39 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body{
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    background: linear-gradient(rgb(47,150,163),rgb(43,62,143));
+    font-family: sans-serif;
+    color: white;
+}
+.location, .temperature{
+    height: 30vh;
+    width: 50%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+.temperature{
+    flex-direction: column;
+}
+.degree-section{
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+}
+.degree-section span{
+    margin: 10px;
+    font-size: 30px;
+
+}
+.degree-section h2{
+    font-size: 40px;
+}
diff --git a/week-3/Homework/mandatory/2-exercises/exercise-1/exercise-1.js b/week-3/Homework/mandatory/2-exercises/exercise-1/exercise-1.js
@@ -4,8 +4,10 @@ const personOne = {
     favouriteFood: 'Spinach'
 }
 
-function introduceYourself(___________________________) {
-    console.log (`Hello, my name is ${name}. I am ${age} years old and my favourite food is ${favouriteFood}.`); 
+function introduceYourself(name, age, favouriteFood) {
+  console.log(
+    `Hello, my name is ${name}. I am ${age} years old and my favourite food is ${favouriteFood}.`
+  );
 }
-
-introduceYourself(personOne);
+let { name, age, favouriteFood } = personOne;
+introduceYourself(name, age, favouriteFood);
diff --git a/week-3/Homework/mandatory/2-exercises/exercise-2/exercise-2.js b/week-3/Homework/mandatory/2-exercises/exercise-2/exercise-2.js
@@ -9,3 +9,32 @@ let hogwarts = [
     { firstName: "Minerva", lastName: "McGonagall", house: "Gryffindor", pet: null, occupation: "Teacher" },
     { firstName: "Albus", lastName: "Dumbledore", house: "Gryffindor", pet: "Phoenix", occupation: "Teacher" }
 ]
+
+let minihogwarts =[
+  char1,
+  char2,
+  char3,
+  char4,
+  char5,
+  char6,
+  char7,
+  char8,
+  char9,
+] = hogwarts;
+
+
+function extract(minihogwarts) {
+
+  minihogwarts.forEach((element) => {
+    if (element.house === "Gryffindor")
+      console.log(`${element.firstName} ${element.lastName}`);
+  });
+
+  console.log("=============");
+
+  minihogwarts.forEach((element) => {
+    if (element.occupation === "Teacher" && element.pet !== null)
+      console.log(`${element.firstName} ${element.lastName}`);
+  });
+}
+extract(minihogwarts);
diff --git a/week-3/Homework/mandatory/2-exercises/exercise-3/exercise-3.js b/week-3/Homework/mandatory/2-exercises/exercise-3/exercise-3.js
@@ -6,4 +6,35 @@
      { itemName: "Hot Coffee", quantity: 2, unitPrice: 1.00},
      { itemName: "Hash Brown", quantity: 4, unitPrice: 0.40}
  ]
-
+ let individualItems = ([
+   item1,
+   item2,
+   item3,
+   item4,
+   item5,
+   item6,
+   item7,
+ ] = order);
+
+ let receipt = `
+QTY     ITEM                    TOTAL
+1       ${item1.itemName}             ${item1.unitPrice * item1.quantity} 
+2       ${item2.itemName}             ${item2.unitPrice * item2.quantity} 
+1       ${item3.itemName}             ${item3.unitPrice * item3.quantity} 
+1       ${item4.itemName}             ${item4.unitPrice * item4.quantity} 
+2       ${item5.itemName}             ${item5.unitPrice * item5.quantity} 
+4       ${item6.itemName}             ${item6.unitPrice * item6.quantity} 
+
+Total:       ${(item1.unitPrice * item1.quantity) +
+                    (item2.unitPrice * item2.quantity) +
+                    (item3.unitPrice * item3.quantity) +
+                    (item4.unitPrice * item4.quantity) +
+                    (item5.unitPrice * item5.quantity) +
+                    (item6.unitPrice * item6.quantity) 
+}
+
+
+
+
+ `;
+ console.log(receipt);