diff --git a/Week1/exercise/w1/index.html b/Week1/exercise/w1/index.html index 5a88074db..7963d100d 100644 --- a/Week1/exercise/w1/index.html +++ b/Week1/exercise/w1/index.html @@ -1,4 +1,4 @@ - +!DOCTYPE html> @@ -13,7 +13,9 @@

JS2 - exercise 1

- lights +

+ lights
+
@@ -28,11 +30,11 @@

Todos:

  • Learn javascript
  • Take over the world
    • - +
    - + diff --git a/Week1/exercise/w1/index.js b/Week1/exercise/w1/index.js index fcea7032e..ef93b557a 100644 --- a/Week1/exercise/w1/index.js +++ b/Week1/exercise/w1/index.js @@ -1,5 +1,15 @@ + + console.log('Hack your future Belgium!'); + + +// select button byıd + +// add event lıstener to that button +// + + // EXERCISE 1 // 1a: create a function called "changeHeader", put a console.log() inside this function to test @@ -11,9 +21,15 @@ console.log('Hack your future Belgium!'); // 1c: change the inner html of the header element to your name +const h1 = document.querySelector("h1") +function changeHeader() { + console.log("test"); + h1.innerHTML ="Rahime"; +} -// ====================================== // +document.getElementById("btn-changeHeader").addEventListener("click", changeHeader); +// ====================================== // // EXERCISE 2 @@ -30,11 +46,19 @@ console.log('Hack your future Belgium!'); // 2e: to change the image: assign the imageInputValue to the image src -// ====================================== // +function changeImage() { + console.log("test2"); + const imageToChange = document.querySelector("img"); + const imageInputValue = document.querySelector("#imageInput").value; + imageToChange.src = imageInputValue; +} + document.getElementById("btn-changeImage").addEventListener("click", changeImage); +// ====================================== // // Exercise 3: + // 3a: select "add todo" button & add click event listener to execute addTodo() function on click event // 3b: define addTodo() function, in this function: @@ -48,3 +72,20 @@ console.log('Hack your future Belgium!'); // 3f: set created
  • element innerHtml to todoInput value // 3g: add
  • element to todoList + + + var btn = document.getElementById("btn-addTodo");//a + + btn.addEventListener("click", addTodo);//b + + function addTodo (){ + + var myList = document.getElementById("todoList"); + var myInput = document.getElementById("todoInput").value; + console.log(myInput); + + var newItem = document.createElement("li"); + newItem.innerHTML= myInput; + myList.appendChild(newItem); + + } diff --git a/Week1/homework/app.js b/Week1/homework/app.js index a9b5f75d8..79673e67a 100644 --- a/Week1/homework/app.js +++ b/Week1/homework/app.js @@ -1,11 +1,138 @@ 'use strict'; { - const bookTitles = [ // Replace with your own book titles - 'harry_potter_chamber_secrets', - ]; + const bookTitles = [ + + 'pride_and_prejudice', + 'animal_farm', + 'alice_in_wonderland', + 'the_last_leaf', + 'the_picture_of_dorian_gray', + 'hamlet', + 'madame_bovary', + 'canterbury_tales', + 'emma', + 'sense_and_sensibility' + + ]; + + // Replace with your own code + - // Replace with your own code - console.log(bookTitles); } +// make an object + +const myBookDetailsObj = { + pride_and_prejudice: { + title: 'Pride and Prejudice', + language: 'English', + author: 'Jane Austen', + + }, + + animal_farm: { + title: 'Animal Farm', + language: 'English', + author: 'George Orwell', + + }, + + alice_in_wonderland: { + title: 'Alice in Wonderland', + language: 'English', + author: 'Lewis Carrol', + }, + + the_last_leaf: { + title: 'The Last Leaf', + language: 'English', + author: 'O.Henry', + }, + + the_picture_of_dorian_gray: { + title: 'The Picure of Dorian Gray', + language: 'English', + author: 'Oscar Wilde', + }, + + hamlet: { + title: 'Hamlet', + language: 'English', + author: 'William Shakespeare', + }, + + madame_bovary: { + title: 'Madame Bovary', + language: 'French', + author: 'Gustave Flaubert', + }, + + canterbury_tales: { + title: 'Canterbury Tales', + language: 'English', + author: 'Geoffrey Chaucer', + }, + + anna_karenina: { + title: 'Anna Karenina', + language: 'Russian', + author: 'Leo Tolstoy', + }, + + sense_and_sensibility: { + title: 'Sence and Sensibility', + language: 'English', + author: 'Jane Austen', + } + +}; + +const bookCoverImagesObj = { + pride_and_prejudice: './assets/pride_and_prejudice.jpg', + animal_farm: './assets/animal_farm.jpg', + alice_in_wonderland: './assets/alice_in_wonderland.jpg', + the_last_leaf: './assets/the_last_leaf.jpg', + the_picture_of_dorian_gray: './assets/the_picture_of_dorian_gray.jpg', + hamlet: './assets/hamlet.jpg', + madame_bovary: './assets/madame_bovary.jpg', + canterbury_tales: './assets/the_canterbury_tales.jpg', + anna_karenina: './assets/anna_karenina.jpg', + sense_and_sensibility: './assets/sense_and_sensibility.jpg' + +} + + +function myFavouredBooks() { + var bookContainer = document.createElement('h1'); + h1 = document.createTextNode('My Favoured Books'); + document.getElementsByTagName('body')[0].appendChild('h1'); + + + myBookTitles = document.createElement('ul'); + + + for (var key in myBookDetailsObj); + + const listItem = document.createElement('li'); + + listElement.appendChild(listItem); + const title = document.createElement('h2'); + header.innerHTML = myBookDetailsObj[key].title; + myBookTitles.appendChild('title'); + + const images = document.createElement("img"); + images.setAttribute("src", bookCoverImagesObj[key]); + images.setAttribute("alt", key); + listItem.appendChild(images); + + const author = document.createElement('h3'); + author.innerHTML = "Author: " + myBookDetailsObj[key].author; + listItem.appendChild(author); + + const language = document.createElement('h3'); + language.innerHTML = "Language: " + myBookDetailsObj[key].language; + listItem.appendChild(language); + + +}; diff --git a/Week1/homework/index.html b/Week1/homework/index.html index b22147cd1..d13f9aa5d 100644 --- a/Week1/homework/index.html +++ b/Week1/homework/index.html @@ -1 +1,16 @@ - \ No newline at end of file + + + + + + + + + My Favoured Books + + + + + + + diff --git a/Week2/JSON.html b/Week2/JSON.html new file mode 100644 index 000000000..26dfb8280 --- /dev/null +++ b/Week2/JSON.html @@ -0,0 +1,15 @@ + + + + + + + + Document + + + + + + + \ No newline at end of file diff --git a/Week2/exercises2.html b/Week2/exercises2.html new file mode 100644 index 000000000..c3210134f --- /dev/null +++ b/Week2/exercises2.html @@ -0,0 +1,15 @@ + + + + + + + + Document + + + + + + + \ No newline at end of file diff --git a/Week2/exercises2.js b/Week2/exercises2.js new file mode 100644 index 000000000..5a163a61c --- /dev/null +++ b/Week2/exercises2.js @@ -0,0 +1,68 @@ +//first exercise + +const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; + +function firstElement(n) { + + return arr.slice(0, n); + +} + +firstElement = array[0]; + +console.log(firstElement(3)); +console.log(arr[num]); +// I cannot finish it + + +//Second exercise + +var num = window.prompt(); +var str = num.toString(); +var result = [str[0]]; + +for (var i = 1; i < str.length; i++) { + if (str[i - 1] % 2 === 0 && str[i] % 2 === 0) { + result.push('-', str[i]); + } else { + result.push(str[i]); + } +} +console.log(result.join('')); + +//third exercise + +var arr1 = [3, 'a', 'a', 'a', 2, 3, 'a', 3, 'a', 2, 4, 9, 3]; +var mf = 1; +var m = 0; +var item; +for (var i = 0; i < arr1.length; i++) { + for (var j = i; j < arr1.length; j++) { + if (arr1[i] == arr1[j]) + m++; + if (mf < m) { + mf = m; + item = arr1[i]; + } + } + m = 0; +} +console.log(item + " ( " + mf + " times ) "); + +//fourth + +var str = 'c'; +const UPPER = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; +const LOWER = 'abcdefghijklmnopqrstuvwxyz'; +const result = []; + +for (let i = 0; i < str.length; i++) { + if (UPPER.includes(str[i])) { + result.push(str[i].toLowerCase()); + } else if (LOWER.includes(str[i])) { + result.push(str[i].toUpperCase()); + } else { + result.push(str[i]); + } +} +console.log(result.join('')); \ No newline at end of file diff --git a/Week2/homework/maartjes-work.js b/Week2/homework/maartjes-work.js index 49772eb44..5705580d3 100644 --- a/Week2/homework/maartjes-work.js +++ b/Week2/homework/maartjes-work.js @@ -1,65 +1,73 @@ 'use strict'; -const monday = [ - { - name: 'Write a summary HTML/CSS', - duration: 180, - }, - { - name: 'Some web development', - duration: 120, - }, - { - name: 'Fix homework for class10', - duration: 20, - }, - { - name: 'Talk to a lot of people', - duration: 200, - }, +const monday = [{ + name: 'Write a summary HTML/CSS', + duration: 180, + }, + { + name: 'Some web development', + duration: 120, + }, + { + name: 'Fix homework for class10', + duration: 20, + }, + { + name: 'Talk to a lot of people', + duration: 200, + }, ]; -const tuesday = [ - { - name: 'Keep writing summary', - duration: 240, - }, - { - name: 'Some more web development', - duration: 180, - }, - { - name: 'Staring out the window', - duration: 10, - }, - { - name: 'Talk to a lot of people', - duration: 200, - }, - { - name: 'Look at application assignments new students', - duration: 40, - }, +const tuesday = [{ + name: 'Keep writing summary', + duration: 240, + }, + { + name: 'Some more web development', + duration: 180, + }, + { + name: 'Staring out the window', + duration: 10, + }, + { + name: 'Talk to a lot of people', + duration: 200, + }, + { + name: 'Look at application assignments new students', + duration: 40, + }, ]; const maartjesTasks = monday.concat(tuesday); const maartjesHourlyRate = 20; function computeEarnings(tasks, hourlyRate) { - // Replace this comment and the next line with your code - console.log(tasks, hourlyRate); + // Replace this comment and the next line with your code + const hourlyTasks = tasks + .map(task => task.duration / 60) //Map the tasks to durations in hours. + .filter(taskDuration => taskDuration >= 2) //Filter out everything that took less than two hours + .map(duration => duration * hourlyRate) //Multiply the each duration by a per-hour rate for billing + .reduce((acc, salary) => acc + salary) + .toFixed(2); //Output a formatted Euro amount, rounded to Euro cents + + return taskDurations; } + + + // eslint-disable-next-line no-unused-vars const earnings = computeEarnings(maartjesTasks, maartjesHourlyRate); // 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'}`); +console.log(`Maartje has earned €${earnings}`); // Do not change or remove anything below this line module.exports = { - maartjesTasks, - maartjesHourlyRate, - computeEarnings, + maartjesTasks, + maartjesHourlyRate, + computeEarnings, }; diff --git a/Week2/homework/map-filter.js b/Week2/homework/map-filter.js index c8e8a88c1..4a1a7565e 100644 --- a/Week2/homework/map-filter.js +++ b/Week2/homework/map-filter.js @@ -1,8 +1,10 @@ 'use strict'; function doubleOddNumbers(numbers) { - // Replace this comment and the next line with your code - console.log(numbers); + + var newArray = numbers.filter(num => num % 2 === 1).map(num => num * 2) + return newArray; + } const myNumbers = [1, 2, 3, 4]; @@ -10,6 +12,6 @@ console.log(doubleOddNumbers(myNumbers)); // Do not change or remove anything below this line module.exports = { - myNumbers, - doubleOddNumbers, + myNumbers, + doubleOddNumbers, }; diff --git a/Week2/json.js b/Week2/json.js new file mode 100644 index 000000000..44dc66bdb --- /dev/null +++ b/Week2/json.js @@ -0,0 +1,40 @@ +'use strict' + +//Write a JavaScript function to check if an object contains given property. + +var myBooks = { + a: "Hamlet", + b: "Last Leaf", + c: "Canterbury Tales" +}; +var isHasProperty = (myBooks, a, b, c) => { + + if (myBooks.hasOwnProperty('a')) { + console.log('Yes, I have ' + a); + } else { + console.log('No, I do not have ' + a + 'book'); + }; + +}; +console.log(isHasProperty(myBooks, 'hamlet')); + +// Write a JavaScript program to get the length (amount of keys) of a JavaScript object. + +var student = { + name: "John", + sclass: "IV", + no: 12 +}; + +console.log(Object.keys(student).length); + +//Write a JavaScript program to create a Clock. Console, every second :”14:37:42”,”14:37:43", “14:37:44”, "14:37:45" + + +setInterval(function() { + + var d = new Date(); + + console.log(d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds()); + +}, 1000); \ No newline at end of file diff --git a/Week2/maartjes-work.js b/Week2/maartjes-work.js new file mode 100644 index 000000000..b38233ee0 --- /dev/null +++ b/Week2/maartjes-work.js @@ -0,0 +1,73 @@ +'use strict'; + +const monday = [{ + name: 'Write a summary HTML/CSS', + duration: 180, + }, + { + name: 'Some web development', + duration: 120, + }, + { + name: 'Fix homework for class10', + duration: 20, + }, + { + name: 'Talk to a lot of people', + duration: 200, + }, +]; + +const tuesday = [{ + name: 'Keep writing summary', + duration: 240, + }, + { + name: 'Some more web development', + duration: 180, + }, + { + name: 'Staring out the window', + duration: 10, + }, + { + name: 'Talk to a lot of people', + duration: 200, + }, + { + name: 'Look at application assignments new students', + duration: 40, + }, +]; + +const maartjesTasks = monday.concat(tuesday); +const maartjesHourlyRate = 20; + +function computeEarnings(tasks, hourlyRate) { + // Replace this comment and the next line with your code + const hourlyTasks = tasks + .map(task => task.duration / 60) //Map the tasks to durations in hours. + .filter(taskDuration => taskDuration >= 2) //Filter out everything that took less than two hours + .map(duration => duration * hourlyRate) //Multiply the each duration by a per-hour rate for billing + .reduce((acc, salary) => acc + salary) + .toFixed(2); //Output a formatted Euro amount, rounded to Euro cents + + return taskDurations; +} + + + + +// eslint-disable-next-line no-unused-vars +const earnings = computeEarnings(maartjesTasks, maartjesHourlyRate); + +// add code to convert `earnings` to a string rounded to two decimals (euro cents) + +console.log(`Maartje has earned €${earnings}`); + +// Do not change or remove anything below this line +module.exports = { + maartjesTasks, + maartjesHourlyRate, + computeEarnings, +}; \ No newline at end of file diff --git a/Week2/map-filter.js b/Week2/map-filter.js new file mode 100644 index 000000000..fe346b996 --- /dev/null +++ b/Week2/map-filter.js @@ -0,0 +1,17 @@ +'use strict'; + +function doubleOddNumbers(numbers) { + + var newArray = numbers.filter(num => num % 2 === 1).map(num => num * 2) + return newArray; + +} + +const myNumbers = [1, 2, 3, 4]; +console.log(doubleOddNumbers(myNumbers)); + +// Do not change or remove anything below this line +module.exports = { + myNumbers, + doubleOddNumbers, +}; \ No newline at end of file diff --git a/Week3/homework/step2-1.js b/Week3/homework/step2-1.js index d5699882c..8046af7d6 100644 --- a/Week3/homework/step2-1.js +++ b/Week3/homework/step2-1.js @@ -1,13 +1,11 @@ 'use strict'; function foo(func) { - // What to do here? - // Replace this comment and the next line with your code - console.log(func); + return func(); } function bar() { - console.log('Hello, I am bar!'); + console.log('Hello, I am bar!'); } foo(bar); diff --git a/Week3/homework/step2-2.js b/Week3/homework/step2-2.js index dcd135040..80e7e6b39 100644 --- a/Week3/homework/step2-2.js +++ b/Week3/homework/step2-2.js @@ -1,20 +1,34 @@ 'use strict'; function threeFive(startIndex, stopIndex, threeCallback, fiveCallback) { - const numbers = []; + const numbers = []; + for (let i = startIndex; i <= stopIndex; i++) { + numbers.push(i); + } - // Replace this comment and the next line with your code - console.log(startIndex, stopIndex, threeCallback, fiveCallback, numbers); + numbers.map(x => { + if (x % 5 === 0 && x % 3 === 0) { + threeCallback(x); + fiveCallback(x) + } else if (x % 3 === 0) { + threeCallback(x) + } else if (x % 5 === 0) { + fiveCallback(x) + } + }) + + // Replace this comment and the next line with your code + console.log(startIndex, stopIndex, threeCallback, fiveCallback, numbers); } function sayThree(number) { - // Replace this comment and the next line with your code - console.log(number); + + console.log(number + "is dividable by 3"); } function sayFive(number) { - // Replace this comment and the next line with your code - console.log(number); + // Replace this comment and the next line with your code + console.log(number + "is dividable by 5"); } threeFive(10, 15, sayThree, sayFive); diff --git a/Week3/homework/step2-3.js b/Week3/homework/step2-3.js index 00845c5eb..000b8ffcd 100644 --- a/Week3/homework/step2-3.js +++ b/Week3/homework/step2-3.js @@ -2,46 +2,51 @@ // Use a 'for' loop function repeatStringNumTimesWithFor(str, num) { - // eslint-disable-next-line prefer-const - let result = ''; + // eslint-disable-next-line prefer-const + let result = ''; - // Replace this comment and the next line with your code - console.log(str, num, result); + for (let i = num; i > 0; i--) { + result += str; + } - return result; + return result; } console.log('for', repeatStringNumTimesWithFor('abc', 3)); // Use a 'while' loop function repeatStringNumTimesWithWhile(str, num) { - // eslint-disable-next-line prefer-const - let result = ''; + // eslint-disable-next-line prefer-const + let result = ''; - // Replace this comment and the next line with your code - console.log(str, num, result); + while (num > 0) { + result += str; + num--; + } - return result; + return result; } console.log('while', repeatStringNumTimesWithWhile('abc', 3)); // Use a 'do...while' loop function repeatStringNumTimesWithDoWhile(str, num) { - // eslint-disable-next-line prefer-const - let result = ''; + // eslint-disable-next-line prefer-const + let result = ''; + do { + result += str; + num--; + } while (num > 0); - // Replace this comment and the next line with your code - console.log(str, num, result); - return result; + return result; } console.log('do-while', repeatStringNumTimesWithDoWhile('abc', 3)); // Do not change or remove anything below this line module.exports = { - repeatStringNumTimesWithFor, - repeatStringNumTimesWithWhile, - repeatStringNumTimesWithDoWhile, + repeatStringNumTimesWithFor, + repeatStringNumTimesWithWhile, + repeatStringNumTimesWithDoWhile, }; diff --git a/Week3/homework/step2-4.js b/Week3/homework/step2-4.js index b11b1dcb6..efc64a405 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 = 'MoonLight'; + this.color = 'blonde'; + this.numLegs = 4; } const hound = new Dog(); diff --git a/Week3/homework/step2-5.js b/Week3/homework/step2-5.js index cbb54fa1d..7f59cdbc9 100644 --- a/Week3/homework/step2-5.js +++ b/Week3/homework/step2-5.js @@ -1,17 +1,24 @@ 'use strict'; function multiplyAll(arr) { - // eslint-disable-next-line - let product = 1; + // eslint-disable-next-line + let product = 1; - // Replace this comment and the next line with your code - console.log(arr, product); + for (var i = 0; i < arr.length; i++) { + for (var j = 0; j < arr[i].length; j++) { + product = product * arr[i][j]; + } - return product; -} + return product; + } -const result = multiplyAll([[1, 2], [3, 4], [5, 6]]); -console.log(result); // 720 + 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; + // 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..ff774fb90 100644 --- a/Week3/homework/step2-6.js +++ b/Week3/homework/step2-6.js @@ -1,23 +1,34 @@ 'use strict'; -const arr2d = [[1, 2], [3, 4], [5, 6]]; -const arr3d = [[[1, 2], [3, 4]], [[5, 6], [7, 8]]]; +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 - console.log(arr); + return arr.flat(); } function flattenArray3d(arr) { - // Replace this comment and the next line with your code - console.log(arr); -} + return arr.flat(2); +} console.log(flattenArray2d(arr2d)); // -> [1, 2, 3, 4, 5, 6] console.log(flattenArray3d(arr3d)); // -> [1, 2, 3, 4, 5, 6, 7, 8] // Do not change or remove anything below this line module.exports = { - flattenArray2d, - flattenArray3d, + flattenArray2d, + flattenArray3d, }; diff --git a/Week3/homework/step2-7.js b/Week3/homework/step2-7.js index 3e72e8551..03d418964 100644 --- a/Week3/homework/step2-7.js +++ b/Week3/homework/step2-7.js @@ -1,9 +1,10 @@ 'use strict'; const x = 9; + function f1(val) { - val = val + 1; - return val; + val = val + 1; + return val; } f1(x); @@ -11,9 +12,10 @@ f1(x); console.log(x); const y = { x: 9 }; + function f2(val) { - val.x = val.x + 1; - return val; + val.x = val.x + 1; + return val; } f2(y); @@ -21,3 +23,11 @@ f2(y); console.log(y); // Add your explanation as a comment here +/* +Function is called by directly passing the reference/address of the variable + as the argument. Changing the argument inside the function + affect the variable passed from outside the function. + In Javascript objects and arrays follows pass by reference. + so if we are passing object or array as an argument to the method, + then there is a possibility that value of the object can change. + */ diff --git a/Week3/homework/step3-bonus.js b/Week3/homework/step3-bonus.js index 917091d61..2e2afb9f2 100644 --- a/Week3/homework/step3-bonus.js +++ b/Week3/homework/step3-bonus.js @@ -1,12 +1,13 @@ '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); -} + let myArray = ['a', 'b', 'c', 'd', 'a', 'e', 'f', 'c']; + + unique = [...new Set(myArray)]; + return result; + +}; const uniqueValues = makeUnique(values); console.log(uniqueValues); diff --git a/Week3/homework/step3.js b/Week3/homework/step3.js index 292724bf4..3954ec9eb 100644 --- a/Week3/homework/step3.js +++ b/Week3/homework/step3.js @@ -1,8 +1,9 @@ 'use strict'; function createBase(base) { - // Replace this comment and the next line with your code - console.log(base); + // Replace this comment and the next line with your code + return + console.log(base); } const addSix = createBase(6);