Skip to content
This repository was archived by the owner on Oct 26, 2020. It is now read-only.

Sulaiman week 9 #1027

Open
wants to merge 2 commits into
base: manchester3
Choose a base branch
from
Open

Sulaiman week 9 #1027

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
77f4b89
added week 9
SULAIMAN-100 Jul 9, 2020
2fb0c22
added week 9
SULAIMAN-100 Jul 9, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions week-9/Homework/mandatory/1-practice/2-code-reading.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ Take a look at the following code:

Explain why line 4 and line 6 output different numbers.

<!-- Because line 4 is between a block so the value of x is reassigned only between the curly braces by 2 while in line 6 the value of x remains 1 for the global variable -->

## Question 2

Take a look at the following code:
Expand All @@ -34,6 +36,9 @@ console.log(y)

What will be the output of this code. Explain your answer in 50 words or less.

<!-- the consol log displays values within its area and the values of global variable which are not re-assigned within the block of the console; here, the first output is the log x which is assigned as a global variable 10, the second console is undefined whereas the function f1 has no return value, and the last log y is not defined, it is only assigned within a block-->


## Question 3

Take a look at the following code:
Expand All @@ -44,6 +49,7 @@ const x = 9;
function f1(val) {
val = val + 1;
return val;

}

f1(x);
Expand All @@ -61,3 +67,4 @@ console.log(y);
```

What will be the output of this code. Explain your answer in 50 words or less.
<!-- The first output x is logged with its assigned value 9, the second output is the object y => { x: 10} where the key x is accessed and re-assigned in function f2, so as f2 is called the value of x become 10. if y is consoled befor f2 call it will be { x: 9 } -->
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

3/3 - perfect! Well done :) 💯

26 changes: 26 additions & 0 deletions week-9/Homework/mandatory/1-practice/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 rel = 'stylesheet' href="./style.css" />
<title>Wheather app</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">0.0</h2>
<span>F°</span>
</div>
<div class="temperatur-description">Status</div>
</div>


<script src="skycons.js"></script>
<script src="script.js"></script>
</body>
</html>
52 changes: 52 additions & 0 deletions week-9/Homework/mandatory/1-practice/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
window.addEventListener('load', ()=> {
let long;
let lat;
let temperatureDescription = document.querySelector('.temperatur-description')
let temperatureDegree = document.querySelector('.temperature-degree')
let locationTimezone = document.querySelector('.location-timezone')
let temperatureSection = document.querySelector('.temperature')
let temperaturSpan = document.querySelector('.temperature span')

if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(positon => {
long = positon.coords.longitude
lat =positon.coords.latitude
const proxy = " https://cors-anywhere.herokuapp.com/"
const api = `${proxy}https://api.darksky.net/forecast/fd9d9c6418c23d94745b836767721ad1/${lat},${long}`

fetch(api)
.then(data => data.json())
.then(data=> {
console.log(data)
const {temperature, summary, icon} = data.currently
//Set DOM Elements form the api
temperatureDegree.textContent = temperature
temperatureDescription.textContent = summary
locationTimezone.textContent = data.timezone

//formula for celsius
let celsius = (temperature - 32) * (5/9)
//Set Icons
setIcons(icon, document.querySelector('.icon'))

//Set degree to celsius/ Fahrenheit
temperatureSection.addEventListener('click', ()=>{
if(temperaturSpan.textContent === 'F°'){
temperaturSpan.textContent = 'C°'
temperatureDegree.textContent = Math.floor(celsius)
} else {
temperaturSpan.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])
}
})
Loading