Quote Generator

- - - + +

+ + + + Click the button to be quoted! +

― Obi

+ +

+ + +

+ +

+ + diff --git a/Week1/project/index.js b/Week1/project/index.js index c8a1fb1d2..3b3f740c2 100644 --- a/Week1/project/index.js +++ b/Week1/project/index.js @@ -1,19 +1,34 @@ // your code goes in here const quotes = [ - { text: 'text1', author: 'name1' }, - { text: 'text2', author: 'name2' }, - { text: 'text3', author: 'name3' }, - { text: 'text4', author: 'name4' }, - { text: 'text5', author: 'name5' }, - { text: 'text6', author: 'name6' }, + { text: 'Compassion is the chief law of human existence', author: '_Fyodor Dostoyvsky' }, + { + text: + 'What matters in life is not what happens to you but what you remember and how you remember it', + author: '_Gabriel Garcia Marquez', + }, + { text: 'To be free of belief and unbelief is my religion', author: '_Omar Khayyam' }, + { text: 'Why so serious?', author: '_Joker' }, + { + text: + 'Self-love is a good thing but self-awareness is more important. You need to once in a while go ‘Uh, I’m kind of an asshole.', + author: '_Louis C.K.', + }, + { + text: + "My mama always said life was like a box of chocolates. You never know what you're gonna get.", + author: '_Forrest Gump', + }, ]; -const button = document.getElementById('button'); +const colors = ['#F79F1F', '#EE5A24', '#0652DD', '#0c2461', '#0a3d62', '#78e08f']; +const button = document.getElementById('quote-btn'); function showRandomQuote() { - const quoteContainer = document.getElementById('quote'); - const authorContainer = document.getElementById('author'); - const quote = quotes[Math.floor(Math.random() * quotes.length)]; - quoteContainer.innerHTML = quote.text; - authorContainer.innerHTML = quote.author; - // return; + const quoteContainer = document.querySelector('.quote'); + const authorContainer = document.querySelector('.author'); + const body = document.querySelector('body'); + const randomQuote = quotes[Math.floor(Math.random() * quotes.length)]; + const randomColor = colors[Math.floor(Math.random() * colors.length)]; + quoteContainer.innerHTML = randomQuote.text; + authorContainer.innerHTML = randomQuote.author; + body.style.backgroundColor = randomColor; } button.addEventListener('click', showRandomQuote); From 708cc74106033846e9066f3f50dacb67bf1041d0 Mon Sep 17 00:00:00 2001 From: obada othman Date: Tue, 11 Aug 2020 18:59:55 +0200 Subject: [PATCH 03/17] Finished ex1 & ex2 --- Week2/js-exercises/ex1-oddOnesOut.js | 26 ++++++++++++------- .../js-exercises/ex2-whatsYourMondayWorth.js | 20 +++++++++++--- 2 files changed, 33 insertions(+), 13 deletions(-) diff --git a/Week2/js-exercises/ex1-oddOnesOut.js b/Week2/js-exercises/ex1-oddOnesOut.js index 4f42050ac..03ca79372 100644 --- a/Week2/js-exercises/ex1-oddOnesOut.js +++ b/Week2/js-exercises/ex1-oddOnesOut.js @@ -7,15 +7,23 @@ The function should still behave the same. */ +// function doubleEvenNumbers(numbers) { +// const newNumbers = []; +// for (let i = 0; i < numbers.length; i++) { +// if (numbers[i] % 2 === 0) { +// newNumbers.push(numbers[i] * 2); +// } +// } +// return newNumbers; +// } + +// const myNumbers = [1, 2, 3, 4]; +// console.log(doubleEvenNumbers(myNumbers)); // Logs "[4, 8]" to the console + +const myNumbers = [1, 2, 3, 4]; function doubleEvenNumbers(numbers) { - const newNumbers = []; - for (let i = 0; i < numbers.length; i++) { - if (numbers[i] % 2 === 0) { - newNumbers.push(numbers[i] * 2); - } - } - return newNumbers; + const evenNumbers = numbers.filter((number) => (number % 2 == 0 ? true : false)); + return evenNumbers.map((number) => number * 2); } -const myNumbers = [1, 2, 3, 4]; -console.log(doubleEvenNumbers(myNumbers)); // Logs "[4, 8]" to the console \ No newline at end of file +console.log(doubleEvenNumbers(myNumbers1)); // Logs "[4,8]" diff --git a/Week2/js-exercises/ex2-whatsYourMondayWorth.js b/Week2/js-exercises/ex2-whatsYourMondayWorth.js index 47cea70ba..6f2882603 100644 --- a/Week2/js-exercises/ex2-whatsYourMondayWorth.js +++ b/Week2/js-exercises/ex2-whatsYourMondayWorth.js @@ -11,12 +11,24 @@ */ - function dayWorth(tasks, hourlyRate) { // put your code in here, the function does returns a euro formatted string + // convert minutes spent on each task to hours , and put the values in a new array + let taskDurationHrs = tasks.map((task) => task.duration / 60); + //caculate what each task is worth based on the specified hourly rate and put the values in a new array + let taskWorth = taskDurationHrs.map((taskDurationHrs) => taskDurationHrs * hourlyRate); + //set the format for EUR and the country and language to (Dutch-Netherlands) + let formatter = new Intl.NumberFormat('nl-NL', { + style: 'currency', + currency: 'EUR', + minimumFractionDigits: 2, + }); + //sums up the tasks worth and returns that in a EUR formatted string for any array of objects which has a 'duration' property + return formatter.format(taskWorth.reduce((total, taskPay) => total + taskPay, 0)); } -const mondayTasks = [{ +const mondayTasks = [ + { name: 'Daily standup', duration: 30, // specified in minutes }, @@ -34,5 +46,5 @@ const mondayTasks = [{ }, ]; -console.log(dayWorth(mondayTasks, 25)) -console.log(dayWorth(mondayTasks, 13.37)) \ No newline at end of file +console.log(dayWorth(mondayTasks, 25)); //€187.50 +console.log(dayWorth(mondayTasks, 13.37)); //€100.28 From 51d08b17ea85c0d9225eb5a05717cf3177851d60 Mon Sep 17 00:00:00 2001 From: obada othman Date: Wed, 12 Aug 2020 16:29:48 +0200 Subject: [PATCH 04/17] Finished ex3 to ex5 --- Week2/js-exercises/ex3-lemonAllergy.js | 8 +++--- Week2/js-exercises/ex4-collectiveAge.js | 18 ++++++++----- Week2/js-exercises/ex5-myFavoriteHobbies.html | 17 ++++++++---- Week2/js-exercises/ex5-myFavoriteHobbies.js | 12 ++++++++- Week2/project/index.html | 26 ++++++++----------- Week2/project/index.js | 2 +- 6 files changed, 52 insertions(+), 31 deletions(-) diff --git a/Week2/js-exercises/ex3-lemonAllergy.js b/Week2/js-exercises/ex3-lemonAllergy.js index 54ac8da04..2847916c8 100644 --- a/Week2/js-exercises/ex3-lemonAllergy.js +++ b/Week2/js-exercises/ex3-lemonAllergy.js @@ -11,11 +11,13 @@ */ - function takeOutLemons(basket) { - // your code goes in here. The output is a string + // your code goes in here. The output is a string + // returns an array that doesn't contain 'lemon' or 'Lemon' + const lemonlessBasket = basket.filter((fruit) => fruit != 'Lemon' && fruit != 'lemon'); + return `My mom bought me a fruit basket, containing [${lemonlessBasket}]`; } const fruitBasket = ['Apple', 'Lemon', 'Grapefruit', 'Lemon', 'Banana', 'Watermelon', 'Lemon']; -console.log(takeOutLemons(fruitBasket)); \ No newline at end of file +console.log(takeOutLemons(fruitBasket)); //My mom bought me a fruit basket, containing [Apple,Grapefruit,Banana,Watermelon] diff --git a/Week2/js-exercises/ex4-collectiveAge.js b/Week2/js-exercises/ex4-collectiveAge.js index d17275cdc..3b9b8930e 100644 --- a/Week2/js-exercises/ex4-collectiveAge.js +++ b/Week2/js-exercises/ex4-collectiveAge.js @@ -10,24 +10,30 @@ function collectiveAge(people) { // return the sum of age for all the people + const individualAges = people.map((person) => person.age); + return individualAges.reduce((total, individualAge) => total + individualAge, 0); +} +function collectiveMembers(hackYourFutureMembers) { + return collectiveAge(hackYourFutureMembers); } -const hackYourFutureMembers = [{ +const hackYourFutureMembers = [ + { name: 'Wouter', - age: 33 + age: 33, }, { name: 'Federico', - age: 32 + age: 32, }, { name: 'Noer', - age: 27 + age: 27, }, { name: 'Tjebbe', - age: 22 + age: 22, }, ]; -console.log("The collective age of the HYF team is: " + collectiveMembers(hackYourFutureMembers)); \ No newline at end of file +console.log('The collective age of the HYF team is: ' + collectiveMembers(hackYourFutureMembers)); diff --git a/Week2/js-exercises/ex5-myFavoriteHobbies.html b/Week2/js-exercises/ex5-myFavoriteHobbies.html index 06ab17d45..5363f3106 100644 --- a/Week2/js-exercises/ex5-myFavoriteHobbies.html +++ b/Week2/js-exercises/ex5-myFavoriteHobbies.html @@ -1,5 +1,12 @@ - - - - - \ No newline at end of file + + + + + + + Document + + + + + diff --git a/Week2/js-exercises/ex5-myFavoriteHobbies.js b/Week2/js-exercises/ex5-myFavoriteHobbies.js index 289c68380..49ca56abc 100644 --- a/Week2/js-exercises/ex5-myFavoriteHobbies.js +++ b/Week2/js-exercises/ex5-myFavoriteHobbies.js @@ -10,6 +10,14 @@ function createHTMLList(arr) { // your code goes in here + const body = document.querySelector('body'); + const ul = document.createElement('ul'); + body.appendChild(ul); + arr.map((hobby) => { + const li = document.createElement('li'); + li.innerHTML = hobby; + ul.appendChild(li); + }); } const myHobbies = [ @@ -18,4 +26,6 @@ const myHobbies = [ 'Programming', 'Hanging out with friends', 'Going to the gym', -]; \ No newline at end of file +]; + +createHTMLList(myHobbies); diff --git a/Week2/project/index.html b/Week2/project/index.html index 664b242d3..792e43d05 100644 --- a/Week2/project/index.html +++ b/Week2/project/index.html @@ -1,17 +1,13 @@ - - - - - Pomodoro Clock - - - -

- -

- - - - \ No newline at end of file + + + + Pomodoro Clock + + + +

+ + + diff --git a/Week2/project/index.js b/Week2/project/index.js index 5b306f0f2..e01373a58 100644 --- a/Week2/project/index.js +++ b/Week2/project/index.js @@ -7,4 +7,4 @@ Display minutes and seconds If the timer finishes the timer should be replaced by the message: Time 's up! * - */ \ No newline at end of file + */ From 1a5f493fe1286594bcb37718dc60de7abc95fbd8 Mon Sep 17 00:00:00 2001 From: obada othman Date: Sat, 15 Aug 2020 10:12:45 +0200 Subject: [PATCH 05/17] Finished project's JS --- Week2/project/index.html | 20 ++++++++++- Week2/project/index.js | 77 ++++++++++++++++++++++++++++++++++++++++ Week2/project/style.css | 6 ++++ 3 files changed, 102 insertions(+), 1 deletion(-) create mode 100644 Week2/project/style.css diff --git a/Week2/project/index.html b/Week2/project/index.html index 792e43d05..3393cad67 100644 --- a/Week2/project/index.html +++ b/Week2/project/index.html @@ -4,10 +4,28 @@ Pomodoro Clock + -

+ + + + + + +

+ +