SocialHackersClass10 · ligopsychakis-michalis · Jan 30, 2020 · Jan 31, 2020 · Feb 4, 2020
diff --git a/.DS_Store b/.DS_Store
diff --git a/Week1/.DS_Store b/Week1/.DS_Store
diff --git a/Week1/homework/.DS_Store b/Week1/homework/.DS_Store
diff --git a/Week1/homework/issue-tracker/index.html b/Week1/homework/issue-tracker/index.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <!-- Required meta tags -->
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+        <!-- Bootstrap CSS -->
+        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+
+        <title>Issue Tracker</title>
+    </head>
+    <body>
+        <div class="container">
+            <h1>JS Issue Tracker <small class="text-secondary">by SocialHackersAcademy</small></h1>
+            <div class="jumbotron">
+                <h3>Add New Issue:</h3>
+                <div class="form-group">
+                    <label for="description">Description</label>
+                    <input type="text" class="form-control" id="description" placeholder="Describe the issue...">
+                </div>
+                <div class="form-group">
+                    <label for="severity">Severity</label>
+                    <select type="text" class="form-control" id="severity" placeholder="Describe the issue...">
+                        <option>Low</option>
+                        <option>Medium</option>
+                        <option>High</option>
+                    </select>    
+                </div>
+                <div class="form-group">
+                    <label for="assigned">Assigned To</label>
+                    <input type="text" class="form-control" id="assigned" placeholder="Enter responsible...">
+                </div>
+                <button class="btn btn-primary" id="add">Add</button>
+            </div>
+            <div id="assignment-cards"></div>
+            <p>&copy; Michalis Ligopsychakis</p>
+        </div>
+
+        <script src="issue-tracker.js"></script>
+        <script src="https://kit.fontawesome.com/a35f8701c8.js" crossorigin="anonymous"></script>
+        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
+    </body>
+</html>
diff --git a/Week1/homework/issue-tracker/issue-tracker.js b/Week1/homework/issue-tracker/issue-tracker.js
@@ -0,0 +1,50 @@
+let description = document.getElementById("description");
+let severity = document.getElementById("severity");
+let assignedTo = document.getElementById("assigned");
+let add = document.getElementById("add");
+let num = 0;  //use num to give different ids on every different issue card 
+
+
+//function that shows the issue via a card
+function assignmentCard(desc , sev , assign , num){
+    let cardsPlace = document.getElementById("assignment-cards");
+    let addCard = document.createElement("div");
+    addCard.className = "jumbotron"
+    addCard.id = "card" + num //change the id in order to every issue card has a different id
+
+    //HTML code for every new issue card
+    addCard.innerHTML = "<p>ID: " + (new Date()).getTime() + "</p>" +
+                        "<p><span id = 'status' class = 'bg-info text-white p-1 rounded' style = 'font-size:0.85em;'>Open</span></p>" +
+                        "<h2>" + desc.value + "</h2>" +
+                        "<p>" + "<span class = 'far fa-clock mr-2'> " + sev.value + "</span>" + 
+                        "<span class = 'far fa-user'> " + assign.value + "</p>" +
+                        "<button id = 'close' class = 'btn btn-warning mr-2'>Close</button>" +
+                        "<button id = 'del' class = 'btn btn-danger'>Delete</button>";
+    cardsPlace.appendChild(addCard);
+
+    //clear the inputs when click add button
+    desc.value = "";
+    sev.value = "Low";
+    assign.value = "";
+
+    //change open to close when close buttton onclick
+    let close = document.getElementById("close");
+    close.id = "close" + num; //change the id in order to every close button has a different id
+    let status = document.getElementById("status");
+    status.id = "status" + num;  //change the id in order to every status has a different id
+
+    function closeFunc(statusId){
+        let status = document.getElementById(statusId);
+        status.innerText = "Closed";  
+    }
+    close.addEventListener("click",function(){closeFunc(status.id)});
+
+    //delete the issue card when delete button onclick
+    let del = document.getElementById("del");
+    del.id = "del" + num;  //change the id in order to every delete button has a different id
+    del.addEventListener("click",function(){
+        addCard.remove(); 
+    })
+}
+
+add.addEventListener("click" , function(){assignmentCard(description , severity , assignedTo, num++)});
diff --git a/Week1/homework/js-exercises/.DS_Store b/Week1/homework/js-exercises/.DS_Store
diff --git a/Week1/homework/js-exercises/about-me.js b/Week1/homework/js-exercises/about-me.js
@@ -0,0 +1,24 @@
+const body = document.querySelector("body");
+
+//change the font-family
+body.style.fontFamily = "Arial, sans-serif";
+
+//replace the spans with my infos
+let spans = document.querySelectorAll("span");
+let infos = ["Mike","Pasta","Athens"];
+for (let i = 0; i < spans.length; i++){
+    spans[i].replaceWith(infos[i]);
+}
+
+//change className to li
+let lis = document.querySelectorAll("li");
+for (let i = 0; i < lis.length; i++){
+    lis[i].className = "list-item";
+}
+
+//append img of me
+const img = document.createElement("img");
+img.setAttribute("src","https://png.pngtree.com/png-clipart/20190516/original/pngtree-boy-with-sunglasses-cool-boy-white-shirt-black-sunglasses-png-image_3802214.jpg");
+img.style.width = "200px";
+body.appendChild(img);
+
diff --git a/Week1/homework/js-exercises/about_me.html b/Week1/homework/js-exercises/about_me.html
@@ -0,0 +1,21 @@
+<!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"></script>
+    </body>
+</html>
diff --git a/Week1/homework/js-exercises/books.js b/Week1/homework/js-exercises/books.js
@@ -0,0 +1,55 @@
+const books = [
+    {
+      title: 'The Design of Everyday Things',
+      author: 'Don Norman',
+      alreadyRead: false,
+    },
+    {
+      title: 'The Most Human Human',
+      author: 'Brian Christian',
+      alreadyRead: true,
+    },
+];
+
+const body = document.querySelector("body");
+
+//create the ul and append it to the site
+const ul = document.createElement("ul");
+body.appendChild(ul);
+
+for (let i = 0; i < 2; i++){      
+  const li = document.createElement("li");
+  ul.appendChild(li);
+}
+
+let lis = document.getElementsByTagName("li");
+
+//append to li book infos
+let x = 0;
+for (book of books){
+  const newPar = document.createElement("p")
+  newPar.innerText = book.title + " by " + book.author;
+  lis[x].appendChild(newPar);
+  x++; 
+}
+
+//append to li book imgs
+imgs = ["https://images-na.ssl-images-amazon.com/images/I/410RTQezHYL._SX326_BO1,204,203,200_.jpg","https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1295465264l/8884400.jpg"];
+
+for (let i = 0; i < 2; i++){
+  let img = document.createElement("img");
+  img.setAttribute("src",imgs[i]);
+  lis[i].appendChild(img);
+  img.style.height = "200px";
+}
+
+//add color depends of alreadyRead
+let y = 0;
+for (book of books){
+  if (book.alreadyRead == false){
+    lis[y].style.backgroundColor = "red";
+    y++;
+  }else{
+    lis[y].style.backgroundColor = "green";
+  }
+}
diff --git a/Week1/homework/js-exercises/cat-walk.html b/Week1/homework/js-exercises/cat-walk.html
@@ -0,0 +1,44 @@
+<!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>
+        let img = document.querySelector("img");
+        let move = 0;
+        img.style.left = "0%";
+
+        //cat dance in the middle
+        function dance(){
+            clearInterval(catMoves);
+            setTimeout(theRest,5000);
+        }
+
+        //continue to walk after the dance
+        function theRest(){
+            img.src = "http://www.anniemation.com/clip_art/images/cat-walk.gif";
+            catMoves = setInterval(catWalk,50);
+        }
+
+        //basic move of cat
+        function catWalk(){
+            move += 0.5;
+            img.style.left = move + "%";
+            if (img.style.left == "40%"){
+                img.src = "https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif?itemid=10561424";
+                dance();
+            }
+            if (img.style.left == "100%"){
+                img.style.left = "0%";
+                move = 0;
+            }
+        }
+
+        let catMoves = setInterval(catWalk,50); 
+    </script> 
+
+</html>
diff --git a/Week1/homework/js-exercises/hijackGoogleLogo.js b/Week1/homework/js-exercises/hijackGoogleLogo.js
@@ -0,0 +1,5 @@
+//replace the Google Logo 
+function hijackGoogleLogo(){
+    const google = document.getElementById("hplogo");
+    google.src = "https://www.hackyourfuture.dk/static/logo-dark.svg";
+}
diff --git a/Week1/homework/js-exercises/showCurrentTime.js b/Week1/homework/js-exercises/showCurrentTime.js
@@ -0,0 +1,23 @@
+//append a paragraph element 
+const body = document.querySelector("body");
+let para = document.createElement("p");
+body.appendChild(para);
+
+//change the style
+para.style.marginLeft = "auto";
+para.style.marginRight = "auto";
+para.style.marginTop = "15%"; 
+para.style.textAlign = "center";
+para.style.fontSize = "8em";
+para.style.fontFamily = "sans-serif";
+para.style.color = "white";
+body.style.backgroundColor = "#60646e";
+
+//run the time
+function timeTeller(){
+    today = new Date();
+    let time = today.getHours() + " : " + today.getMinutes() + " : " + today.getSeconds();
+    para.innerText = time;
+}    
+
+let changeTime = setInterval(timeTeller,1000);
diff --git a/Week1/homework/js-exercises/time.html b/Week1/homework/js-exercises/time.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Time</title>
+    </head>
+    <body>    
+        <script src="showCurrentTime.js"></script>
+    </body>
+</html>
diff --git a/Week1/homework/random-quote/index.html b/Week1/homework/random-quote/index.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+        <title>Random Quote!!!</title>
+
+        <link rel="stylesheet" href="quote.css" type="text/css"/>
+    </head>
+    <body>
+        <div class="all">
+            <div class="block main-block">
+                <p><i class="fas fa-quote-left"></i> Random quote... Click the button to get wiser!</p>
+                <p class="small">- Michalis Ligopsychakis</p>
+                <div class="block info-block">
+                    <i class="fab fa-twitter-square"></i>
+                    <i class="fab fa-tumblr-square"></i>
+                    <button id="btn">New quote</button>
+                </div>
+            </div>    
+        </div>
+        <div class="block down-block"></div>
+        <script src="random-quote.js"></script>
+        <script src="https://kit.fontawesome.com/a35f8701c8.js" crossorigin="anonymous"></script>    
+    </body>
+</html>