JS2 - exercise 1
+
diff --git a/Week1/exercise/w1/index.js b/Week1/exercise/w1/index.js
index fcea7032e..07d5a5b6f 100644
--- a/Week1/exercise/w1/index.js
+++ b/Week1/exercise/w1/index.js
@@ -1,50 +1,91 @@
-console.log('Hack your future Belgium!');
-// EXERCISE 1
-
-// 1a: create a function called "changeHeader", put a console.log() inside this function to test
-
-// 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
-
-
-// ====================================== //
-
-
-// EXERCISE 2
-
-// 2a: create a function called "changeImage", put a console.log() inside this function to test
-
-// 1b: add an event listener to the "Change image" button and call the "changeImage" function when clicked
-
-// inside this function:
-
-// 2c: select the "imageInput" element and assign to a variable called "imageInputValue"
-
-// 2d: select the image element and assign to a variable called "imageToChange"
-
-// 2e: to change the image: assign the imageInputValue to the image src
-
-
-// ====================================== //
-
-
-// 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:
+window.onload = function(){
+ console.log('Hack your future Belgium!');
+
+ // EXERCISE 1
+
+ // 1a: create a function called "changeHeader", put a console.log() inside this function to test
+
+ /* function changeHeader() {
+ console.log("test 2");
+ }; */
+
+ // 1b: inside this function: select the header element and assign that to a variable called "header"
+
+ /* function changeHeader() {
+ var headerToChange = document.getElementById("myHeadChange");
+ console.log(headerToChange)
+ }; */
+
+ // 1c: change the inner html of the header element to your name
+
+ function changeHeader() {
+ var headerToChange = document.getElementById("myHeadChange");
+ headerToChange.innerHTML = "Melrose"
+ };
+
+ // 1d: add an event listener to the "Change header" button
+ //and call the "changeHeader" function when clicked ( you should see your console.log() )
+ //function changeHeader();
+ var btn_changhead = document.getElementById("btn-changeHeader");
+ btn_changhead.addEventListener("click", function(){
+ changeHeader()
+ });
+
+
+ // EXERCISE 2
+
+ // 2a: create a function called "changeImage", put a console.log() inside this function to test
+ function changeImage(){
+ console.log("test image");
+ };
+ // 1b: add an event listener to the "Change image" button and call the "changeImage" function when clicked
+ var btn_changeImage = document.getElementById("btn-changeImage");
+ btn_changeImage.addEventListener("click", function () {
+ changeImage()
+ })
+ // inside this function:
+
+ // 2c: select the "imageInput" element and assign to a variable called "imageInputValue"
+ function changeImage() {
+ var imageInputValue = "https://www.w3schools.com/w3css/img_nature_wide.jpg"
+ var imageToChange = document.getElementById("imageToChange");
+ imageToChange.src = imageInputValue;
+ };
+
+ // 2d: select the image element and assign to a variable called "imageToChange"
+ //var imageToChange =
+ // 2e: to change the image: assign the imageInputValue to the image src
+
+
+ // Exercise 3:
+
+ // 3a: select "add todo" button & add click event listener to execute addTodo() function on click event
+ var btn_addTodo = document.getElementById("btn-addTodo");
+ btn_addTodo.addEventListener("click", function () {
+ addTodo()
+ })
+ // 3b: define addTodo() function, in this function:
+
+ /* function addTodo(){
+ console.log("addTodo")
+ }; */
// 3c: get todoList element
-
+ var todoList = document.getElementById("todoList");
// 3d: get todoInput element & log todoInput value
-
+ var todoInput = document.getElementById("todoInput")
// 3e: create a element
-
+ var li = document.createElement("li");
// 3f: set created element innerHtml to todoInput value
-
+ li.innerHTML = todoInput.value
// 3g: add element to todoList
+ function addTodo() {
+ console.log("addTodo")
+ li.innerHTML = todoInput.value
+ todoList.append(li)
+ };
+}
+/*
+// ====================================== //
+ */
diff --git a/Week1/homework/app.js b/Week1/homework/app.js
index a9b5f75d8..d3f0f60d1 100644
--- a/Week1/homework/app.js
+++ b/Week1/homework/app.js
@@ -3,9 +3,118 @@
{
const bookTitles = [
// Replace with your own book titles
- 'harry_potter_chamber_secrets',
+ 'les_cerises_de_salomon',
+ 'kathrine_the_shrew',
+ 'autre_choix',
+ 'the_dog_and_the_bone',
+ 'six_tales_from_shakesphere',
+ 'fairy_tale_story',
+ 'she_stoop_to_conquer',
+ 'shylock',
+ 'the_owl_and_the_pussycat',
+ 'the_quick_brown_fox'
+
];
// Replace with your own code
- console.log(bookTitles);
+
+ var newUl = document.createElement('ul')
+ bookTitles.forEach(book => {
+ var listItem = document.createElement("li");
+ var itemText = document.createTextNode(book);
+ listItem.appendChild(itemText);
+ newUl.appendChild(listItem)
+ })
+ document.body.appendChild(newUl)
+ //create Object of books
+ book1= {
+ title: 'les_cerises_de_salomon',
+ language: 'french',
+ Author: 'Claude Raucy',
+ };
+ book2={
+ title: 'kathrine_the_shrew',
+ language: 'english',
+ author: 'shakespeare',
+ };
+ book3= {
+ title: 'autre_choix',
+ language: 'french',
+ author: 'forgot',
+ };
+ book4= {
+ title: 'the_dog_and_the_bone',
+ language: 'english',
+ author: 'forgot',
+ }
+ book5={
+ title: 'six_tales_from_shakespeare',
+ language: 'english',
+ author: 'shakespeare',
+ };
+ book5= {
+ title: 'fairy_tale_story',
+ language:'english',
+ author: 'anonymous',
+ };
+ book6= {
+ title: 'she_stoop_to_conquer',
+ language: 'english',
+ author: 'forgot',
+ };
+ book8={
+ title: 'shylock',
+ language: 'english',
+ author: 'shakespeare',
+ };
+ book9= {
+ title: 'the_owl_and_the_pussycat',
+ language: 'english',
+ author: 'anonymous',
+ };
+ book10= {
+ title: 'the_quick_brown_fox',
+ language: 'english',
+ author: 'anonymous',
+ };
+ // object of images
+
+ les_cerises_de_salomon: {
+
+ image:'./image/les_cerises_de_salomon.jpg'
+ };
+
+ kathrine_the_shrew: {
+ image:'./image/ kathrine_the_shrew.jpg'
+ };
+
+ autre_choix: {
+
+ image:'./image/autre_choix.jpg'
+ };
+ the_dog_and_the_bone: {
+ image:'./image/the_dog_and_the_bone.jpg'
+ }
+ six_tales_from_shakesphere: {
+ image:'./image/six_tales_from_shakesphere.jpg'
+ }
+ fairy_tale_story :{
+ image: './image/ fairy_tale_story.jpg'
+ }
+ she_stoops_to_conquer: {
+ image:'./image/she_stoops_to_conquer.jpg'
+ }
+ shylock: {
+ image:'./image/shylock.jpg'
+ }
+ he_owl_and_the_pussycat: {
+ image:'./image/the_owl_and_the_pussycat.jpg'
+ }
+ the_quick_brown_fox: {
+ image:'./image/the_quick_brown_fox.jpg'
+
+ }
+ }
+
}
+
diff --git a/Week1/homework/index.html b/Week1/homework/index.html
index b22147cd1..9542d3211 100644
--- a/Week1/homework/index.html
+++ b/Week1/homework/index.html
@@ -1 +1,79 @@
-
\ No newline at end of file
+
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
diff --git a/Week1/homework/style.css b/Week1/homework/style.css
index bab13ec23..4aabb0c0b 100644
--- a/Week1/homework/style.css
+++ b/Week1/homework/style.css
@@ -1 +1,24 @@
-/* add your styling here */
\ No newline at end of file
+/* add your styling here */
+
+.mainContainer{ display: flex;
+ flex-direction: column;
+}
+
+
+ .itemsContainer{
+ display: flex;
+ flex-wrap: wrap;
+ margin: 5px;
+ font-size: 15px;
+
+}
+.item{
+ margin: 10px;
+ width: 300px;
+
+}
+#title{
+ text-align: center;
+ font-family: 'Times New Roman', Times, serif;
+ font-size: 15px;
+}
diff --git a/Week2/homework/maartjes-work.js b/Week2/homework/maartjes-work.js
index 49772eb44..118db6067 100644
--- a/Week2/homework/maartjes-work.js
+++ b/Week2/homework/maartjes-work.js
@@ -46,7 +46,14 @@ const maartjesTasks = monday.concat(tuesday);
const maartjesHourlyRate = 20;
function computeEarnings(tasks, hourlyRate) {
- // Replace this comment and the next line with your code
+ // create variables of duration and task for monday
+
+let duration = ['180', '120','20','200']
+let task = [ 'Write a summary HTML/CSS','Some web development','Fix homework for class10','Talk to a lot of people']
+ }
+});
+
+
console.log(tasks, hourlyRate);
}
diff --git a/Week2/homework/map-filter.js b/Week2/homework/map-filter.js
index c8e8a88c1..44d27187b 100644
--- a/Week2/homework/map-filter.js
+++ b/Week2/homework/map-filter.js
@@ -1,7 +1,8 @@
'use strict';
function doubleOddNumbers(numbers) {
- // Replace this comment and the next line with your code
+ // call function
+ doubleOddNumber(numbers)
console.log(numbers);
}
+
+
+ 
+
+ les cerries de salomon
+
+
+
+
+ 
+
+ kathrine the shrew
+
+
+
+
+ 
+
+ autre choix
+
+
+
+
+ 
+
+ the dog and the bone
+
+
+
+
+ 
+
+ six tales from shakesphere
+
+
+
+
+ 
+
+ fairy tale story
+
+
+
+
+ 
+
+ she stoops to conquer
+
+
+
+
+ 
+
+ shylock
+
+
+
+
+ 
+
+ the owl and the pussycat
+
+
+
+
+
+ 
+
+ the quick brown fox
+
+