diff --git a/week-2/Homework/mandatory/1-practice/1-practice.md b/week-2/Homework/mandatory/1-practice/1-practice.md index 02aa349..09c9a00 100644 --- a/week-2/Homework/mandatory/1-practice/1-practice.md +++ b/week-2/Homework/mandatory/1-practice/1-practice.md @@ -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}`? +{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? + +it will load pull request diff --git a/week-2/Homework/mandatory/2-fetch-exercise/exercise.js b/week-2/Homework/mandatory/2-fetch-exercise/exercise.js index fb3a39c..f8cc377 100644 --- a/week-2/Homework/mandatory/2-fetch-exercise/exercise.js +++ b/week-2/Homework/mandatory/2-fetch-exercise/exercise.js @@ -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 - }); \ No newline at end of file +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; + }); diff --git a/week-2/Homework/mandatory/3-dog-photo-gallery/index.html b/week-2/Homework/mandatory/3-dog-photo-gallery/index.html new file mode 100644 index 0000000..74495b5 --- /dev/null +++ b/week-2/Homework/mandatory/3-dog-photo-gallery/index.html @@ -0,0 +1,15 @@ + + + + + + DOG-PHOTO-GALLERY + + +
+
+ + + + + diff --git a/week-2/Homework/mandatory/3-dog-photo-gallery/script.js b/week-2/Homework/mandatory/3-dog-photo-gallery/script.js new file mode 100644 index 0000000..f769597 --- /dev/null +++ b/week-2/Homework/mandatory/3-dog-photo-gallery/script.js @@ -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"; diff --git a/week-2/Homework/mandatory/4-programmer-humour/index.html b/week-2/Homework/mandatory/4-programmer-humour/index.html new file mode 100644 index 0000000..e5a1064 --- /dev/null +++ b/week-2/Homework/mandatory/4-programmer-humour/index.html @@ -0,0 +1,12 @@ + + + + + + Programmer-Humour + + + + + + diff --git a/week-2/Homework/mandatory/4-programmer-humour/script.js b/week-2/Homework/mandatory/4-programmer-humour/script.js new file mode 100644 index 0000000..de3a0d3 --- /dev/null +++ b/week-2/Homework/mandatory/4-programmer-humour/script.js @@ -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); + }); diff --git a/week-2/Homework/mandatory/5-project/task.md b/week-2/Homework/mandatory/5-project/task.md index 038ee2b..14d7ace 100644 --- a/week-2/Homework/mandatory/5-project/task.md +++ b/week-2/Homework/mandatory/5-project/task.md @@ -1,4 +1,4 @@ -# Project - Part 2 +# Project - Part 2 ===========================================================================> DONE This project should consolidate knowledge from JS2 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..3b71388 100644 --- a/week-3/Homework/mandatory/1-practice/2-code-reading.md +++ b/week-3/Homework/mandatory/1-practice/2-code-reading.md @@ -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 @@ -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 @@ -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 }; @@ -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} . 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..492aa70 --- /dev/null +++ b/week-3/Homework/mandatory/1-practice/app.js @@ -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); + }); +}); 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..fbcee0f --- /dev/null +++ b/week-3/Homework/mandatory/1-practice/index.html @@ -0,0 +1,27 @@ + + + + + + + Document + + +
+

TimeZone

+ +
+
+
+

+ + C +
+ +
+
+ + + + + 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..20ca047 --- /dev/null +++ b/week-3/Homework/mandatory/1-practice/style.css @@ -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; +} diff --git a/week-3/Homework/mandatory/2-exercises/1-shopping-cart.js b/week-3/Homework/mandatory/2-exercises/1-shopping-cart.js index d58a051..4ab51c8 100644 --- a/week-3/Homework/mandatory/2-exercises/1-shopping-cart.js +++ b/week-3/Homework/mandatory/2-exercises/1-shopping-cart.js @@ -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 diff --git a/week-3/Homework/mandatory/2-exercises/2-convertion.js b/week-3/Homework/mandatory/2-exercises/2-convertion.js index 4c338c9..8acd299 100644 --- a/week-3/Homework/mandatory/2-exercises/2-convertion.js +++ b/week-3/Homework/mandatory/2-exercises/2-convertion.js @@ -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); diff --git a/week-3/Homework/mandatory/2-exercises/3-atm.js b/week-3/Homework/mandatory/2-exercises/3-atm.js index 768bce4..2212457 100644 --- a/week-3/Homework/mandatory/2-exercises/3-atm.js +++ b/week-3/Homework/mandatory/2-exercises/3-atm.js @@ -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 @@ -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 \ No newline at end of file +atm.make_withdrawl(500); // Your ATM should be able to handle this scenario diff --git a/week-3/Homework/mandatory/2-exercises/4-music-player.js b/week-3/Homework/mandatory/2-exercises/4-music-player.js index 17f4a2d..95ea3aa 100644 --- a/week-3/Homework/mandatory/2-exercises/4-music-player.js +++ b/week-3/Homework/mandatory/2-exercises/4-music-player.js @@ -1,25 +1,70 @@ class MusicPlayer { - // Add your code here - + constructor() { + this.index = 0; + this.song = []; + } + add(title, singer) { + this.song.push({ title, singer }); + } + play() { + if (this.song === null) { + console.log("There are no songs in the playlist"); + } else { + console.log( + `Currently playing:${this.song[this.index].title} by ${ + this.song[this.index].singer + } .` + ); + } + } + + skip() { + this.index++; + if (this.index === this.song.length) { + this.index--; + console.log("There are no songs left to play."); + } else { + console.log( + `Currently playing:${this.song[this.index].title} by ${ + this.song[this.index].singer + } .` + ); + } + } + previous() { + if (this.index === 0) { + // this.index++; + console.log("There are no songs in the playlist."); + } else { + this.index--; + console.log( + `Currently playing:${this.song[this.index].title} by ${ + this.song[this.index].singer + }. ` + ); + } + } } let myMusicPlayer = new MusicPlayer(); // Create an empty playlist // Add some songs to your playlist -myMusicPlayer.add("Bohemian Rhapsody","Queen"); -myMusicPlayer.add("Yesterday","The Beatles"); -myMusicPlayer.add("Vogue","Madonna"); -myMusicPlayer.play(); // Output: "Currently playing: Bohemian Rhapsody by Queen" +myMusicPlayer.add("Bohemian Rhapsody", "Queen"); +myMusicPlayer.add("Yesterday", "The Beatles"); +myMusicPlayer.add("Vogue", "Madonna"); + +console.log(myMusicPlayer.song); -myMusicPlayer.skip(); // Output: "Currently playing: Yesterday by The Beatles" +myMusicPlayer.play(); // Output: "Currently playing: Bohemian Rhapsody by Queen" -myMusicPlayer.previous(); // Output: "Currently playing: Bohemian Rhapsody by Queen" +myMusicPlayer.skip(); // Output: "Currently playing: Yesterday by The Beatles" -myMusicPlayer.skip(); // Output: "Currently playing: Yesterday by The Beatles" +myMusicPlayer.previous(); // Output: "Currently playing: Bohemian Rhapsody by Queen" -myMusicPlayer.skip(); // Output: "Currently playing: Vogue by Madonna" +myMusicPlayer.skip(); // Output: "Currently playing: Yesterday by The Beatles" +myMusicPlayer.skip(); // Output: "Currently playing: Vogue by Madonna" /* @@ -40,11 +85,3 @@ Optional 2: Can you implement the shuffle functionality for your music player? This means the order the songs are played in will be random, but each song will only play once. */ - - - - - - - -