Update index.js

Week1/exercise/w1/index.js

@@ -10,7 +10,13 @@ console.log('Hack your future Belgium!');
 // 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 changeHeader(){
+    console.log('test');
+let header = document.getElementsByTagName("h1")[0];
+header.innerHTML = "Mesut";
+}
 
+document.getElementById("change-header").addEventListener("click" ,changeHeader);
 
 // ====================================== //
 
@@ -29,7 +35,13 @@ console.log('Hack your future Belgium!');
 
 // 2e: to change the image: assign the imageInputValue to the image src
 
+function changeImage(){
+let imageInput = document.querySelector('input');
+let imageInputValue = document.querySelector('img');
+imageInputValue.src = imageInput.value;
+}
 
+document.getElementById('btn-changeImage').addEventListener('click', changeImage)
 // ====================================== //
 
 
@@ -48,3 +60,16 @@ console.log('Hack your future Belgium!');
 // 3f: set created <li> element innerHtml to todoInput value
 
 // 3g: add <li> element to todoList
+
+function addTodo(){
+
+
+    const createLi = document.createElement('li');
+    const textLi = document.createTextNode(document.getElementById('todoInput').value);
+    createLi.appendChild(textLi);
+    document.getElementById('todoList').appendChild(createLi)
+
+}
+
+
+document.getElementById('btn-addTodo').addEventListener('click', addTodo)

Week1/homework/app.js

@@ -1,11 +1,138 @@
 'use strict';
 
 {
+
   const bookTitles = [
     // Replace with your own book titles
-    'harry_potter_chamber_secrets',
+    'gingerbread',
+    'normal_people',
+    'dark_constellations',
+    'the_water_cure',
+    'star',
+    'black_leopar_red_wolf',
+    'optic_nerve',
+    'ghost_wall',
+    'naamah',
+    'message_from_the_shadows'
+
   ];
 
   // Replace with your own code
-  console.log(bookTitles);
+  const bookTitlesObjects = { 
+    gingerbread: {
+      Title: 'Gingerbread',
+      Written_By: 'Helen Oyeyemi',
+      Release_Date: 'March 5, 2019',
+      Language: 'English'},
+    normal_people: {
+      Title: 'Normal People',
+      Written_By: 'Sally Rooney',
+      Release_Date: 'April 16, 2019',
+      Language: 'English'},
+    dark_constellations: {
+      Title: 'Dark Constellations',
+      Written_By: 'Pola Oloixarac',
+      Release_Date: 'April 16, 2019',
+      Language: 'English'},
+    the_water_cure: {
+      Title: 'The Water Cure',
+      Written_By: 'Sophie Mackintosh',
+      Release_Date: 'January 8, 2019',
+      Language: 'English'},
+    star: {
+      Title: 'Star',
+      Written_By: 'Yukio Mishima',
+      Release_Date: 'April 30, 2019',
+      Language: 'English'},
+    black_leopar_red_wolf: {
+      Title: 'Black Leopar Red Wolf',
+      Written_By: 'Marlon James',
+      Release_Date: 'February 5, 2019',
+      Language: 'English'},
+    optic_nerve: {
+      Title: 'Optic Nerve',
+      Written_By: 'María Gainza',
+      Release_Date: 'April 9, 2019',
+      Language: 'English'},
+    ghost_wall: {
+      Title: 'Ghost Wall',
+      Written_By: 'Sarah Moss',
+      Release_Date: ' January 8, 2019',
+      Language: 'English'},
+    naamah: {
+      Title: 'Naamah',
+      Written_By: 'Sarah Blake',
+      Release_Date: ' April 9, 2019',
+      Language: 'English'},
+    message_from_the_shadows:{
+      Title: 'Message From The Shadows',
+      Written_By: 'Antonio Tabucchi',
+      Release_Date: 'May 14, 2019',
+      Language: 'English'}
+}
+const bookCoverImageObjects = {
+   gingerbread: "./images/gingerbread.jpg",
+   normal_people: "./images/normal_people.jpg",
+   dark_constellations: "./images/dark_constellations.jpeg",
+   the_water_cure: "./images/the_water_cure.jpg",
+   star: "./images/star.jpg",
+   black_leopar_red_wolf: "./images/black_leopar_red_wolf.jpg",
+   optic_nerve: "./images/optic_nerve.jpg",
+   ghost_wall: "./images/ghost_wall.jpg",
+   naamah: "./images/naamah.jpg",
+   message_from_the_shadows: "./images/message_from_the_shadows.jpg"
+}
+
+const h2Titles = [
+  'Written By',
+  'Release Date',
+  'Language'
+] ;
+
+
+
+function bookDetails( titles, details, images ,h2title){
+  let ul = document.createElement("ul");
+    for(let i in titles){
+    let li = document.createElement("li");
+    li.id = titles[i];
+    let H1 = document.createElement("h1");
+    H1.innerHTML = details[titles[i]].Title;
+    let H3 = document.createElement('H3');
+    H3.innerHTML = h2title[0] + ' :';
+    let newH3 =  document.createElement('H3');
+    newH3.innerHTML = h2title[1]+ ' :';
+    let lastH3 =  document.createElement('H3');
+    lastH3.innerHTML = h2title[2]+ ' :';
+    let p1 = document.createElement("p");
+    p1.innerHTML =  details[titles[i]].Written_By;
+    let p2 = document.createElement("p");
+    p2.innerHTML = details[titles[i]].Release_Date;
+    let p3 = document.createElement("p");
+    p3.innerHTML = details[titles[i]].Language;
+    let img = document.createElement("img");
+    img.src = images[titles[i]];
+
+
+   li.appendChild(H1);
+   li.appendChild(img);
+   li.appendChild(H3);
+   li.appendChild(p1);
+   li.appendChild(newH3);
+   li.appendChild(p2);
+   li.appendChild(lastH3);
+   li.appendChild(p3);
+    ul.appendChild(li);
+  }
+  document.body.appendChild(ul);
 }
+
+
+bookDetails(bookTitles, bookTitlesObjects, bookCoverImageObjects, h2Titles);
+
+
+}
+
+
+
+

Week1/homework/index.html

@@ -1 +1,28 @@
-<!-- replace this with your HTML content -->
+
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <link rel="stylesheet" href="style.css">
+    <title>Homework JS2-Week1</title>
+    <header>
+      <h1>Hack Your Future Belgium</h1>
+      <h2>JS2 - Week1 - Homework</h2>
+    </header>
+  </head>
+
+  <body>
+      <div>
+        <h3 class ="subject">Top 10 Books of 2019</h3>
+      </div>
+
+  </body>
+
+  <script type="text/javascript" src="./app.js"></script>
+</html>
+
+
+

Week1/homework/style.css

@@ -1 +1,120 @@
-/* add your styling here */
+/* add your styling here */
+
+header > h1{
+text-align: center;
+font-size: 24px;
+text-transform: uppercase;
+letter-spacing: 10px;
+color: yellow;
+background-color: rgb(119, 11, 11);
+border: 2px solid yellow;
+border-radius: 10px;
+padding-top: 5%;
+padding-bottom: 5%;
+width: 70%;
+height: 2rem;
+margin-left: auto;
+margin-right: auto;
+}
+header >h2{
+    text-align: center;
+    size: 2em;
+    text-decoration: underline;
+}
+body{
+    margin-left: 5%;
+    margin-right: 5%;
+}
+h3.subject {
+    text-align: center;
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 32px;
+    color: red;
+    margin-top: 2em;
+    letter-spacing: 3px;
+    background: linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 0, 0), rgb(255, 0, 0));
+    background-repeat: no-repeat;
+    background-size: 80%;
+    animation: animate 4s linear infinite;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: rgba(255, 255, 255, 0);
+
+}
+@keyframes animate {
+    0% {
+      background-position: -300%;
+    }
+    100% {
+      background-position: 300%;
+    }
+  }
+ul {
+    display: flex;
+   text-align: center;
+    list-style: none;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    grid-gap: 20px 50px;
+    padding: 2%;
+    box-shadow: 3px 3px 3px 3px rgb(252, 0, 0);
+}
+
+ h1 {
+    color: blue;
+    font-family: 'Courier New', Courier, monospace;
+}
+
+img {
+    height: 20rem;
+    width: 15rem;
+}
+img:hover{
+    transform: scale(1.05);
+}
+
+
+@media screen and (max-width:480px) {
+    header >h1 {
+        font-size: 10px;
+        letter-spacing: 5px;
+        width: 80%;
+    }
+    header >h2 {
+        font-size: 1em;
+    }
+    h3.subject {
+       font-size: 16px;
+    }
+
+    img {
+height: 10rem;
+width: 7.5rem;
+    }
+    h1 {
+        font-size: 20px;
+    }
+
+}
+/* .....For tablets.....*/
+@media screen and (min-width: 481px) and (max-width:768px) {
+    header >h1 {
+        font-size: 16px;
+        letter-spacing: 10px;
+        width: 80%;
+    }
+    header >h2 {
+        font-size: 1.5em;
+    }
+    h3.subject {
+       font-size: 22px;
+    }
+
+    img {
+height: 15rem;
+width: 10rem;
+    }
+    h1 {
+        font-size: 28px;
+    }
+}
+

Week2/homework/json.html

@@ -0,0 +1,9 @@
+
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>JSON Exercises</title>
+  </head>
+  <body></body>
+  <script src="./json.js"></script>
+</html>

Week2/homework/json.js

@@ -0,0 +1,32 @@
+
+// Write a JavaScript program to get the length (amount of keys) of a JavaScript object.
+const agency = {
+     Name: 'Europe Education Guide', 
+     Description: 'Educational Consultancy',
+     WebSite: 'wwww.eduadviser.org',
+     Since : 2018 
+    };
+const objLength = Object.keys(agency).length;
+console.log(objLength);
+
+
+// Write a JavaScript function to check if an object contains given property.
+
+const objProperty = function(obj, property) {
+    return obj.hasOwnProperty(property);
+};
+console.log(objProperty(agency,'Name'));
+
+// Write a JavaScript program to create a Clock. Console, every second :”14:37:42”,”14:37:43", “14:37:44”, "14:37:45" 
+
+function myClock() {
+    const date = new Date();
+    const hour = date.getHours();
+    const minute = date.getMinutes();
+    const second = date.getSeconds();
+    const timeIs = hour + ':' + minute + ':' + second;
+    console.log(timeIs);
+  }
+  setInterval(myClock, 1000);
+  myClock();
+