diff --git a/Week1/JS2-1.key b/Week1/JS2-1.key new file mode 100644 index 000000000..b2cec84a4 Binary files /dev/null and b/Week1/JS2-1.key differ diff --git a/Week1/JS2-1.pdf b/Week1/JS2-1.pdf new file mode 100644 index 000000000..83ed5eb6f Binary files /dev/null and b/Week1/JS2-1.pdf differ diff --git a/Week1/exercise/w1/index.html b/Week1/exercise/w1/index.html new file mode 100644 index 000000000..5a88074db --- /dev/null +++ b/Week1/exercise/w1/index.html @@ -0,0 +1,38 @@ + + + + + + + Document + + + +

Hack your future

+

JS2 - exercise 1

+ +
+
+ lights +
+ +
+ + +
+ +
+

Todos:

+ + + +
+
+ + + + diff --git a/Week1/exercise/w1/index.js b/Week1/exercise/w1/index.js new file mode 100644 index 000000000..5106a33bb --- /dev/null +++ b/Week1/exercise/w1/index.js @@ -0,0 +1,65 @@ +console.log('Hack your future, right?!'); + +const header = document.querySelector('h1'); +console.log('header: ', header); + +// document.querySelector('button id="btn-changeImage"'); +//exercise 1: +const botton1 = document.getElementById("btn-changeImage") + +botton1.addEventListener('click', function() { + console.log('it is selected'); + } +) + +const changeIt = () => { + const old = document.getElementById("imageToChange"); + console.log(old); + const newurl = document.getElementById("imageInput").value; + console.log(newurl); + old.src = newurl; +} + +botton1.addEventListener('click' , changeIt) + +// Exercise 2: + +const botton2 = document.querySelector('#btn-addTodo'); + +const addtodo = () => { + var todoList = document.getElementById('todoList'); + const todoInput = document.querySelector('#todoInput'); + console.log(todoInput.value); + var todoElement = document.createElement('li'); + todoElement.innerHTML = todoInput.value; + todoList.appendChild(todoElement); + todoInput.value = ''; //after clicking' the text input should disappear, i think... +} + +botton2.addEventListener('click' , addtodo) + + +// EXERCISE: +// select "change image" button (querySelector) +// add click event listener +// execute changeImage() function on click event +// define changeImage() function +// in this function: +// get image element +// get imageInput element +// log input value +// set image src to imageInput element value + +// BONUS: +// select "add todo" button (querySelector) +// add click event listener +// execute addTodo() function on click event +// define addTodo() function +// in this function: +// get todoList element +// get todoInput element +// log todoInput element value +// create
  • element +// set
  • element innerHtml to todoInput value +// add
  • element to todoList +// ====================================== // diff --git a/Week1/homework/app.js b/Week1/homework/app.js index a9b5f75d8..2e9e23c04 100644 --- a/Week1/homework/app.js +++ b/Week1/homework/app.js @@ -3,9 +3,31 @@ { const bookTitles = [ // Replace with your own book titles - 'harry_potter_chamber_secrets', + 'the_great_gatsby', + 'to_kill_a_mockingbird', + 'harry_potter_and_the_sorcerers_stone', + '1984', + 'the_catcher_in_the_rye', + 'the_hobbit', + 'fahrenheit_451', + 'pride_and_prejudice', + 'brave_new_world', + 'a_wrinkle_in_time', ]; - // Replace with your own code - console.log(bookTitles); + + var listContainer = document.createElement('div'); + document.getElementsByTagName('body')[0].appendChild(listContainer); + + var booklist = document.createElement('ul'); + + + var itemCount = bookTitles.length; + for (var i = 0; i < itemCount; ++i) { + var listItem = document.createElement('li'); + listItem.innerText = bookTitles[i]; + booklist.appendchild(listItem); + } + listContainer.appendChild(booklist); + } diff --git a/Week2/JS2-2.key b/Week2/JS2-2.key new file mode 100644 index 000000000..8d78a8c6c Binary files /dev/null and b/Week2/JS2-2.key differ diff --git a/Week2/JS2-2.pdf b/Week2/JS2-2.pdf new file mode 100644 index 000000000..bdcd840d0 Binary files /dev/null and b/Week2/JS2-2.pdf differ diff --git a/Week2/homework/maartjes-work.js b/Week2/homework/maartjes-work.js index 49772eb44..b626077a5 100644 --- a/Week2/homework/maartjes-work.js +++ b/Week2/homework/maartjes-work.js @@ -1,61 +1,69 @@ '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 - console.log(tasks, hourlyRate); -} +//exercise 2 -// 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'}`); +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: 1.0 + } + ]; + + const tuesday = [ + { + name: 'Keep writing summary', + duration: 1.0 + }, + { + name: 'Some more web development', + duration: 180 + }, + { + name: 'Staring out the window', + duration: 10 + }, + { + name: 'Talk to a lot of people', + duration: 1.0 + }, + { + name: 'Look at application assignments new students', + duration: 40 + } + ]; + + const allTasks = monday.concat(tuesday); + + const MaartjesHourlyPayment = 20; + + function salary(tasks, hourlyPayment) { + + const taskDuration = tasks.map(x =>x.duration); + const payableHours = taskDuration.filter(y => y > 119); //exclude less then 2 hours. No special codding added for 1.0 hours format, because there are no 2.0 hours:) + const total = (accumulator, currentValue) => accumulator + currentValue; + const totalInHours = payableHours.reduce(total); + const paymentRaw = totalInHours/60*20; + var payment = paymentRaw.toFixed(2); + return payment; + } + + const earned = salary(allTasks, MaartjesHourlyPayment); + + console.log(`Maartje has made €${earned}. Good Job.`); + + // Do not change or remove anything below this line module.exports = { diff --git a/Week2/homework/map-filter.js b/Week2/homework/map-filter.js index c8e8a88c1..96c0a6804 100644 --- a/Week2/homework/map-filter.js +++ b/Week2/homework/map-filter.js @@ -1,15 +1,14 @@ 'use strict'; -function doubleOddNumbers(numbers) { - // Replace this comment and the next line with your code - console.log(numbers); -} +// exercise 1, double odd 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 oddNumbers = myNumbers.filter(n => n % 2 !==0); + +const newNumbers = oddNumbers.map(x => x * 2); + +console.log(newNumbers); // => [2, 6] + + + diff --git a/Week3/JS2-3.key b/Week3/JS2-3.key new file mode 100644 index 000000000..8f162de60 Binary files /dev/null and b/Week3/JS2-3.key differ diff --git a/Week3/JS2-3.pdf b/Week3/JS2-3.pdf new file mode 100644 index 000000000..0cd4345cc Binary files /dev/null and b/Week3/JS2-3.pdf differ