From 67055dbeaae3456af6b39aaf9dfd55790606f1da Mon Sep 17 00:00:00 2001 From: HusseinAlsakkaf <64165255+HusseinAlsakkaf@users.noreply.github.com> Date: Wed, 16 Sep 2020 14:57:29 +0100 Subject: [PATCH 1/2] Weather app completed --- .../mandatory/1-practice/2-code-reading.md | 13 ++++ week-3/Homework/mandatory/1-practice/app.js | 67 +++++++++++++++++++ .../Homework/mandatory/1-practice/index.html | 30 +++++++++ .../Homework/mandatory/1-practice/style.css | 39 +++++++++++ 4 files changed, 149 insertions(+) create mode 100644 week-3/Homework/mandatory/1-practice/app.js create mode 100644 week-3/Homework/mandatory/1-practice/index.html create mode 100644 week-3/Homework/mandatory/1-practice/style.css diff --git a/week-3/Homework/mandatory/1-practice/2-code-reading.md b/week-3/Homework/mandatory/1-practice/2-code-reading.md index 295964e..16f0e4a 100644 --- 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. + + ## 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. + + + ## 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. + diff --git a/week-3/Homework/mandatory/1-practice/app.js b/week-3/Homework/mandatory/1-practice/app.js new file mode 100644 index 0000000..da99a7f --- /dev/null +++ b/week-3/Homework/mandatory/1-practice/app.js @@ -0,0 +1,67 @@ +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`; + + 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; + } + + + }); + + + + }); + + + }); + + +} + + +}); \ No newline at end of file diff --git a/week-3/Homework/mandatory/1-practice/index.html b/week-3/Homework/mandatory/1-practice/index.html new file mode 100644 index 0000000..0ba11b6 --- /dev/null +++ b/week-3/Homework/mandatory/1-practice/index.html @@ -0,0 +1,30 @@ + + + + + + + Weather App + + +
+

timezone

+

+
+
+ +
+

43

+ F +
+ +
it is hot
+ + + +
+ + + + + \ No newline at end of file diff --git a/week-3/Homework/mandatory/1-practice/style.css b/week-3/Homework/mandatory/1-practice/style.css new file mode 100644 index 0000000..7e0e3eb --- /dev/null +++ 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; +} \ No newline at end of file From b823073198067087a752e50e531267980396c692 Mon Sep 17 00:00:00 2001 From: HusseinAlsakkaf <64165255+HusseinAlsakkaf@users.noreply.github.com> Date: Wed, 16 Sep 2020 16:30:08 +0100 Subject: [PATCH 2/2] Exercisea completed --- week-3/Homework/mandatory/1-practice/app.js | 78 ++++++++----------- .../2-exercises/exercise-1/exercise-1.js | 10 ++- .../2-exercises/exercise-2/exercise-2.js | 29 +++++++ .../2-exercises/exercise-3/exercise-3.js | 33 +++++++- 4 files changed, 101 insertions(+), 49 deletions(-) diff --git a/week-3/Homework/mandatory/1-practice/app.js b/week-3/Homework/mandatory/1-practice/app.js index da99a7f..8626551 100644 --- a/week-3/Homework/mandatory/1-practice/app.js +++ b/week-3/Homework/mandatory/1-practice/app.js @@ -13,51 +13,41 @@ 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`; - - 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 + 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; - 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/2-exercises/exercise-1/exercise-1.js b/week-3/Homework/mandatory/2-exercises/exercise-1/exercise-1.js index 10b93ba..9e0e9a4 100644 --- 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); \ No newline at end of file +let { name, age, favouriteFood } = personOne; +introduceYourself(name, age, favouriteFood); \ No newline at end of file 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 index 0d3ade0..c6f31f3 100644 --- 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); \ No newline at end of file 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 index b60d527..7ee50fa 100644 --- 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} ] - \ No newline at end of file + 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);