CodeYourFuture · GTabala · Sep 13, 2020 · Sep 14, 2020 · Sep 14, 2020 · Sep 14, 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
@@ -14,6 +14,7 @@ Take a look at the following code:
 ```
 
 Explain why line 4 and line 6 output different numbers.
+On line 6, x is a global variable. On line 4, x is a local variable whose scope is within a block of lines 2 through 5.
 
 ## Question 2
 
@@ -33,6 +34,10 @@ console.log(y)
 ```
 
 What will be the output of this code. Explain your answer in 50 words or less.
+There will be:
+10 - x is a global variable. (line 28)
+undefined - the function f1 doesn't return any value. (line 32)
+error - variable y is not defined - variable y has a scope only within the function f1. (line 33)
 
 ## Question 3
 
@@ -61,3 +66,12 @@ console.log(y);
 ```
 
 What will be the output of this code. Explain your answer in 50 words or less.
+
+On line 47 defines a global constant x with value 9.
+On line 54 calls function f1, but the result doesn't set to any variable.
+Function f1 gets the value of constant x as a parameter and doesn't change it (and even can't).
+On line 55 the result will be 9.
+On line 57 defines a global constant and sets to object.
+On line 64 calls function f2, but the result doesn't set to any variable.
+Nevertheless, function f2 gets an object y as a parameter and change its property. 
+On line 65 the result will be {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 @@
+window.addEventListener("load", () => {
+  let lon;
+  let lat;
+  let units = "&units=metric";
+
+  if (navigator.geolocation) {
+    navigator.geolocation.getCurrentPosition((position) => {
+      lat = position.coords.latitude;
+      lon = position.coords.longitude;
+
+      const api = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=1912a0abbf3e8fabf3a7532ad1fe6bf3${units}`;
+
+      fetch(api)
+        .then((response) => response.json())
+        .then((data) => {
+          console.log(data);
+          let celsius = data.main.temp;
+          let fahrenheit = ((celsius * 9) / 5 + 32).toFixed(2);
+          document.querySelector(".temperature-degree").innerHTML = celsius;
+          document.querySelector(".temperature-description").innerHTML =
+            data.weather[0].description[0].toUpperCase() +
+            data.weather[0].description.slice(1);
+          document.querySelector(".location-timezone").innerHTML =
+            data.name + " " + data.sys.country;
+          document.querySelector(
+            ".location p"
+          ).innerHTML = `<img src = "http://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png">`;
+
+          document
+            .querySelector(".temperature")
+            .addEventListener("click", () => {
+              if (
+                document.querySelector(".degree-section span").innerText === "C"
+              ) {
+                document.querySelector(".degree-section span").innerText = "F";
+                document.querySelector(
+                  ".temperature-degree"
+                ).innerHTML = fahrenheit;
+              } else {
+                document.querySelector(".degree-section span").innerText = "C";
+                document.querySelector(
+                  ".temperature-degree"
+                ).innerHTML = celsius;
+              }
+            });
+        })
+        .catch((err) => console.log(err));
+    });
+  } else {
+    console.log("Ups!");
+  }
+});
diff --git a/week-3/Homework/mandatory/1-practice/index.html b/week-3/Homework/mandatory/1-practice/index.html
@@ -0,0 +1,22 @@
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="location">
+        <h1 class="location-timezone">Timezone</h1>
+        <p>Icon</p>
+    </div>
+    <div class="temperature">
+        <div class="degree-section">
+            <h2 class="temperature-degree">34</h2>
+            <span>C</span>
+
+        </div>
+        <div class="temperature-description">It's foggy.</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,40 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    height: 100hv;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    background: linear-gradient(rgb(47,150,163), rgb(48,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,7 +4,8 @@ const personOne = {
     favouriteFood: 'Spinach'
 }
 
-function introduceYourself(___________________________) {
+function introduceYourself(anyPerson) {
+    let {name, age, favouriteFood} = anyPerson;
     console.log (`Hello, my name is ${name}. I am ${age} years old and my favourite food is ${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,13 @@ let hogwarts = [
     { firstName: "Minerva", lastName: "McGonagall", house: "Gryffindor", pet: null, occupation: "Teacher" },
     { firstName: "Albus", lastName: "Dumbledore", house: "Gryffindor", pet: "Phoenix", occupation: "Teacher" }
 ]
+
+hogwarts.filter(person => person.house === "Gryffindor").forEach(person =>{
+    let {firstName, lastName} = person;
+    console.log(`${firstName} ${lastName}`);
+});
+console.log(" ");
+hogwarts.filter(person => person.occupation === "Teacher" && person.pet).forEach(person =>{
+    let {firstName, lastName} = person;
+    console.log(`${firstName} ${lastName}`);
+});
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
@@ -1,9 +1,24 @@
- let order = [
-     { itemName: "Hot cakes", quantity: 1, unitPrice: 2.29},
-     { itemName: "Apple Pie", quantity: 2, unitPrice: 1.39},
-     { itemName: "Egg McMuffin", quantity: 1, unitPrice: 2.80},
-     { itemName: "Sausage McMuffin", quantity: 1, unitPrice: 3.00},
-     { itemName: "Hot Coffee", quantity: 2, unitPrice: 1.00},
-     { itemName: "Hash Brown", quantity: 4, unitPrice: 0.40}
- ]
-
+let order = [
+  { itemName: "Hot cakes", quantity: 1, unitPrice: 2.29 },
+  { itemName: "Apple Pie", quantity: 2, unitPrice: 1.39 },
+  { itemName: "Egg McMuffin", quantity: 1, unitPrice: 2.8 },
+  { itemName: "Sausage McMuffin", quantity: 1, unitPrice: 3.0 },
+  { itemName: "Hot Coffee", quantity: 2, unitPrice: 1.0 },
+  { itemName: "Hash Brown", quantity: 4, unitPrice: 0.4 },
+];
+
+console.log("QTY".padEnd(8), "ITEM".padEnd(20), "TOTAL");
+
+let total = 0;
+order.forEach((item) => {
+  let { itemName, quantity, unitPrice } = item;
+  let sum = quantity * unitPrice;
+  total += sum;
+  console.log(
+    ("" + quantity).padEnd(8),
+    itemName.padEnd(20),
+    sum.toFixed(2)
+  );
+});
+console.log("");
+console.log("Total: " + total.toFixed(2));