Hiba-WK3-JavaScript-Core3-HW

week-3/Homework/mandatory/1-practice/2-code-reading.md

@@ -15,6 +15,13 @@ Take a look at the following code:
 
 Explain why line 4 and line 6 output different numbers.
 
+***********************************************************************************************************************
+# The answer is 
+
+ let is block scoped .. so x between {} will not work outside this scope, it will log 2 because the log is inside the scop and although it can take the value from the global declaration but always the value of the variable will be taken from the nearst so it will take 2 not 1.. but the x = 1 is global and will work for the global scope and will log 1 . 
+***********************************************************************************************************************
+
+
 ## Question 2
 
 Take a look at the following code:
@@ -34,6 +41,12 @@ console.log(y)
 
 What will be the output of this code. Explain your answer in 50 words or less.
 
+***********************************************************************************************************************
+# The answer is 
+it will log 10 as a value of x .. but it will give an error that y is not defined .. because the log for y made out side the scope the y had been defined in .. (let is block scoped)
+***********************************************************************************************************************
+
+
 ## Question 3
 
 Take a look at the following code:
@@ -61,3 +74,11 @@ console.log(y);
 ```
 
 What will be the output of this code. Explain your answer in 50 words or less.
+
+
+***********************************************************************************************************************
+
+# The answer is 
+It will log 9  and {x:10} and the reason is x defined with const and const can not be reassined the same applied for the const object if we reassiend the object or we attemted to overwrite it, but the keys for that object are not protected so we can ressign them or overwrite them.
+***********************************************************************************************************************
+

week-3/Homework/mandatory/1-practice/app.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');
+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
+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 teperature to celsius/farenheit
+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]);
+}
+
+});

week-3/Homework/mandatory/1-practice/index.html

@@ -0,0 +1,24 @@
+<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>