From e66e6ab5e7fe8bf04e073dcfbd505a29cca130d5 Mon Sep 17 00:00:00 2001
From: Hadiyah <62774630+HadiyahL@users.noreply.github.com>
Date: Tue, 15 Sep 2020 14:02:52 +0100
Subject: [PATCH 1/2] Mandatory tasks 2,3,4 DONE
---
.../mandatory/1-practice/2-code-reading.md | 4 ++
.../Homework/mandatory/1-practice/index.html | 28 +++++++++++++
.../Homework/mandatory/1-practice/script.js | 25 ++++++++++++
.../Homework/mandatory/1-practice/style.css | 40 +++++++++++++++++++
.../2-exercises/exercise-1/exercise-1.js | 9 +++--
.../2-exercises/exercise-2/exercise-2.js | 37 +++++++++++++++++
.../2-exercises/exercise-3/exercise-3.js | 24 ++++++++++-
7 files changed, 162 insertions(+), 5 deletions(-)
create mode 100644 week-3/Homework/mandatory/1-practice/index.html
create mode 100644 week-3/Homework/mandatory/1-practice/script.js
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..c6cedef 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,8 @@ Take a look at the following code:
Explain why line 4 and line 6 output different numbers.
+x on line 4 is referring to the x declared within it's block scope while the x on line 6 can only access the x on line 1 which is declared within a global scope. The main reason for the difference is the use of the keyword 'let' on line 3.
+
## Question 2
Take a look at the following code:
@@ -33,6 +35,7 @@ console.log(y)
```
What will be the output of this code. Explain your answer in 50 words or less.
+Line 33 will log 10 as x is a global variable, while line 34 will log an error message as the y declared in line 30 is outside of it's scope.
## Question 3
@@ -61,3 +64,4 @@ console.log(y);
```
What will be the output of this code. Explain your answer in 50 words or less.
+Lines 53 and 63 will log the original value of the global variable x which is 9 & y - {x:9} respectively, because that is the value that is declared within its scope. The result will however be different if the function call (on lines 52 & 62) was logged.
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..e793e61
--- /dev/null
+++ b/week-3/Homework/mandatory/1-practice/index.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
+ Weather app
+
+
+
+
Timezone
+
Icon
+
+
+
+
36
+ F
+
+
+
It's friggin cold
+
+
+
+
diff --git a/week-3/Homework/mandatory/1-practice/script.js b/week-3/Homework/mandatory/1-practice/script.js
new file mode 100644
index 0000000..ff19d72
--- /dev/null
+++ b/week-3/Homework/mandatory/1-practice/script.js
@@ -0,0 +1,25 @@
+window.addEventListener("load", () => {
+ let long;
+ let lat;
+ let tempDescription = document.querySelector(".temp-description");
+ let tempDegree = document.querySelector(".temp-degree");
+ let locationTimezone = document.querySelector(".location-timezone");
+ 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) => response.json())
+ .then((data) => {
+ console.log(data);
+ });
+ // .catch((error)=> console.log(error));
+
+ //SET DOM ELEMENTS FROM THE API
+ });
+ }
+});
+//
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..e3f7f21
--- /dev/null
+++ b/week-3/Homework/mandatory/1-practice/style.css
@@ -0,0 +1,40 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ background: linear-gradient(#3a89c9, #9cc4e4);
+ color: white;
+ font-family: "Grandstander", cursive;
+}
+
+.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
index 10b93ba..d709472 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
@@ -3,9 +3,10 @@ const personOne = {
age: 34,
favouriteFood: 'Spinach'
}
-
-function introduceYourself(___________________________) {
- console.log (`Hello, my name is ${name}. I am ${age} years old and my favourite food is ${favouriteFood}.`);
+let {name, age, favouriteFood} = personOne;
+function introduceYourself(details) {
+ 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
+introduceYourself(personOne);
+
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..fe8a5cc 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,40 @@ let hogwarts = [
{ firstName: "Minerva", lastName: "McGonagall", house: "Gryffindor", pet: null, occupation: "Teacher" },
{ firstName: "Albus", lastName: "Dumbledore", house: "Gryffindor", pet: "Phoenix", occupation: "Teacher" }
]
+
+/*
+ In `exercise-2.js` write a program that will take the `hogwarts` array as input and display the names of the people who belong to the Gryffindor house.
+- Use array destructuring to extract the values you need out of the array.
+*/
+
+function getGryffindorHouseMates(arr) {
+ let mates = arr.filter((mate) => {
+ return mate.house === 'Gryffindor';
+ })
+ mates.forEach((name) => {
+ let {firstName, lastName} = name;
+ console.log(firstName + " " + lastName);
+
+ })
+ console.log("");
+}
+getGryffindorHouseMates(hogwarts);
+
+/*
+## Task 2
+
+- In `exercise-2.js` write a program that will take the `hogwarts` array as input and display the names of teachers who have pets.
+- Use array destructuring to extract the values you need out of the array.
+*/
+
+function getTeachersWithPet(arr) {
+ let teachersWithPet = arr.filter((teacher) => {
+ return teacher.occupation === 'Teacher' && teacher.pet !== null;
+ })
+ teachersWithPet.forEach((name) => {
+ let {firstName, lastName} = name;
+ console.log("Teacher(s) with pet: ");
+ console.log(`${firstName} ${lastName}`);
+ })
+}
+getTeachersWithPet(hogwarts);
\ 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..c21d376 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,26 @@
{ itemName: "Hot Coffee", quantity: 2, unitPrice: 1.00},
{ itemName: "Hash Brown", quantity: 4, unitPrice: 0.40}
]
-
\ No newline at end of file
+
+ /*
+Write a program that will print out the receipt for this order.
+- Log each individual item to the console.
+- Log the total cost of the order to the console.
+ */
+
+ function printOrderReceipt(orderArray) {
+ console.log(`QTY ITEM TOTAL`);
+ let total = 0;
+ let itemTotal = 0;
+ orderArray.forEach((item) => {
+ let {itemName, quantity, unitPrice} = item;
+ itemTotal = unitPrice * quantity;
+ console.log(`${quantity} ${itemName} ${itemTotal}`);
+ total += itemTotal;
+
+ })
+ console.log("");
+ console.log(`Total: ${total}`);
+ }
+
+ printOrderReceipt(order);
\ No newline at end of file
From 92333c290128355940a004acb454179d94edcb09 Mon Sep 17 00:00:00 2001
From: Hadiyah <62774630+HadiyahL@users.noreply.github.com>
Date: Sat, 19 Sep 2020 00:03:43 +0100
Subject: [PATCH 2/2] Tasks 1,2&3 completed
---
.vscode/settings.json | 3 +
.../Homework/mandatory/1-practice/script.js | 25 -
.../1-practice/{ => weather-app}/index.html | 3 +-
.../1-practice/weather-app/script.js | 56 ++
.../1-practice/weather-app/skycons.js | 726 ++++++++++++++++++
.../1-practice/{ => weather-app}/style.css | 0
.../2-exercises/exercise-1/exercise-1.js | 16 +-
.../2-exercises/exercise-2/exercise-2.js | 108 ++-
.../2-exercises/exercise-3/exercise-3.js | 5 +-
9 files changed, 878 insertions(+), 64 deletions(-)
create mode 100644 .vscode/settings.json
delete mode 100644 week-3/Homework/mandatory/1-practice/script.js
rename week-3/Homework/mandatory/1-practice/{ => weather-app}/index.html (88%)
create mode 100644 week-3/Homework/mandatory/1-practice/weather-app/script.js
create mode 100644 week-3/Homework/mandatory/1-practice/weather-app/skycons.js
rename week-3/Homework/mandatory/1-practice/{ => weather-app}/style.css (100%)
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6f3a291
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/week-3/Homework/mandatory/1-practice/script.js b/week-3/Homework/mandatory/1-practice/script.js
deleted file mode 100644
index ff19d72..0000000
--- a/week-3/Homework/mandatory/1-practice/script.js
+++ /dev/null
@@ -1,25 +0,0 @@
-window.addEventListener("load", () => {
- let long;
- let lat;
- let tempDescription = document.querySelector(".temp-description");
- let tempDegree = document.querySelector(".temp-degree");
- let locationTimezone = document.querySelector(".location-timezone");
- 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) => response.json())
- .then((data) => {
- console.log(data);
- });
- // .catch((error)=> console.log(error));
-
- //SET DOM ELEMENTS FROM THE API
- });
- }
-});
-//
diff --git a/week-3/Homework/mandatory/1-practice/index.html b/week-3/Homework/mandatory/1-practice/weather-app/index.html
similarity index 88%
rename from week-3/Homework/mandatory/1-practice/index.html
rename to week-3/Homework/mandatory/1-practice/weather-app/index.html
index e793e61..c26d1f2 100644
--- a/week-3/Homework/mandatory/1-practice/index.html
+++ b/week-3/Homework/mandatory/1-practice/weather-app/index.html
@@ -13,7 +13,7 @@