HackYourFuture · Jalalalattar · Dec 22, 2019 · Jan 11, 2020 · Jan 13, 2020 · Jan 17, 2020
diff --git a/Week1/homework/js2-exercises/1-books.html b/Week1/homework/js2-exercises/1-books.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Book list</title>
+</head>
+
+<body>
+  <h1>My book list</h1>
+
+  <script>
+    const books = [
+    {
+    title : 'An Artist of the Floating World',
+    author : 'Kazuo Ishiguro',
+    alreadyRead :false  
+    },
+    {
+    title : 'Underworld',
+    author : 'Don DeLillo',
+    alreadyRead :true   
+    }
+];
+
+    const ul = document.createElement('ul');
+    // 1
+    for (let obj of books) {
+// 2
+      const p = document.createElement('p');
+      p.innerText = `${obj.title} was written by ${obj.author.toUpperCase()}`;
+// 5
+
+      if (obj.alreadyRead === true) {
+        p.style.color = 'green';
+      } else {
+        p.style.color = 'red';
+      }
+
+// 3
+      const li = document.createElement('li');
+      li.appendChild(p);
+      ul.appendChild(li);
+      document.body.appendChild(ul);
+    }
+    // 4
+
+    let img1 = document.createElement('img');
+    let img2 = document.createElement('img');z
+    img1.src = 'https://upload.wikimedia.org/wikipedia/en/thumb/e/e1/ArtistOfTheFloatingWorld.jpg/220px-ArtistOfTheFloatingWorld.jpg';
+    img2.src = 'http://xoxoafterdark.com/wp-content/uploads/2014/10/Delillo-Underworld.jpg';
+    let lis = document.querySelectorAll('li');
+    lis[0].appendChild(img1).style.width = '350px';
+    lis[1].appendChild(img2).style.width = '350px';
+
+  </script>
+</body>
+
+</html> 
diff --git a/Week1/homework/js2-exercises/2-aboutMe.html b/Week1/homework/js2-exercises/2-aboutMe.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>About Me</title>
+  </head>
+  <body>
+    <h1>About Me</h1>
+
+    <ul>
+      <li>Nickname: <span id="nickname"></span></li>
+      <li>Favorite food: <span id="fav-food"></span></li>
+      <li>Hometown: <span id="hometown"></span></li>
+    </ul>   
+	<script>
+		document.body.style.fontFamily=`Arial,sans-serif`;
+
+		document.querySelector('#nickname').innerText='David';
+		document.querySelector('#fav-food').innerText='Charcoal grilled meat';
+		document.querySelector('#hometown').innerText='London';
+
+		const items=document.querySelectorAll('ul li');
+		items.forEach(item=> {item.classList.add('list-item')})
+
+		const styleTag=document.createElement('style');
+		document.querySelector("head").appendChild(styleTag);
+		document.querySelector('style').innerText= '.list-item {color:red}'
+
+		const img = document.createElement('img');
+		img.src = 'https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/d9585883-0c30-448b-8cee-6eac6d5c695f/d80kp71-a8d13ec7-6e9a-4268-9312-222184443314.png/v1/fill/w_1024,h_576,q_75,strp/real_madrid_david_beckham_wallpaper_by_sameerhd-d80kp71.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwic3ViIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl0sIm9iaiI6W1t7InBhdGgiOiIvZi9kOTU4NTg4My0wYzMwLTQ0OGItOGNlZS02ZWFjNmQ1YzY5NWYvZDgwa3A3MS1hOGQxM2VjNy02ZTlhLTQyNjgtOTMxMi0yMjIxODQ0NDMzMTQucG5nIiwid2lkdGgiOiI8PTEwMjQiLCJoZWlnaHQiOiI8PTU3NiJ9XV19.DsmMSnKtljCP7zEAAUsax4S3Lf9oASSChxWHmyPAT0g'
+		document.body.appendChild(img);
+	</script>
+  </body>
+</html> 
diff --git a/Week1/homework/js2-exercises/3-hijackGoogleLogo.js b/Week1/homework/js2-exercises/3-hijackGoogleLogo.js
@@ -0,0 +1,7 @@
+function hijackGoogleLogo () {
+    let googleImage=document.querySelector('#hplogo')
+    googleImage.src='https://www.hackyourfuture.dk/static/logo-dark.svg'
+    googleImage.srcset='https://www.hackyourfuture.dk/static/logo-dark.svg'
+
+}
+hijackGoogleLogo ();
diff --git a/Week1/homework/js2-exercises/4-showCurrentTime.js b/Week1/homework/js2-exercises/4-showCurrentTime.js
@@ -0,0 +1,6 @@
+function eenklok() {
+    const datum = new Date();
+    const tijd = datum.toLocaleTimeString();
+    document.querySelector('#klok').innerHTML = tijd;
+}
+setInterval(eenklok, 1000);
diff --git a/Week1/homework/js2-exercises/4-theTime.html b/Week1/homework/js2-exercises/4-theTime.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Klok :)</title>
+    <style>
+        div {
+            height: 100px;
+            background-color: lightgray;
+            text-align: center;
+            font-weight: 900;
+            font-size: 90px;
+            color: orange;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="klok"></div>
+    <script src="./showCurrentTime.js">
+
+    </script>
+</body>
+
+</html>
diff --git a/Week1/homework/js2-exercises/5-catWalking.html b/Week1/homework/js2-exercises/5-catWalking.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Cat Walk</title>
+  </head>
+  <body>
+    <img style="position:absolute;" src="http://www.anniemation.com/clip_art/images/cat-walk.gif" />
+    <script >
+        const img = document.querySelector('img');
+        const srcCatWalking = 'http://www.anniemation.com/clip_art/images/cat-walk.gif';
+        const srcCatDancIng = 'https://media2.giphy.com/media/3mXcJgVhPxWZa/giphy.gif';
+        let left = 0
+
+        function catWalk() {
+
+            setInterval(frame, 50)
+            function frame() {
+
+                left = left > 1500 ? 0 : left;
+                img.style.left = left + 'px';
+
+                if (left === 750) {
+                    if (img.src != srcCatDancIng) {
+
+                        setTimeout(() => { img.src = srcCatWalking; left += 10 }, 5000)
+                        img.src = srcCatDancIng;
+
+                    }
+                } else {
+                    img.style.left;
+                    left += 10;
+                }
+            }
+        }
+        catWalk();
+    </script>
+  </body>
+</html>  
diff --git a/Week2/homework/js-exercises/ex-1.js b/Week2/homework/js-exercises/ex-1.js
@@ -0,0 +1,6 @@
+function doubleEvenNumbers(num) {
+    return num.filter(nummer => !(nummer % 2)).map(nummer => nummer);
+  }
+  const myNumbers = [1, 2, 3, 4, 5, 6, 7];
+  console.log(doubleEvenNumbers(myNumbers));
+
diff --git a/Week2/homework/js-exercises/ex-2.js b/Week2/homework/js-exercises/ex-2.js
@@ -0,0 +1,46 @@
+
+'use strict';
+
+const mondayTasks = [
+  {
+    name: 'Daily standup',
+    duration: 30, // specified in minutes
+  },
+  {
+    name: 'Feature discussion',
+    duration: 120,
+  },
+  {
+    name: 'Development time',
+    duration: 240,
+  },
+  {
+    name: 'Talk to different members from the product team',
+    duration: 60,
+  },
+];
+
+function uurtariefMaandag(calculate) {
+  const looptijd = calculate.map(el => {
+    return el.duration;
+  });
+
+  //getting the time spent in hrs
+  const looptijdInUur = looptijd.map(el => {
+    return el / 60;
+  });
+
+  //the rate in hour
+  const vermenigvuldigDuurUurtarief = looptijdInUur.map(el => {
+    return el * 25;
+  });
+
+  //  THE RESULT FOR ONE DAY
+  const somDagtarief = vermenigvuldigDuurUurtarief.reduce((totaal, el) => {
+    return el + totaal;
+  }, 0);
+
+  return somDagtarief;
+}
+
+console.log(`€${uurtariefMaandag(mondayTasks)}`);
diff --git a/Week2/homework/js-exercises/ex-3.js b/Week2/homework/js-exercises/ex-3.js
@@ -0,0 +1,9 @@
+'use strict';
+const fruitBasket = ['Apple', 'Lemon', 'Grapefruit', 'Lemon', 'Banana', 'Watermelon', 'Lemon'];
+const lemon = 'Lemon';
+
+function removeLemon(el) {
+    const exceptLemon = el.filter(fruit => fruit !== lemon);
+    return `My mom bought me a fruit basket, containing ${exceptLemon.join(', ')} `;
+  }
+  console.log(removeLemon(fruitBasket));
diff --git a/Week2/homework/js-exercises/ex-4.js b/Week2/homework/js-exercises/ex-4.js
@@ -0,0 +1,16 @@
+'use strict';
+
+const hackYourFutureMembers = [
+    { name: 'Wouter', age: 33 },
+    { name: 'Federico', age: 32 },
+    { name: 'Noer', age: 27 },
+    { name: 'Tjebbe', age: 22 },
+  ];
+
+  function combinedAge(callback) {
+    const ages = callback.map(member => member.age);
+    const agesSum = ages.reduce((total, age) => total + age, 0);
+    console.log(`The collective age of the HYF team is: ${agesSum}`);
+    return agesSum;
+  }
+  console.log(combinedAge(hackYourFutureMembers));
diff --git a/Week2/homework/js-exercises/ex-5.css b/Week2/homework/js-exercises/ex-5.css
@@ -0,0 +1,39 @@
+
+h1{
+    text-align: center;
+}
+ul {
+padding: 0;
+display: block;
+margin: 24px auto;
+width: 320px;
+color: white;
+text-align: center;
+}
+
+li {
+display: block;
+height: 72px;
+width: 320px;
+background-color: #009688;
+animation-name: animateIn;
+animation-duration: 2350ms;
+animation-delay: calc(var(--animation-order) * 100ms);
+animation-fill-mode: both;
+animation-timing-function: ease-in-out;
+}
+
+li + li {
+margin-top: 16px;
+}
+
+@keyframes animateIn {
+0% {
+    opacity: 0;
+    transform: scale(0.6) translateY(-8px);
+}
+
+100% {
+    opacity: 1;
+}
+}
diff --git a/Week2/homework/js-exercises/ex-5.html b/Week2/homework/js-exercises/ex-5.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+      <link rel="stylesheet" href="ex-5.css">
+    <title>My hobbies</title>
+  </head>
+  <body>
+      <h1>My hobbies</h1>
+    <script src="ex-MyHobbies-5.js"></script>
+  </body>
+</html>
diff --git a/Week2/homework/js-exercises/ex-MyHobbies-5.js b/Week2/homework/js-exercises/ex-MyHobbies-5.js
@@ -0,0 +1,19 @@
+'use strict';
+
+const myHobbies = [
+  'Meditation',
+  'Reading',
+  'Programming',
+  'Hanging out with friends',
+  'Going to the gym',
+];
+
+let ulElement = document.createElement('ul');
+
+myHobbies.forEach(function(el) {
+  let li = document.createElement('li');
+  let text = document.createTextNode(el);
+  li.appendChild(text);
+  ulElement.appendChild(li);
+  document.body.appendChild(ulElement);
+});