HackYourFuture · nlmohdnl · Feb 21, 2020 · Feb 21, 2020 · Feb 28, 2020 · Feb 28, 2020
diff --git a/Week1/homework/app.js b/Week1/homework/app.js
diff --git a/Week1/homework/index.html b/Week1/homework/index.html
diff --git a/Week1/homework/js-exercises/0.jpg b/Week1/homework/js-exercises/0.jpg
diff --git a/Week1/homework/js-exercises/1.jpg b/Week1/homework/js-exercises/1.jpg
diff --git a/Week1/homework/js-exercises/2.jpg b/Week1/homework/js-exercises/2.jpg
diff --git a/Week1/homework/js-exercises/about_me.html b/Week1/homework/js-exercises/about_me.html
@@ -0,0 +1,45 @@
+<!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.getElementById("nickname").innerText=" Abo Taim";
+        document.getElementById("fav-food").innerText=" Chips";
+        document.getElementById("hometown").innerText=" Damascus";
+
+
+
+
+let listItems = document.querySelector('ul').children;
+for (let i=0; i<listItems.length; i++){
+    listItems[i].setAttribute("class", "list-item");
+}
+
+
+const head = document.querySelector('head');
+let style = document.createElement('style');
+style.innerHTML = ".list-item {color: red;}";
+head.appendChild(style);
+
+let image =document.createElement('img');
+image.src="me.png"
+image.style.width="10%"
+image.style.margin="2%"
+document.querySelector("body").appendChild(image);
+
+
+
+    </script>
+  </body>
+</html>
diff --git a/Week1/homework/js-exercises/hijackGoogleLogo.js b/Week1/homework/js-exercises/hijackGoogleLogo.js
@@ -0,0 +1,6 @@
+function hijackGoogleLogo() { 
+    const googleLogo = document.getElementById('hplogo');
+    googleLogo.src = 'https://www.hackyourfuture.dk/static/logo-dark.svg';
+    googleLogo.srcset = 'https://www.hackyourfuture.dk/static/logo-dark.svg';
+};
+hijackGoogleLogo();
diff --git a/Week1/homework/js-exercises/me.png b/Week1/homework/js-exercises/me.png
diff --git a/Week1/homework/js-exercises/randomQuoteGenerator.html b/Week1/homework/js-exercises/randomQuoteGenerator.html
@@ -0,0 +1,170 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <link rel="stylesheet" href="style.css">
+  <title>Random Quote Generator</title>
+  <style>
+
+
+    *{
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+        font-family : Helvetica, sans-serif, serif;
+      }
+
+      body {
+        background-color: #fba62f;
+        height: 100vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+      }
+      .main-box{
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        background-color: #fff;
+        height: 50vh;
+      }
+      .main-box h1 span{
+        font-size: 36px;
+      }
+      .color{
+        color: #fba62f;
+      }
+      .main-box h1
+      {
+        font-size: 48px;
+        text-align: center;
+        margin: 40px 20px 0 20px;
+      }
+      h3 {
+        font-size: 1.5vw;
+        align-self: flex-end;
+        margin: 20px 40px 20px 20px;
+
+      }
+      main {
+        width: 60vw;
+        display: flex;
+        flex-direction: column;
+      }
+      button {
+        background-color: #fba62f;
+        height: 40px;
+        width: 130px;
+        color: #fff;
+        font-weight: bold;
+        padding: 10px;
+        border: none;
+        font-size: 12px;
+      }
+
+
+      .bottom{
+        margin: 20px 40px;
+        display: flex;
+        justify-content: space-between;
+      }
+      .fab{
+        margin-left: 20px;
+        color: #fff;
+        background-color: #fba62f;
+      }
+      .fa-tumblr{
+        width: 30px;
+      }
+      .fa-tumblr,
+      .fa-twitter{
+        padding: 5px;
+      }
+      .sec-rect{
+        background-color: #fff;
+        width: 30 vw;
+        height: 50px;
+        margin: 6px auto;
+      } 
+    </style>
+
+</head>
+<body>
+  <main>
+    <div class="main-box">
+        <h1 class="quotes color"><i class="fas fa-quote-left"></i>
+            <span id="quote"> Quotes are here!</span>
+        </h1>
+        <h3 class="color">
+            <span id="author">Author is here!</span></h3>
+      <div class="bottom">
+        <div class="icons left">
+          <a href=""><i class="fab fa-twitter color fa-2x"></i></a>
+          <a href=""><i class="fab fa-tumblr color fa-2x"></i></a>
+        </div>
+        <button>New Quote</button>
+      </div>
+    </div>
+
+    <div class="sec-rect"></div>
+
+  </main>
+  <script>
+    'use strict';
+
+    const quotes = [
+        {
+          quote:"Knowing yourself is the beginning of all wisdom.",
+          author:"Aristotle"
+        },
+        {
+          quote:"The only true wisdom is in knowing you know nothing.",
+          author: "Socrates"
+        },
+        {
+          quote:"Count your age by friends, not years. Count your life by smiles, not tears.",
+          author:"John Lennon"
+        },
+        {
+          quote:"The saddest aspect of life right now is that science gathers knowledge faster than society gathers wisdom.",
+          author: "Isaac Asimov"
+        },
+        {
+          quote:"May you live every day of your life.",
+          author: " Jonathan Swift"
+        },
+        {
+          quote:"The secret of life, though, is to fall seven times and to get up eight times.",
+          author:"Paulo Coelho"
+        }
+    ]
+
+    const quoteHold = document.querySelector('#quote');
+    const authorHold = document.querySelector('#author');
+    const button = document.querySelector('button');
+
+
+    button.addEventListener('click', randomQuote);
+
+    function randomQuote() {
+      const random = Math.floor(Math.random() * quotes.length)
+      quoteHold.innerText = quotes[random].quote;
+      authorHold.innerText = quotes[random].author;
+    }
+    </script>
+
+</body>
+</html>
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/Week1/homework/js-exercises/showCurrentTime.js b/Week1/homework/js-exercises/showCurrentTime.js
@@ -0,0 +1,25 @@
+
+window.onload = setInterval(startTime, 1000 );
+
+
+const body = document.querySelector('body');
+let currentTime = document.createElement('h1');
+currentTime.style = "width: 20%; margin: auto; display: block; text-align: center;"
+body.appendChild(currentTime);
+
+function startTime(){ 
+
+    let today = new Date();
+    let h = today.getHours();
+    let m = correctTime(today.getMinutes()); 
+    let s = correctTime(today.getSeconds()); 
+    currentTime.innerHTML = h + ":" + m + ":" + s; 
+}
+
+
+function correctTime(i) {
+    if (i < 10) {
+        i = "0" + i
+    }
+    return i;
+  }
diff --git a/Week1/homework/js-exercises/theBookList.html b/Week1/homework/js-exercises/theBookList.html
@@ -0,0 +1,76 @@
+<html>
+    <head>
+        <meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>the book list</title>
+    </head>
+
+<body> 
+
+    <script>
+
+    const books = [
+        {
+          title: 'The Design of Everyday Things',
+          author: 'Don Norman',
+          alreadyRead: false
+        },
+        {
+          title: 'The Most Human Human',
+          author: 'Brian Christian',
+          alreadyRead: true
+        },
+        {
+          title: 'The Pragmatic Programmer',
+          author: 'Andrew Hunt',
+          alreadyRead: true
+        }
+      ];
+
+      // creat h1
+      const head=document.createElement("h1");
+      head.innerText="The Book List";
+      const body=document.querySelector("body");
+      body.appendChild(head);
+      body.style.cssText="color:purple";
+
+ // creat ul
+        const uList = document.createElement('ul')
+        document.body.appendChild(uList);
+        uList.style.listStyle = 'none'
+        uList.style.display = 'flex'
+        uList.style.justifyContent = 'space-around';
+
+        const imgBooks = ['0.jpg', '1.jpg', '2.jpg']; 
+
+        for (let i = 0; i < books.length; ++i) {
+            const parag = document.createElement('p');
+            const image = document.createElement('img');
+            const list = document.createElement('li');
+
+           uList.appendChild(list);
+           list.appendChild(parag);
+           list.appendChild(image);
+
+            parag.innerHTML = books[i].title + ' wirtten by' + books[i].author;
+            image.src = imgBooks[i];
+
+
+            if (books[i].alreadyRead) {
+                list.style.backgroundColor = 'green'
+            } else {
+                list.style.backgroundColor = 'red'
+            }
+
+            image.style.width = '80%';
+            list.style.width = '25%';
+
+        }
+
+        document.querySelector('body').style.textAlign = 'center';
+        document.querySelector('body').style.fontSize = '1.4rem';
+    </script>
+
+</body>
+
+</html> 
diff --git a/Week1/homework/js-exercises/theCatWalk.html b/Week1/homework/js-exercises/theCatWalk.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Cat Walk</title>
+  </head>
+  <body>
+    <img id = cat style="position:absolute;" src="http://www.anniemation.com/clip_art/images/cat-walk.gif" />
+    <script>
+
+        let img = document.querySelector('img');
+        img.style.left = 0;
+
+        function catWalk() {
+            let pos = parseFloat(img.style.left);
+            const secondImageWidth = 360;
+            const midPoint = (window.innerWidth - secondImageWidth) / 2;
+            if (pos > window.innerWidth - img.width) {
+            img.style.left = 0;
+            }
+            if (pos < midPoint - 2 || pos > midPoint + 2) {
+
+            img.style.left = parseFloat(img.style.left) + 2 + 'px';
+            } else {
+
+                if (!img.src.includes('https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif?itemid=10561424')) {
+                    img.src = 'https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif?itemid=10561424';
+                    setTimeout(function() {
+                        img.style.left = parseFloat(img.style.left) + 2 + 'px';
+                        img.src = 'http://www.anniemation.com/clip_art/images/cat-walk.gif';
+                    }, 5000);
+                }
+            }
+        requestAnimationFrame(catWalk);
+        }
+
+      catWalk();
+    </script>
+  </body>
+</html>