HackYourFuture · BaraaK · Apr 17, 2020 · Apr 19, 2020 · Apr 19, 2020 · Apr 22, 2020
diff --git a/Week1/js-exercises/ex1-bookList.html b/Week1/js-exercises/ex1-bookList.html
@@ -5,13 +5,39 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Book List</title>
+  <style>
+    ul {
+      display:flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      width: 100%;
+      padding: 5em;
+      justify-content: space-evenly;
+      list-style: none;
+
+    }
+    li {
+      width:auto;
+      height: auto;
+      padding: 10px;
+      margin: 10px;
+      text-align: left;
+    }
+    .red{
+      background-color: red;
+    }
+    .green{
+      background-color: green;
+    }
+  </style>
 </head>
 
 <body>
   <h1> My Book List</h1>
   <div id="bookList">
     <!-- put the ul element here -->
   </div>
+  <script type="text/javascript" src="ex1-bookList.js"></script>
 </body>
 
 </html>
diff --git a/Week1/js-exercises/ex1-bookList.js b/Week1/js-exercises/ex1-bookList.js
@@ -17,23 +17,46 @@
   */
 
 function createBookList(books) {
-  // your code goes in here, return the ul element
+  //your code goes in here, return the ul element
+
+  let myBookList = document.createElement('ul');
+  for (const i of books) 
+    {
+      let bookItem = document.createElement('li');
+      let bookInfo = document.createElement('p');
+      bookInfo.innerText = `${i.title}  -  ${i.author}`;
+      bookItem.appendChild(bookInfo);
+      let bookCover = document.createElement ('img');
+      bookCover.src = i.imgUrl;
+      bookItem.appendChild(bookCover);
+
+      if (i.alreadyRead === true) bookItem.className = 'red';
+        else
+          bookItem.className = 'green';
+      myBookList.appendChild(bookItem);
+    }
+    return myBookList;
+
+
 }
 
 const books = [{
     title: 'The Design of Everyday Things',
     author: 'Don Norman',
-    alreadyRead: false
+    alreadyRead: false ,
+    imgUrl : 'https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1442460745l/840._SY475_.jpg'
   },
   {
     title: 'The Most Human Human',
     author: 'Brian Christian',
-    alreadyRead: true
+    alreadyRead: true ,
+    imgUrl : 'https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1295465264l/8884400.jpg'
   },
   {
     title: 'The Pragmatic Programmer',
     author: 'Andrew Hunt',
-    alreadyRead: true
+    alreadyRead: true ,
+    imgUrl : 'https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1401432508l/4099.jpg'
   }
 ];
 

diff --git a/Week1/js-exercises/ex2-aboutMe.html b/Week1/js-exercises/ex2-aboutMe.html
@@ -6,7 +6,11 @@
   <title>About Me</title>
 
   <!-- 5. Add a style tag that sets a rule for .list-item to make the color red. -->
-
+<style>
+  .list-item {
+    color: red;
+  }
+</style>
 </head>
 
 <body>
@@ -19,6 +23,7 @@ <h1>About Me</h1>
   </ul>
 
   <!-- 1. add a script tag here the links to ex2-aboutMe.js -->
+  <script type="text/javascript" src="ex2-aboutMe.js"></script>
 </body>
 
 </html>
diff --git a/Week1/js-exercises/ex2-aboutMe.js b/Week1/js-exercises/ex2-aboutMe.js
@@ -8,4 +8,25 @@
  4. Iterate through each li and change the class to "list-item".
  5. See HTML
  6. Create a new img element and set its src attribute to a picture of you.Append that element to the page.
- */
+ */
+
+document.querySelector('body').style.fontFamily = "Arial,sans-serif" ;
+
+const Baraa = { myNickName: 'Baraa' , myFavFood: 'pizza' , myHomeTown: 'Latakia'} ;
+setOwnInfo ('nickname',Baraa.myNickName);
+setOwnInfo ('fav-food',Baraa.myFavFood);
+setOwnInfo ('hometown', Baraa.myHomeTown);
+
+function setOwnInfo (id , info) {
+    document.getElementById(id).textContent = info;
+}
+
+const listItem  = document.querySelectorAll ('li');
+for ( const i of listItem) {
+    i.className = 'list-item';
+}
+
+const body = document.querySelector('body');
+const img = document.createElement('img');
+img.src = 'https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1442460745l/840._SY475_.jpg';
+body.appendChild(img);
diff --git a/Week1/js-exercises/ex3-hijackLogo.js b/Week1/js-exercises/ex3-hijackLogo.js
@@ -14,6 +14,8 @@
 
 function hijackGoogleLogo() {
   // your code goes in here
+  const googleLogo = document.querySelector('img');
+  googleLogo.src = 'https://www.hackyourfuture.dk/static/logo-dark.svg';
 }
 
 hijackGoogleLogo();
diff --git a/Week1/js-exercises/ex4-whatsTheTime.html b/Week1/js-exercises/ex4-whatsTheTime.html
@@ -1,4 +1,16 @@
 <!--
   1. Create a basic html file
   2. Add a script tag that links to the ex4-whatsTheTime.js
--->
+-->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WhatsTheTime</title>
+</head>
+<body onload="setInterval(hijackGoogleLogo,1000)">
+<p></p>
+<script type="text/javascript" src="ex4-whatsTheTime.js"></script>
+</body>
+</html>
diff --git a/Week1/js-exercises/ex4-whatsTheTime.js b/Week1/js-exercises/ex4-whatsTheTime.js
@@ -13,6 +13,9 @@
 
 function displayCurrentTime() {
   // your code goes in here
+  let time = new Date();
+  document.querySelector('p').innerHTML = `${time.getHours()} : ${time.getMinutes()} : ${time.getSeconds()}` ;
+
 }
 
 setInterval(displayCurrentTime, 1000);
diff --git a/Week1/js-exercises/ex5-catWalk.js b/Week1/js-exercises/ex5-catWalk.js
@@ -10,4 +10,36 @@
  5. When the cat reaches the right - hand of the screen, restart them at the left hand side("0px").So they should keep walking from left to right across the screen, forever and ever.
  6. When the cat reaches the middle of the screen, replace the img with an image of a cat dancing(use this URL: https: //tenor.com/StFI.gif), keep it dancing for 5 seconds, and then replace the img with the original image and have it continue the walk.
 
-*/
+*/
+const catImg = document.querySelector('img');
+catImg.style.left = '0px';
+let leftSide = 0;
+let rightSide = window.innerWidth - ( leftSide + catImg.width );
+let mainInterval;
+function pause()
+{
+    catImg.src = "http://www.anniemation.com/clip_art/images/cat-walk.gif";
+    mainInterval = setInterval(catWalk,50);
+}
+ function catWalk() { 
+    rightSide = window.innerWidth - ( leftSide + catImg.width );
+    if ( (leftSide + catImg.width/2 > window.innerWidth/2) && (leftSide + catImg.width/2 <= window.innerWidth/2 + 10) ) 
+    {
+        clearInterval(mainInterval)
+        catImg.src = 'https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif?itemid=10561424';
+        setTimeout(pause,5000);
+    }
+
+    if ( rightSide > 0  ) {
+        leftSide = leftSide + 10;
+        catImg.style.left = `${leftSide}px`;
+
+    }
+    else {
+        catImg.style.left = '0px';
+        leftSide = 0;
+    }
+
+ }
+ mainInterval = setInterval(catWalk,50);
+
diff --git a/Week1/project/index.css b/Week1/project/index.css
diff --git a/Week1/project/index.html b/Week1/project/index.html
diff --git a/Week1/project/index.js b/Week1/project/index.js
diff --git a/Week1/project/project.css b/Week1/project/project.css
@@ -0,0 +1,63 @@
+body {
+    background-color: black;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+}
+ul {
+    list-style: none;
+    float: left;
+    display: inline-flex;
+}
+a {
+    text-decoration: none;
+}
+.container {
+    background-color: blanchedalmond;
+    text-align: center;
+    height: 400px;
+    width: 70%;
+    margin-top: 150px;
+    justify-content: center;
+    align-items: center;
+    padding-top: 5rem;
+
+
+}
+.infoContainer {
+    padding:10px;
+    padding-bottom: 2rem;
+}
+#author {
+    float:right;
+    margin-right:10px ;
+    padding-right:50px ;
+    margin-bottom: 50px;
+    width: 150px;
+}
+#quoteText {
+ padding: 5PX;
+ height: 80px;
+}
+#quoteImg {
+    float: left;
+}
+#nextBtn {
+    float: right;
+    right: 10px;
+    background-color: blanchedalmond;
+    border: 3px solid black;
+    color: black;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    font-size: 16px;
+    transition-duration: 0.4s;
+
+
+}
+#nextBtn:hover {
+    background-color: cornsilk; 
+    color: black;
+  }
diff --git a/Week1/project/project.html b/Week1/project/project.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://kit.fontawesome.com/dab7c098a7.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="project.css">
+    <title>Quotes</title>
+</head>
+<body>
+    <div class="container"> 
+        <div class="infoContainer">
+            <span id="quoteImg"><i class="fa fa-quote-left" style="font-size:36px"></i></span>
+            <h3 id="quoteText">Life isn’t about getting and having, it’s about giving and being.</h3>
+        </div>
+        <div class="infoContainer">
+            <p id="author">Kevin Kruse</p>
+        </div>
+        <div class="infoContainer">
+            <ul>
+                <li><a href=""><i class="fa fa-facebook-official" style="font-size:25px"></i></a></li>
+                <li><a href=""><i class="fa fa-tumblr-square" style="font-size:25px"></i></a></li>
+            </ul>
+            <button id="nextBtn">Next quote</button>
+        </div>
+    </div>
+    <script type="text/javascript" src="project.js"></script>
+
+</body>
+</html>
diff --git a/Week1/project/project.js b/Week1/project/project.js
@@ -0,0 +1,31 @@
+
+
+
+
+let btn = document.getElementById('nextBtn');
+btn.addEventListener('click' , fetchData);
+
+function fetchData () {
+
+       let item = Math.floor(Math.random() * Math.floor(quotes.length))
+       console.log(item);
+       const quoteContainer = document.getElementById('quoteText');
+       const authorContainer = document.getElementById('author');
+       quoteContainer.textContent = `${quotes[item].quote}` ;
+       authorContainer.textContent = `${quotes[item].author}`;    
+}
+const quotes = [
+       {
+             quote:"Whatever the mind of man can conceive and believe, it can achieve.", author:"Napoleon Hill"},
+       {
+             quote:"Strive not to be a success, but rather to be of value.", author:"Albert Einstein"},
+       {
+             quote:"Two roads diverged in a wood, and I—I took the one less traveled by, And that has made all the difference.",author:"Robert Frost"},
+       {
+             quote:"I attribute my success to this: I never gave or took any excuse.",author:"Florence Nightingale"},
+       {
+             quote:"You miss 100% of the shots you don’t take.",author:"Wayne Gretzky"},
+       {
+             quote:"I’ve missed more than 9000 shots in my career. I’ve lost almost 300 games. 26 times I’ve been trusted to take the game winning shot and missed. I’ve failed over and over and over again in my life. And that is why I succeed.",author:"Michael Jordan"},
+       ];
+
diff --git a/Week2/js-exercises/ex1-oddOnesOut.js b/Week2/js-exercises/ex1-oddOnesOut.js
@@ -8,13 +8,22 @@
 
  */
 function doubleEvenNumbers(numbers) {
-  const newNumbers = [];
-  for (let i = 0; i < numbers.length; i++) {
-    if (numbers[i] % 2 === 0) {
-      newNumbers.push(numbers[i] * 2);
-    }
-  }
-  return newNumbers;
+  // const newNumbers = [];
+  // for (let i = 0; i < numbers.length; i++) {
+  //   if (numbers[i] % 2 === 0) {
+  //     newNumbers.push(numbers[i] * 2);
+  //   }
+  // }
+  // return newNumbers;
+
+  const evenNums = numbers.filter(number => {
+    return number%2 ===0 ;
+  });
+  const doubleNums = evenNums.map(number => {
+    return number * 2 ;
+  });
+return doubleNums;
+
 }
 
 const myNumbers = [1, 2, 3, 4];