Skip to content
This repository was archived by the owner on Aug 5, 2021. It is now read-only.

HomeWork #57

Open
wants to merge 20 commits into
base: master
Choose a base branch
from
5 changes: 5 additions & 0 deletions week-2/Homework/mandatory/1-practice/1-practice.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,12 @@ The following endpoint is publicly available from Github
1. What would you put in the following fields? `{owner}`, `{repo}`, `{pull_number}`?

<!-- Write your answer here -->
{owner} : user name.
{repo} :repository name.
{pull_number} :pull request reference

2. Describe in a sentence what this API endpoint returns when all of the fields are completed?

<!-- Write your answer here -->

it will load pull request
15 changes: 8 additions & 7 deletions week-2/Homework/mandatory/2-fetch-exercise/exercise.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,11 @@ Open index.html in your browser. Every time you refresh the page,
a different greeting should be displayed in the box.
*/

fetch('*** Write the API address here ***')
.then(function(response) {
return response.text();
})
.then(function(greeting) {
// Write the code to display the greeting text here
});
fetch(" https://codeyourfuture.herokuapp.com/api/greetings")
.then(function (response) {
return response.text();
})
.then(function (greeting) {
let greetingText = document.getElementById("greeting-text");
greetingText.innerHTML = greeting;
});
15 changes: 15 additions & 0 deletions week-2/Homework/mandatory/3-dog-photo-gallery/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DOG-PHOTO-GALLERY</title>
</head>
<body>
<header><button id="fetchButton">Add a dog photo</button></header>
<div id="mainDiv"><ul id="unList"></ul></div>

<!--<img src="" id="currentImage" alt="" />-->
<script src="script.js"></script>
</body>
</html>
38 changes: 38 additions & 0 deletions week-2/Homework/mandatory/3-dog-photo-gallery/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
let unList = document.getElementById("unList");
document.body.appendChild(unList);
function callAPI() {
fetch(`https://dog.ceo/api/breeds/image/random`)
.then(function (response) {
return response.json();
})
.then(function (loadImage) {
let imageList = document.createElement("li");
let dogImage = document.createElement("img");
imageList.style.display = "inline";
dogImage.style.height = "250px";
dogImage.style.width = "250px";
dogImage.setAttribute("src", loadImage.message);
imageList.appendChild(dogImage);
unList.appendChild(imageList);
})
.catch(function (error) {
console.log(error);
});
}

let button = document.getElementById("fetchButton");
button.style.margin = "0 40%";
button.style.padding = "2% 2%";
button.style.fontSize = "20px";
button.style.backgroundColor = "aqua";
button.style.border = "none";
button.style.borderRadius = "5px";
button.addEventListener("click", function () {
callAPI();
});
let mainDiv = document.getElementById("mainDiv");
mainDiv.style.backgroundColor = "aqua";
mainDiv.style.width = "100%";

//mainDiv.style.display = "flex";
//mainDiv.style.backgroundColor = "aqua";
12 changes: 12 additions & 0 deletions week-2/Homework/mandatory/4-programmer-humour/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Programmer-Humour</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<script src="script.js"></script>
</body>
</html>
13 changes: 13 additions & 0 deletions week-2/Homework/mandatory/4-programmer-humour/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
fetch(`https://xkcd.now.sh/?comic=latest`)
.then(function (response) {
return response.json();
})
.then(function (data) {
console.log(data);
let image = document.createElement("img");
image.setAttribute("src", data.img);
document.body.appendChild(image);
})
.catch(function (error) {
console.log(error);
});
2 changes: 1 addition & 1 deletion week-2/Homework/mandatory/5-project/task.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Project - Part 2
# Project - Part 2 ===========================================================================> DONE

This project should consolidate knowledge from JS2

Expand Down
9 changes: 9 additions & 0 deletions week-3/Homework/mandatory/1-practice/2-code-reading.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ Take a look at the following code:
```

Explain why line 4 and line 6 output different numbers.
Answer: The output is diffrent because the scope is diffrent the first x is outside the curly braces

## Question 2

Expand All @@ -33,6 +34,12 @@ console.log(y)
```

What will be the output of this code. Explain your answer in 50 words or less.
Answer : The output of the code will be:
10 =========> the first console.log has called the function f1 which logs out the global variable x with the value 10;
the function also intiate a varible y with a value 20 within its scope but does nothing with it.
error ==========> the second console.log will force the debugger to print an error message because variable y is unknown since it's declared in un accissible scope.



## Question 3

Expand All @@ -48,6 +55,7 @@ function f1(val) {

f1(x);
console.log(x);
Answer 1: The output will be 9 , since the function is called to increment the variable x but the result is not stored in any varilble. the value of x remain unchanged despite we have passed x as an arrgument for when the incrementing functin f1 was called.

const y = { x: 9 };

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

What will be the output of this code. Explain your answer in 50 words or less.
Answer 2 : since x is stored within an object as a key into a constent variable any operation will on it will alter it's value Variable y will log {x:10} .
36 changes: 36 additions & 0 deletions week-3/Homework/mandatory/1-practice/app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
window.addEventListener("load", () => {
let lat = 51.5861;
let long = 0.2307;
let temperatureDescription = document.querySelector(
".temperature-description"
);
let temperatureDegrees = document.querySelector(".temperature-degree");
let locationTimeZone = document.querySelector(".location-timezone");
let weatherIcon = document.getElementById("icon");

const api = `https://api.openweathermap.org/data/2.5/weather?q=larbaa,algeria&appid=5b9d824995b56422217003ce1c8d694a`;
fetch(api)
.then((response) => {
return response.json();
})
.then((data) => {
//console.log(data);
console.log(data);
const { temp } = data.main;

const description = data.weather[0].description;
const city = data.name;
const { country } = data.sys;
//set dom elements from the API
temperatureDegrees.textContent = Math.round(temp - 273);
temperatureDescription.textContent = description;
locationTimeZone.textContent = city + " " + country;
weatherIcon.setAttribute(
"src",
`http://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png`
);
})
.catch((error) => {
console.log(error);
});
});
27 changes: 27 additions & 0 deletions week-3/Homework/mandatory/1-practice/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<!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>Document</title>
</head>
<body>
<div class="location">
<h1 class="location-timezone">TimeZone</h1>
<img src="" alt="" id="icon" />
</div>
<div class="temperature">
<div class="degree-section">
<h2 class="temperature-degree"></h2>
<i style="font-size: 24px" class="fas">&#xf769;</i>
<span>C</span>
</div>

<div class="temperature-description"></div>
</div>

<script src="app.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</body>
</html>
41 changes: 41 additions & 0 deletions week-3/Homework/mandatory/1-practice/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
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;

align-items: center;
}
.temperature {
padding-right: 35%;
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;
margin: 10px;
}
24 changes: 15 additions & 9 deletions week-3/Homework/mandatory/2-exercises/1-shopping-cart.js
Original file line number Diff line number Diff line change
@@ -1,20 +1,26 @@
/*

Complete the rest of this code to create an online shopping cart.

The output of running your code should be:

Your shopping cart has 3 items: Toilet Roll, Pasta, Eggs


*/

class ShoppingCart {
// Add your code here

cartContains() {
// Use console.log() to output everything contained in your cart
}
// Add your code here

constructor() {
this.items = [];
}
addItem(item) {
this.items.push(item);
}

cartContains() {
// Use console.log() to output everything contained in your cart
console.log(
`Your shopping cart has ${this.items.length} items : ${this.items}.`
);
}
}

let myCart = new ShoppingCart(); // Creates an empty shopping cart
Expand Down
10 changes: 10 additions & 0 deletions week-3/Homework/mandatory/2-exercises/2-convertion.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,16 @@

// Write your code here

class Person {
constructor(name) {
this.name = name;
}

greeting() {
console.log("Hi! I'm " + this.name + ".");
}
}

// Do not edit this section
const simon = new Person("simon");
console.log(simon.name);
Expand Down
21 changes: 18 additions & 3 deletions week-3/Homework/mandatory/2-exercises/3-atm.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,23 @@
*/

class ATM {
// Add your code here

constructor() {
this.balance = 100;
}
make_deposit(amount) {
this.balance += amount;
}
make_withdrawl(amount) {
if (this.balance < amount) {
console.log("Sorry. Your balance is blow this amount");
} else {
this.balance -= amount;
}
}
check_balance() {
console.log(this.balance);
}
// Add your code here
}

let atm = new ATM(); // Create the ATM
Expand All @@ -22,4 +37,4 @@ atm.make_deposit(200);
atm.check_balance();
atm.make_withdrawl(100);

atm.make_withdrawl(500); // Your ATM should be able to handle this scenario
atm.make_withdrawl(500); // Your ATM should be able to handle this scenario
Loading