diff --git a/Week1/exercise/w1/index.js b/Week1/exercise/w1/index.js index fcea7032e..290a10745 100644 --- a/Week1/exercise/w1/index.js +++ b/Week1/exercise/w1/index.js @@ -1,19 +1,34 @@ console.log('Hack your future Belgium!'); +function changeHeader() { + console.log('test'); + header.innerHTML = 'ramzi'; +} +const header = document.querySelector('h1'); + +header.addEventListener('click', changeHeader); +document.getElementById('btn-header').addEventListener('click', changeHeader); // EXERCISE 1 -// 1a: create a function called "changeHeader", put a console.log() inside this function to test +// 1a: create a functi[on called "changeHeader", put a console.log() inside this function to test -// 1d: add an event listener to the "Change header" button +// 1d: add an event listener to the "Change header" button // and call the "changeHeader" function when clicked ( you should see your console.log() ) // 1b: inside this function: select the header element and assign that to a variable called "header" // 1c: change the inner html of the header element to your name - // ====================================== // +function changeImage() { + var imageInputValue = document.getElementById('imageInput'); + var imageToChange = document.querySelector('img'); + console.dir(imageInputValue); + imageToChange.src = imageInputValue.value; +} + +document.getElementById('btn-changeImage').addEventListener('click', changeImage); // EXERCISE 2 @@ -29,9 +44,19 @@ console.log('Hack your future Belgium!'); // 2e: to change the image: assign the imageInputValue to the image src - // ====================================== // +function addTodo() { + var todolist = document.getElementById('todoList'); + var todo_input = document.querySelector('#todoInput'); + //the above one its the same of document.getElementById ('todoInput') + console.log(todoInput.value); + var element_li = document.createElement('li'); + element_li.innerHTML = todo_input.value; + todolist.appendChild(element_li); +} + +document.getElementById('btn-addTodo').addEventListener('click', addTodo); // Exercise 3: diff --git a/Week1/homework/app.js b/Week1/homework/app.js index a9b5f75d8..df5ee07f9 100644 --- a/Week1/homework/app.js +++ b/Week1/homework/app.js @@ -3,9 +3,103 @@ { const bookTitles = [ // Replace with your own book titles - 'harry_potter_chamber_secrets', + 'brave_new_world', + 'the_moonstone', + 'little_women', + 'three_men_in_boat', + 'the_sign_of_four', + 'new_grub_street', + 'jude_the_obscure', + 'heart_of_darkness', + 'sister_carrie', + 'the_rainbow', ]; + const bookData = { + brave_new_world: { + title: 'Brave new world', + author: 'Aldous Huxley', + language: 'English', + image: './images/brave_new_world.jpg', + }, + the_moonstone: { + title: 'The moonstone', + author: 'Wilkie Collins', + language: 'Italian', + image: './images/the_moonstone.jpg', + }, + little_women: { + title: 'Little women', + author: 'Louisa May Alcott', + language: 'French', + image: './images/little_women.jpg', + }, + three_men_in_boat: { + title: 'Three men in a boat', + author: 'Jerome K Jerome', + language: 'English', + image: './images/three_men_in_boat.jpg', + }, + the_sign_of_four: { + title: 'The sign of four', + author: 'Arthur Conan Doyle', + language: 'French', + image: './images/the_sign_of_four.jpg', + }, + new_grub_street: { + title: 'New grub street', + author: 'George Gissing', + language: 'English', + image: './images/new_grub_street.jpg', + }, + jude_the_obscure: { + title: 'Jude the obscure', + author: 'Thomas Hardy', + language: 'Dutch ', + image: './images/jude_the_obscure.jpg', + }, + heart_of_darkness: { + title: 'Heart of darkness', + author: 'Joseph Conrad', + language: 'Turkish', + image: './images/heart_of_darkness.jpg', + }, + sister_carrie: { + title: 'Sister carrie', + author: 'Theodore Dreiser', + language: 'English', + image: './images/sister_carrie.jpg', + }, + the_rainbow: { + title: 'The rainbow', + author: 'DH Lawrence', + language: 'Spanish', + image: './images/the_rainbow.jpg', + }, + }; + // Replace with your own code - console.log(bookTitles); + function book_data() { + const book_ul = document.createElement('ul'); + + for (let i in bookTitles) { + const book_li = document.createElement('li'); + const book_title = document.createElement('h1'); + const book_author = document.createElement('p'); + const book_language = document.createElement('p'); + const book_cover = document.createElement('img'); + book_title.innerHTML = bookData[bookTitles[i]].title; + book_author.innerHTML = bookData[bookTitles[i]].author; + book_language.innerHTML = bookData[bookTitles[i]].language; + book_cover.src = bookData[bookTitles[i]].image; + book_li.appendChild(book_cover); + book_li.appendChild(book_title); + book_li.appendChild(book_author); + book_li.appendChild(book_language); + book_ul.appendChild(book_li); + } + document.body.appendChild(book_ul); + } + + book_data(); } diff --git a/Week1/homework/images/brave_new_world.jpg b/Week1/homework/images/brave_new_world.jpg new file mode 100644 index 000000000..e32998e80 Binary files /dev/null and b/Week1/homework/images/brave_new_world.jpg differ diff --git a/Week1/homework/images/heart_of_darkness.jpg b/Week1/homework/images/heart_of_darkness.jpg new file mode 100644 index 000000000..10f5d8f93 Binary files /dev/null and b/Week1/homework/images/heart_of_darkness.jpg differ diff --git a/Week1/homework/images/jude_the_obscure.jpg b/Week1/homework/images/jude_the_obscure.jpg new file mode 100644 index 000000000..e90c6e0cc Binary files /dev/null and b/Week1/homework/images/jude_the_obscure.jpg differ diff --git a/Week1/homework/images/little_women.jpg b/Week1/homework/images/little_women.jpg new file mode 100644 index 000000000..cffc42a00 Binary files /dev/null and b/Week1/homework/images/little_women.jpg differ diff --git a/Week1/homework/images/new_grub_street.jpg b/Week1/homework/images/new_grub_street.jpg new file mode 100644 index 000000000..75f3f5c7f Binary files /dev/null and b/Week1/homework/images/new_grub_street.jpg differ diff --git a/Week1/homework/images/sister_carrie.jpg b/Week1/homework/images/sister_carrie.jpg new file mode 100644 index 000000000..93265853e Binary files /dev/null and b/Week1/homework/images/sister_carrie.jpg differ diff --git a/Week1/homework/images/the_moonstone.jpg b/Week1/homework/images/the_moonstone.jpg new file mode 100644 index 000000000..6ba36f30b Binary files /dev/null and b/Week1/homework/images/the_moonstone.jpg differ diff --git a/Week1/homework/images/the_rainbow.jpg b/Week1/homework/images/the_rainbow.jpg new file mode 100644 index 000000000..36a78b010 Binary files /dev/null and b/Week1/homework/images/the_rainbow.jpg differ diff --git a/Week1/homework/images/the_sign_of_four.jpg b/Week1/homework/images/the_sign_of_four.jpg new file mode 100644 index 000000000..73bbd75b4 Binary files /dev/null and b/Week1/homework/images/the_sign_of_four.jpg differ diff --git a/Week1/homework/images/three_men_in_boat.jpg b/Week1/homework/images/three_men_in_boat.jpg new file mode 100644 index 000000000..b29ade9a8 Binary files /dev/null and b/Week1/homework/images/three_men_in_boat.jpg differ diff --git a/Week1/homework/index.html b/Week1/homework/index.html index b22147cd1..3d827503c 100644 --- a/Week1/homework/index.html +++ b/Week1/homework/index.html @@ -1 +1,14 @@ - \ No newline at end of file + + + + + + + + + My books list + + + + + diff --git a/Week1/homework/style.css b/Week1/homework/style.css index bab13ec23..aba0b36c4 100644 --- a/Week1/homework/style.css +++ b/Week1/homework/style.css @@ -1 +1,35 @@ -/* add your styling here */ \ No newline at end of file +body { + width: 1440px; + margin: 0 auto; + background-color: #fafafa; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} + +img { + width: 150px; + height: 200px; + position: absolute; +} +ul { + list-style: none; + display: flex; + flex-flow: wrap; +} +li { + display: flex; + flex-flow: wrap; + background-color: white; + flex-direction: column; + width: 40%; + position: relative; + margin: 50px; + height: 200px; + box-shadow: 0 0.125rem 0.1875rem 0 rgba(0, 0, 0, 0.11); + border: 1px solid #ededed; +} + +p, +h1 { + margin-left: 200px; + color: #585858; +} diff --git a/Week2/homework/JSON & Arrays/exercises.html b/Week2/homework/JSON & Arrays/exercises.html new file mode 100644 index 000000000..299cfd3a1 --- /dev/null +++ b/Week2/homework/JSON & Arrays/exercises.html @@ -0,0 +1,10 @@ + + + + + + Exercises + + + + diff --git a/Week2/homework/JSON & Arrays/script.js b/Week2/homework/JSON & Arrays/script.js new file mode 100644 index 000000000..2727f8489 --- /dev/null +++ b/Week2/homework/JSON & Arrays/script.js @@ -0,0 +1,90 @@ +'use strict'; +// First exercise +{ + const fruits = ['Banana', 'Apple', 'Kiwi', 'Orange', 'Lemon', 'Strawberry']; + + function first(no) { + var first_items = fruits.splice(0, no); + console.log('ARRAYS 1st exercise:', first_items); + } + // Here we are displaying the first 2 items of the array + first(2); + + // Second exercise + + var number = [2, 8, 0, 5, 7, 8, 6, 3]; + var array = []; + + function put_dash() { + for (var i = 0; i < number.length; i++) { + if (number[i] % 2 === 0 && number[i + 1] % 2 === 0) { + array.push(number[i], '-'); + } else { + array.push(number[i]); + } + } + console.log('ARRAYS 2nd exercise:', array.join('')); + } + put_dash(); +} + +// Third exercise +const fruits2 = ['Banana', 'Apple', 'Kiwi', 'Banana', 'Lemon', 'Banana']; +var counts = {}; +var compare = 0; +var mostFrequent; +(function(array) { + for (var i = 0, len = array.length; i < len; i++) { + var word = array[i]; + + if (counts[word] === undefined) { + counts[word] = 1; + } else { + counts[word] = counts[word] + 1; + } + if (counts[word] > compare) { + compare = counts[word]; + mostFrequent = fruits2[i]; + } + } + console.log('ARRAYS 3rd exercise:', mostFrequent); + + return mostFrequent; +})(fruits2); + +// Fourth exercise + +const text = 'The Quick Brown Fox'; +let transformed_text = ''; +function swap(letter) { + for (let i = 0; i < letter.length; i++) { + if (letter[i] === letter[i].toLowerCase()) { + transformed_text += letter[i].toUpperCase(); + } else { + transformed_text += letter[i].toLowerCase(); + } + } + console.log('ARRAYS 4th exercise:', transformed_text); +} +swap(text); + +// Json exercises + +// First exercise +const fruits3 = { Name: 'Apple', Country: 'Belgium' }; +const object_length = Object.keys(fruits3).length; +console.log('JSON 1st exercise:', object_length); + +// Second exercise + +function clock() { + const day = new Date(); + const hour = day.getHours(); + const minute = day.getMinutes(); + const second = day.getSeconds(); + const time = hour + ':' + minute + ':' + second; + console.log('JSON 2nd exercise:', time); +} + +setInterval(clock, 1000); +clock(); diff --git a/Week2/homework/maartjes-work.js b/Week2/homework/maartjes-work.js index 49772eb44..ea6400bf9 100644 --- a/Week2/homework/maartjes-work.js +++ b/Week2/homework/maartjes-work.js @@ -42,24 +42,23 @@ const tuesday = [ }, ]; -const maartjesTasks = monday.concat(tuesday); -const maartjesHourlyRate = 20; +const tasks = monday.concat(tuesday); -function computeEarnings(tasks, hourlyRate) { - // Replace this comment and the next line with your code - console.log(tasks, hourlyRate); -} +const durationInHours = tasks.map(x => { + return x.duration / 60; +}); +console.log('Duration in hours: ' + durationInHours); -// eslint-disable-next-line no-unused-vars -const earnings = computeEarnings(maartjesTasks, maartjesHourlyRate); +const moreThanTwoHours = durationInHours.filter(x => { + if (x >= 2) { + return x; + } +}); +console.log('Durations more than 2 hours: ' + moreThanTwoHours); -// add code to convert `earnings` to a string rounded to two decimals (euro cents) - -console.log(`Maartje has earned €${'replace this string with the earnings rounded to euro cents'}`); - -// Do not change or remove anything below this line -module.exports = { - maartjesTasks, - maartjesHourlyRate, - computeEarnings, -}; +const perHourRate = moreThanTwoHours.map(x => { + return x * 20; +}); +console.log('Earnings: ' + perHourRate); +const earnings = '€' + perHourRate.reduce((a, b) => a + b, 0).toFixed(2); +console.log('Maartje has earned: ' + earnings); diff --git a/Week2/homework/map-filter.js b/Week2/homework/map-filter.js index c8e8a88c1..f96a1ead0 100644 --- a/Week2/homework/map-filter.js +++ b/Week2/homework/map-filter.js @@ -1,15 +1,13 @@ 'use strict'; -function doubleOddNumbers(numbers) { - // Replace this comment and the next line with your code - console.log(numbers); -} - const myNumbers = [1, 2, 3, 4]; -console.log(doubleOddNumbers(myNumbers)); -// Do not change or remove anything below this line -module.exports = { - myNumbers, - doubleOddNumbers, -}; +const filtered_numbers = myNumbers.filter(x => { + return x % 2 !== 0; +}); + +const doubleOddNumbers = filtered_numbers.map(x => { + return x * 2; +}); + +console.log(doubleOddNumbers); // ==> [2, 6] diff --git a/Week3/homework/class/index.html b/Week3/homework/class/index.html new file mode 100644 index 000000000..c585dda3a --- /dev/null +++ b/Week3/homework/class/index.html @@ -0,0 +1,11 @@ + + + + + + Document + + + + + diff --git a/Week3/homework/class/index.js b/Week3/homework/class/index.js new file mode 100644 index 000000000..daafcdf6f --- /dev/null +++ b/Week3/homework/class/index.js @@ -0,0 +1,56 @@ +class Form { + constructor() { + console.log('Hello'); + const createForm = document.createElement('FORM'); + createForm.appendChild(this.createInput()); + createForm.appendChild(this.createCheckbox()); + createForm.appendChild(this.createButton()); + createForm.appendChild(this.newButton()); + var formElement = createForm; + document.body.appendChild(formElement); + + console.log(formElement); + } + + createButton() { + const button = document.createElement('button'); + button.innerHTML = 'Submit'; + button.addEventListener('click', console.log('yes')); + return button; + } + + createInput() { + const input = document.createElement('input'); + return input; + } + newButton() { + const button2 = document.createElement('button'); + button2.innerHTML = 'submit2'; + button2.addEventListener('click', this.ramzi); + document.body.appendChild(button2); + + return button2; + } + + ramzi() { + console.log('fdsfdsdf'); + return; + } + + inputFunc() { + console.log(this.input.value); + if (this.input.value.length > 3) { + console.log('its more than 3'); + } else { + console.log('its less than 3'); + } + return; + } + + createCheckbox() { + const checkbox = document.createElement('input'); + checkbox.type = 'checkbox'; + return checkbox; + } +} +const form1 = new Form('formId'); diff --git a/Week3/homework/step2-1.js b/Week3/homework/step2-1.js index d5699882c..6772f1c7b 100644 --- a/Week3/homework/step2-1.js +++ b/Week3/homework/step2-1.js @@ -1,8 +1,6 @@ 'use strict'; function foo(func) { - // What to do here? - // Replace this comment and the next line with your code console.log(func); } @@ -12,5 +10,4 @@ function bar() { foo(bar); -// Do not change or remove anything below this line module.exports = foo; diff --git a/Week3/homework/step2-2.js b/Week3/homework/step2-2.js index dcd135040..5f10625df 100644 --- a/Week3/homework/step2-2.js +++ b/Week3/homework/step2-2.js @@ -2,22 +2,26 @@ function threeFive(startIndex, stopIndex, threeCallback, fiveCallback) { const numbers = []; - - // Replace this comment and the next line with your code - console.log(startIndex, stopIndex, threeCallback, fiveCallback, numbers); + for (let i = startIndex; i <= stopIndex; i++) { + numbers.push(i); + } + numbers.forEach(n => { + if (n % 3 === 0) { + threeCallback(n); + } + if (n % 5 === 0) { + fiveCallback(n); + } + }); + console.log(numbers); } function sayThree(number) { - // Replace this comment and the next line with your code - console.log(number); + console.log('divisible by 3: ' + number); } function sayFive(number) { - // Replace this comment and the next line with your code - console.log(number); + console.log('divisible by 5: ' + number); } threeFive(10, 15, sayThree, sayFive); - -// Do not change or remove anything below this line -module.exports = threeFive; diff --git a/Week3/homework/step2-3.js b/Week3/homework/step2-3.js index 00845c5eb..605302419 100644 --- a/Week3/homework/step2-3.js +++ b/Week3/homework/step2-3.js @@ -4,6 +4,9 @@ function repeatStringNumTimesWithFor(str, num) { // eslint-disable-next-line prefer-const let result = ''; + for (let i = 0; i < num; i++) { + result += str +} // Replace this comment and the next line with your code console.log(str, num, result); @@ -17,7 +20,11 @@ console.log('for', repeatStringNumTimesWithFor('abc', 3)); function repeatStringNumTimesWithWhile(str, num) { // eslint-disable-next-line prefer-const let result = ''; - + let i = 0 + while (i < num) { + result += str + i++ + } // Replace this comment and the next line with your code console.log(str, num, result); @@ -30,7 +37,11 @@ console.log('while', repeatStringNumTimesWithWhile('abc', 3)); function repeatStringNumTimesWithDoWhile(str, num) { // eslint-disable-next-line prefer-const let result = ''; - + let i = 0 + do { + result += str + i++ + } while (i < num) // Replace this comment and the next line with your code console.log(str, num, result); diff --git a/Week3/homework/step2-4.js b/Week3/homework/step2-4.js index b11b1dcb6..2e2f5fd0a 100644 --- a/Week3/homework/step2-4.js +++ b/Week3/homework/step2-4.js @@ -1,7 +1,9 @@ 'use strict'; function Dog() { - // add your code here + this.name = 'Jake'; + this.color = 'white'; + this.numLegs = 4; } const hound = new Dog(); diff --git a/Week3/homework/step2-5.js b/Week3/homework/step2-5.js index cbb54fa1d..e08341ada 100644 --- a/Week3/homework/step2-5.js +++ b/Week3/homework/step2-5.js @@ -3,15 +3,14 @@ function multiplyAll(arr) { // eslint-disable-next-line let product = 1; - - // Replace this comment and the next line with your code - console.log(arr, product); + for (let i = 0; i < arr.length; i++) { + for (let j = 0; j < arr[i].length; j++) { + product *= arr[i][j]; + } + } return product; } const result = multiplyAll([[1, 2], [3, 4], [5, 6]]); console.log(result); // 720 - -// Do not change or remove anything below this line -module.exports = multiplyAll; diff --git a/Week3/homework/step2-6.js b/Week3/homework/step2-6.js index ffe95b9f7..765920fbd 100644 --- a/Week3/homework/step2-6.js +++ b/Week3/homework/step2-6.js @@ -4,12 +4,12 @@ const arr2d = [[1, 2], [3, 4], [5, 6]]; const arr3d = [[[1, 2], [3, 4]], [[5, 6], [7, 8]]]; function flattenArray2d(arr) { - // Replace this comment and the next line with your code +arr = arr2d.flat(); console.log(arr); } function flattenArray3d(arr) { - // Replace this comment and the next line with your code + arr = arr3d.flat(2); console.log(arr); } diff --git a/Week3/homework/step2-7.js b/Week3/homework/step2-7.js index 3e72e8551..791a2cb51 100644 --- a/Week3/homework/step2-7.js +++ b/Week3/homework/step2-7.js @@ -20,4 +20,10 @@ f2(y); console.log(y); -// Add your explanation as a comment here +/* The first function is clear that we are assigning a value to X which is 9 and then +we are calling the variable x by executing the function. +The second one we are declaring a variable Y and we are assigning an object that has one property which is x : 9 +then we are executing the function by calling the variable Y as an argument, but inside the function it's we are calling +the first value of the first property which is x so when we call the value it should give us 9, +so that's why we have the same result here :) +*/ diff --git a/Week3/homework/step3-bonus.js b/Week3/homework/step3-bonus.js index 917091d61..ec76983cc 100644 --- a/Week3/homework/step3-bonus.js +++ b/Week3/homework/step3-bonus.js @@ -1,14 +1,9 @@ -'use strict'; - const values = ['a', 'b', 'c', 'd', 'a', 'e', 'f', 'c']; function makeUnique(arr) { - // Replace this comment and the next line with your code - console.log(arr); + arr = values.filter((a, b, c) => c.indexOf(a) === b); + console.log('array', arr); } const uniqueValues = makeUnique(values); console.log(uniqueValues); - -// Do not change or remove anything below this line -module.exports = makeUnique; diff --git a/Week3/homework/step3.js b/Week3/homework/step3.js index 292724bf4..3c266ceb0 100644 --- a/Week3/homework/step3.js +++ b/Week3/homework/step3.js @@ -1,14 +1,16 @@ 'use strict'; function createBase(base) { - // Replace this comment and the next line with your code - console.log(base); + return function(n) { + return n + base; + }; } - const addSix = createBase(6); +/*const addSix = x => { + 6 + x; + return x; +}; +*/ console.log(addSix(10)); // returns 16 console.log(addSix(21)); // returns 27 - -// Do not change or remove anything below this line -module.exports = createBase;