SocialHackerCreteClass · SalvadorCab · Feb 16, 2020 · Feb 16, 2020 · Feb 16, 2020 · Feb 16, 2020
diff --git a/Week1/homework/jsexercises/AboutMe/about_me.html b/Week1/homework/jsexercises/AboutMe/about_me.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>About Me</title>
+    <style>
+         .list-item{
+             color: red;
+         }
+    </style>
+  </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 src="about_me.js" charset="utf-8"></script>
+  </body>
+</html>
diff --git a/Week1/homework/jsexercises/AboutMe/about_me.js b/Week1/homework/jsexercises/AboutMe/about_me.js
@@ -0,0 +1,32 @@
+
+let changeStyles = function(){
+    let bodyEl = document.querySelector("body");
+    let firstSpanEl = document.querySelector("#nickname");
+    let secondSpanEl = document.querySelector("#fav-food");
+    let thirdSpanEl = document.querySelector("#hometown");
+    let liEls = document.querySelectorAll("li");
+
+    // Step 2
+    bodyEl.style.fontFamily = "Arial, sans-serif";
+
+    // Step 3
+    firstSpanEl.innerHTML = "El Barto";
+    secondSpanEl.innerHTML = "Lasagna";
+    thirdSpanEl.innerHTML = "Heraklion";
+
+    // step 4
+    for(let i=0; i<liEls.length; i++)
+        liEls[i].className = "list-item";
+
+    //step 6
+    let imgEl = document.createElement("img");
+    imgEl.src = "img/barto.png";
+
+    document.body.appendChild(imgEl);
+}
+
+function main(){
+    changeStyles();
+}
+
+main();
diff --git a/Week1/homework/jsexercises/AboutMe/img/barto.png b/Week1/homework/jsexercises/AboutMe/img/barto.png
diff --git a/Week1/homework/jsexercises/BookLists/BookLists.js b/Week1/homework/jsexercises/BookLists/BookLists.js
@@ -0,0 +1,52 @@
+// Array with all the books
+const books = [
+    {
+      title: 'The Design of Everyday Things',
+      author: 'Don Norman',
+      alreadyRead: false,
+      imageDir: 'img/book1.jpg',
+    },
+    {
+      title: 'The Most Human Human',
+      author: 'Brian Christian',
+      alreadyRead: true,
+      imageDir: 'img/book2.jpg',
+    },
+    {
+        title: 'The Lord of the Rings',
+        author: 'J. R. R. Tolkien',
+        alreadyRead: true,
+        imageDir: 'img/book3.jpg',
+      },
+  ];    
+
+let bookListCreator = function(listBooks){
+    for(let i=0; i<listBooks.length; i++){
+        let newPBookInfo = document.createElement("p");  // Creates new element p
+        let newBookInList = document.createElement("li");  // Creates new li
+        let bookCover = document.createElement("img");  // Creates new image for the book
+        let bookText = books[i].title + " by " + books[i].author  // Creates the text to display
+        newBookInList.className = "bookInList";   // Adds a CSS class to the element li
+        bookCover.src = listBooks[i].imageDir;        
+
+        //console.log(bookCover.src);
+
+        let textNote = document.createTextNode(bookText);  // Creates a textNode with the text of bookText
+        newPBookInfo.appendChild(textNote);   // Appends the text to the element p
+        newBookInList.appendChild(newPBookInfo);  // Appends the element p to the element li
+        newBookInList.appendChild(bookCover);  // Appends the book cover to the element li
+        document.querySelector(".booksList").appendChild(newBookInList);   // Appends li to ul
+
+        if(listBooks[i].alreadyRead === true)
+          newBookInList.style.color = "green";
+        else
+          newBookInList.style.color = "red";
+
+    }
+}
+
+function main(){
+    bookListCreator(books);
+}
+
+main();
diff --git a/Week1/homework/jsexercises/BookLists/BooksList.css b/Week1/homework/jsexercises/BookLists/BooksList.css
@@ -0,0 +1,63 @@
+* {
+padding: 0px;
+margin: 0px;
+box-sizing: border-box;
+}
+
+body div{
+    height: 100vh;
+    float: left;
+    display: flex;
+    flex-flow: column wrap;
+    align-items: center;
+    color: white;
+}
+
+h3 {
+    margin-top: 10px;
+    margin-bottom: 50px;
+}
+
+input {
+    width: 70%;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+img {
+    height: 100px;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 30px;
+    margin-bottom: 30px;
+}
+
+.leftSide {
+    width: 20%;
+    background: rgb(193, 207, 159);
+}
+
+.centerSide {
+    width: 60%;
+    background: rgb(166, 201, 147);
+}
+
+.rightSide {
+    width: 20%;
+    background: rgb(193, 207, 159);
+}
+
+.validador {
+    width: 30%;
+    margin-top: 10px;
+    margin-bottom: 30px;
+}
+
+.accessResult {
+    color: white;
+}
+
+.bookInList{
+    margin-bottom: 10px;
+}
diff --git a/Week1/homework/jsexercises/BookLists/BooksList.html b/Week1/homework/jsexercises/BookLists/BooksList.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Credit Card Validator</title>
+        <link rel="stylesheet" href="BooksList.css">
+    </head>
+    <body>
+        <!-- LEFT COLUMN-->
+        <div class="leftSide">&nbsp</div>
+
+        <!-- CENTER COLUMN-->
+        <div class="centerSide">
+            <h3>MY FAVORITE BOOKS</h3>
+            <ul class="booksList"></ul>
+        </div>
+
+        <!-- RIGHT COLUMN-->
+        <div class="rightSide">&nbsp</div>
+        <script src="BookLists.js" charset="utf-8"></script>
+    </body>
+</html>
diff --git a/Week1/homework/jsexercises/BookLists/img/book1.jpg b/Week1/homework/jsexercises/BookLists/img/book1.jpg
diff --git a/Week1/homework/jsexercises/BookLists/img/book2.jpg b/Week1/homework/jsexercises/BookLists/img/book2.jpg
diff --git a/Week1/homework/jsexercises/BookLists/img/book3.jpg b/Week1/homework/jsexercises/BookLists/img/book3.jpg
diff --git a/Week1/homework/jsexercises/CatWalk/catWalk.css b/Week1/homework/jsexercises/CatWalk/catWalk.css
@@ -0,0 +1,38 @@
+* {
+padding: 0px;
+margin: 0px;
+box-sizing: border-box;
+}
+
+body div {
+    height: 100vh;
+    float: left;
+    display: flex;
+    flex-flow: column wrap;
+    align-items: center;
+    color: white;
+}
+
+h1 {
+    margin-top: 50px;
+}
+
+p {
+    margin-top: 30px;
+    font-size: 600%;
+}
+
+.leftSide {
+    width: 20%;
+    background: rgb(44, 43, 43);
+}
+
+.centerSide {
+    width: 60%;
+    background: rgb(0, 0, 0);
+}
+
+.rightSide {
+    width: 20%;
+    background: rgb(44, 43, 43);
+}
diff --git a/Week1/homework/jsexercises/CatWalk/catWalk.html b/Week1/homework/jsexercises/CatWalk/catWalk.html
@@ -0,0 +1,12 @@
+<!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" />
+  </body>
+  <!--Step 1-->
+  <script src="catWalk.js" ></script>
+</html>
diff --git a/Week1/homework/jsexercises/CatWalk/catWalk.js b/Week1/homework/jsexercises/CatWalk/catWalk.js
@@ -0,0 +1,58 @@
+var startTime = new Date().getTime();
+var flag = true;
+var cycleCounter = 0;
+var cycleTime = 0;
+var newPosition = 0;
+// STEP 2
+var imgEl = document.querySelector("img");
+
+let initialConditions = function(imgEl){
+// STEP 3
+imgEl.style.left = "0px";
+imgEl.style.margin = 0;
+imgEl.style.padding = 0;
+};
+
+// STEP 4
+let catWalk = function(){
+    let currTime = new Date().getTime(); 
+
+    // STEP 7
+    if (newPosition >= (screen.width/2 - imgEl.width/2) && cycleCounter < 5){
+
+        if(flag === true){
+            imgEl.src = "https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif?itemid=10561424";
+            cycleTime = currTime;
+            flag = false;
+        }
+
+        cycleCounter = (currTime - cycleTime)/1000;
+        if(cycleCounter < 5){
+            newPosition = screen.width/2 - imgEl.width/2;
+        } else{
+            imgEl.src = "http://www.anniemation.com/clip_art/images/cat-walk.gif";
+            startTime += cycleCounter * 1000;
+        }
+
+    } else {
+        newPosition = ((currTime - startTime)/50) * 10;
+    }
+
+    // STEP 5
+    if (newPosition > (screen.width - imgEl.width)){
+        startTime =  currTime;
+        cycleCounter = 0;
+        flag = true;
+        newPosition = 0;
+    }
+
+    imgEl.style.left = newPosition + "px";
+    window.requestAnimationFrame(catWalk);
+};
+
+function main(){
+    initialConditions(imgEl);
+    catWalk();
+}
+
+main();
diff --git a/Week1/homework/jsexercises/LogoHijack/hijackGoogleLogo.html b/Week1/homework/jsexercises/LogoHijack/hijackGoogleLogo.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Time</title>
+  </head>
+  <body>
+    <h1>Current Time</h1>
+    <img alt="Google" id="hplogo" src="/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" 
+    srcset="/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png 1x, 
+    /images/branding/googlelogo/2x/googlelogo_color_272x92dp.png 2x" 
+    style="padding-top:109px" data-atf="1" width="272" height="92">
+    <script src="hijackGoogleLogo.js" charset="utf-8"></script>
+  </body>
+</html>
diff --git a/Week1/homework/jsexercises/LogoHijack/hijackGoogleLogo.js b/Week1/homework/jsexercises/LogoHijack/hijackGoogleLogo.js
@@ -0,0 +1,18 @@
+//<script src="https://github.com/SalvadorCab/SHA/hijackGoogleLogo.js"></script>
+
+// Step 1  
+let hijackGoogleLogo = function(){
+//Step 2
+let googleLogoEl = document.querySelector("#hplogo");
+
+googleLogoEl.src = "https://www.hackyourfuture.dk/static/logo-dark.svg";
+googleLogoEl.srcset = "https://www.hackyourfuture.dk/static/logo-dark.svg 1x";
+}
+
+document.addEventListener("click", hijackGoogleLogo);
+
+function main(){
+//    hijackGoogleLogo();
+}
+
+main();
diff --git a/Week1/homework/jsexercises/Project/img/quotMarkIcon.png b/Week1/homework/jsexercises/Project/img/quotMarkIcon.png
diff --git a/Week1/homework/jsexercises/Project/img/tIcon.png b/Week1/homework/jsexercises/Project/img/tIcon.png
diff --git a/Week1/homework/jsexercises/Project/img/twitterIcon.png b/Week1/homework/jsexercises/Project/img/twitterIcon.png