HackYourFuture · HT88 · Dec 3, 2020 · Dec 3, 2020
diff --git a/Week1/js-exercises/ex1-bookList.html b/Week1/js-exercises/ex1-bookList.html
@@ -5,13 +5,15 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Book List</title>
+
 </head>
 
 <body>
   <h1> My Book List</h1>
   <div id="bookList">
     <!-- put the ul element here -->
   </div>
+  <script src = 'ex1-bookList.js'> </script>
 </body>
 
 </html>
diff --git a/Week1/js-exercises/ex1-bookList.js b/Week1/js-exercises/ex1-bookList.js
@@ -5,8 +5,7 @@
   I 'd like to display my three favorite books inside a nice webpage!
 
   1. Iterate through the array of books.
-  2. For each book, create a `<p>`
-  element with the book title and author and append it to the page.
+  2. For each book, create a `<p>` element with the book title and author and append it to the page.
   3. Use a `<ul>`  and `<li>` to display the books.
   4. Add an `<img>` to each book that links to a URL of the book cover.
   5. Change the style of the book depending on whether you have read it(green) or not(red).
@@ -17,26 +16,59 @@
   */
 
 function createBookList(books) {
-  // your code goes in here, return the ul element
+
+  var ul = document.createElement("ul");  
+
+  for (var i = 0; i < books.length; i++) {
+      var myBook = books[i];
+
+      const para = document.createElement("p");                                                             
+      const paraInfo = document.createTextNode(myBook.title + " " + myBook.author);                               
+      para.appendChild(paraInfo);
+
+      if (myBook.alreadyRead === false) { para.style.backgroundColor = "red";  
+
+      } else {    
+          para.style.backgroundColor = "green";  }                                                                                                  
+      var li = document.createElement('li');
+      li.appendChild(para);
+      ul.appendChild(li);
+
+      const coverImage = document.createElement("img");
+      coverImage.src = myBook.bookCover
+      coverImage.style.maxHeight = '300px'
+      li.appendChild(coverImage);
+  } 
+
+  return ul
+
+
 }
 
 const books = [{
     title: 'The Design of Everyday Things',
     author: 'Don Norman',
-    alreadyRead: false
+    alreadyRead: false,
+    bookCover: 'https://assets.wired.com/photos/w_1001/wp-content/uploads/2015/09/design-of-everyday-things.jpg'
   },
   {
     title: 'The Most Human Human',
     author: 'Brian Christian',
-    alreadyRead: true
+    alreadyRead: true,
+    bookCover: 'https://th.bing.com/th/id/OIP.Bwdfwq825Plrhn6iHAH1ggHaLZ?pid=Api&rs=1'
+
   },
   {
     title: 'The Pragmatic Programmer',
     author: 'Andrew Hunt',
-    alreadyRead: true
+    alreadyRead: true,
+    bookCover: 'http://www.informit.com/ShowCover.aspx?isbn=0135957052'
+
   }
 ];
 
 let ulElement = createBookList(books);
 
-document.querySelector("#bookList").appendChild(ulElement);
+document.querySelector("#bookList").appendChild(ulElement);
+
+//https://www.w3schools.com/jsref/met_node_appendchild.asp 
diff --git a/Week1/js-exercises/ex2-aboutMe.html b/Week1/js-exercises/ex2-aboutMe.html
@@ -19,6 +19,7 @@ <h1>About Me</h1>
   </ul>
 
   <!-- 1. add a script tag here the links to ex2-aboutMe.js -->
+  <script src = 'ex2-aboutMe.js'> </script>
 </body>
 
 </html>
diff --git a/Week1/js-exercises/ex2-aboutMe.js b/Week1/js-exercises/ex2-aboutMe.js
@@ -1,11 +1,40 @@
-/**
+let fontStyle = document.body.style.font = "Arial, sans-serif"; 
+
+let myName = document.getElementById('nickname').innerHTML = 'Han';
+let myFood = document.getElementById('fav-food').innerHTML = 'Gyudon';
+let myTown = document.getElementById('hometown').innerHTML = 'Neverhood';
+
+// const myList = document.querySelectorAll("ul > li");
+// for (let i = 0; i < myList.length; i++) {
+//     let li = myList[i];
+//     li.classList.add("list-item");
+// }
+
+for (i = 1; i <= 3; i++) {
+    console.log(document.querySelector(`li:nth-child(${i})`));
+    document.querySelector(`li:nth-child(${i}`).classList.add("list-item");
+}
+
+/* Credit goes to Yahs for list-item*/
+
+var url = 'https://smashedcompass.files.wordpress.com/2016/06/silly-walk.jpg';
 
- ** Exercise 2: About me **
-
- 1. See HTML
- 2. Change the body tag 's style so it has a font-family of "Arial, sans-serif".
- 3. Replace each of the spans(nickname, fav - food, hometown) with your own information.
- 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.
- */
+var image = new Image();
+image.src = url;
+image.style.maxHeight = '300px'
+document.body.appendChild(image);
+
+
+
+/**
+** Exercise 2: About me **
+
+ + See HTML
+ + Change the body tag 's style so it has a font-family of "Arial, sans-serif".
+ + Replace each of the spans(nickname, fav - food, hometown) with your own information.
+ + Iterate through each li and change the class to "list-item".
+ + See HTML
+ 6. Create a new img element and set its src attribute to a picture of you. Append that element to the page.
+ */
+
+
diff --git a/Week1/js-exercises/ex3-hijackLogo.js b/Week1/js-exercises/ex3-hijackLogo.js
@@ -2,7 +2,7 @@
 
  ** Exercise 3: The logo hijack **
 
- No homepage is safe from the logo bandit!Everytime he sees a Google Logo he replaces it with a logo from HackYourfuture instead: https: //www.hackyourfuture.dk/static/logo-dark.svg.
+ No homepage is safe from the logo bandit!Everytime he sees a Google Logo he replaces it with a logo from 
 
  In this exercise you 're expected to write a JavaScript function that can be executed in the console of the [Google website](https://www.google.com).
 
@@ -13,7 +13,19 @@
  */
 
 function hijackGoogleLogo() {
-  // your code goes in here
+
+let parent = document.getElementById('lga');
+
+let gImage = document.getElementById("hplogo");
+gImage.style.display = 'none';
+
+parent.style.backgroundImage = "url('https://www.hackyourfuture.dk/static/logo-dark.svg')";
+parent.style.backgroundRepeat = 'no-repeat';
+parent.style.backgroundPosition = 'center';
+
 }
 
-hijackGoogleLogo();
+hijackGoogleLogo();
+
+
+
diff --git a/Week1/js-exercises/ex4-whatsTheTime.html b/Week1/js-exercises/ex4-whatsTheTime.html
@@ -1,4 +1,13 @@
-<!--
-  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>What's the time!</title>
+</head>
+<body>
+
+
+  <script src='ex4-whatsTheTime.js'></script>
+</body>
+</html>
diff --git a/Week1/js-exercises/ex4-whatsTheTime.js b/Week1/js-exercises/ex4-whatsTheTime.js
@@ -12,7 +12,9 @@
  */
 
 function displayCurrentTime() {
-  // your code goes in here
+  const currentTime = new Date();
+  const n = currentTime.toLocaleTimeString();
+  document.body.innerHTML = '<h1>'+ n + '</h1>';
 }
 
 setInterval(displayCurrentTime, 1000);
diff --git a/Week1/js-exercises/ex5-catWalk.js b/Week1/js-exercises/ex5-catWalk.js
@@ -1,3 +1,40 @@
+//**shamleslsy copied from Yash */
+
+
+const img = document.querySelector('img');
+const dancingCat = 'https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif?itemid=10561424'
+const originalImgSrc = img.src;
+const originalImgWidth = img.width;
+
+fucntion setCatPositionToStart() {
+    Image.style.left = '0px';
+}
+
+setCatPositionToStart ();
+
+fucntion catWalk() {
+    const.currentPosition = parseFloat(img.style.left);
+    img.style.left = (currentPosition + 10).toString().concat('px');
+
+    const.middlePosition = (window.innerWidth - originalImgSrc) / 2;
+
+    if (currentPosition >= middlePosition - 10 && currentPosition <= middlePosition) {
+       clearInterval(internval);
+       img.src = dancingCat;
+       setTimeout(fucntion() {
+        img.src = originalImgSrc;
+        img.style.left = (currentPosition + 20).toString().concat('px');
+        internval = setInterval(catWalk, 50);
+    }, 5000);
+
+    if (position > window.innerWidth) {
+        setCatPositionToStart();
+    }
+}
+
+let internval = setInterval(catWalk, 50);
+
+
 /**
 
  ** Exercise 5: The cat walk **

diff --git a/Week1/project/img_1.png b/Week1/project/img_1.png
diff --git a/Week1/project/index.css b/Week1/project/index.css
@@ -0,0 +1,41 @@
+* {
+    margin: 0;
+    padding:0;
+}
+
+body {
+background-color: orange;
+margin: auto;
+}
+
+h1 {
+margin-bottom: 100px;    
+}
+
+.container {
+    display: block;
+    background-color: whitesmoke;
+    width: 900px;
+    align: center;
+    margin:0px auto;
+    margin-top: 200px;
+    padding: 100px;
+
+}
+
+button {
+    margin-top: 100px;
+    background-color: orange;
+    border: none;
+    color: white;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    font-size: 16px;
+
+}
+
+#displayQuote {
+    color: orange;
+    font-size: 20px;
+}
diff --git a/Week1/project/index.html b/Week1/project/index.html
@@ -1 +1,27 @@
-<!-- Your code goes in here -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="index.css">
+    <title>The quote of the day</title>
+</head>
+<body>
+
+<div class="container">
+
+    <div class="child">
+
+
+    <h1><img src="image_1.png" width="50px"></h1>
+
+        <div id="displayQuote"> </div>
+        <button onclick="nextQuote()">Next Quote</button>
+
+
+    </div>
+</div>
+
+<script src="index.js"></script>    
+</body>
+</html>
diff --git a/Week1/project/index.js b/Week1/project/index.js
@@ -1 +1,18 @@
-// your code goes in here
+const theQuotes =[
+'Ever tried. Ever failed. No matter. Try Again. Fail again. Fail better. -- S. Beckett',
+'Is that a gun in your pocket, or are you just happy to see me? -- Mae WEST',
+'Carpe diem. Seize the day, boys. Make your lives extraordinary. -- Dead Poets Society, 1989',
+'Houston, we have a problem. -- Apollo 13, 1995',
+'You can not handle the truth! -- A Few Good Men, 1992',
+'Hasta la vista, baby. -- the Terminator 2: Judgment Day, 1991',
+]
+
+
+
+function nextQuote() {
+    const randomNumber = Math.floor(Math.random() * (theQuotes.length));
+    document.getElementById('displayQuote').innerHTML = theQuotes[randomNumber];
+}
+
+// https://www.freecodecamp.org/news/creating-a-bare-bones-quote-generator-with-javascript-and-html-for-absolute-beginners-5264e1725f08/
+
-Original file line number
+Diff line change
@@ Expand Up / @@ -19,6 +19,7 @@ <h1>About Me</h1> @@
       </ul>
       <!-- 1. add a script tag here the links to ex2-aboutMe.js -->
+      <script src = 'ex2-aboutMe.js'> </script>
     </body>
     </html>