SocialHackersClass10 · Stef-Lev · Feb 3, 2020 · Feb 3, 2020 · Feb 4, 2020 · Feb 4, 2020
diff --git a/Week1/Homework/codeAlong/issue-tracker/index.html b/Week1/Homework/codeAlong/issue-tracker/index.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
+        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://kit.fontawesome.com/b039c65688.js" crossorigin="anonymous"></script>
+
+    <title>JS Issue Tracker</title>
+</head>
+
+<body onload="fetchIssues()">
+    <div class="container">
+        <h1>Javascript Issue Tracker <small> by Stefanos Leventis</small></h1>
+        <div class="jumbotron">
+            <h3>Add a new issue:</h3>
+            <form id="issueInputForm">
+                <div class="form-group">
+                    <label for="issueDescInput">Description</label>
+                    <input type="text" class="form-control" id="issueDescInput" placeholder="Describe the issue">
+                </div>
+                <div class="form-group">
+                    <label for="issueSeverityInput">Severity</label>
+                    <select id="issueSeverityInput" class="form-control">
+                        <option value="Low">Low</option>
+                        <option value="Low">Medium</option>
+                        <option value="Low">High</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label for="issueAssignedToInput">Assigned To</label>
+                    <input type="text" class="form-control" id="issueAssignedToInput" placeholder="Enter responsible">
+                </div>
+                <button type="submit" class="btn btn-primary">Add</button>
+
+            </form>
+        </div>
+        <div class="col-lg-12">
+            <div id="issuesList"></div>
+        </div>
+        <div class="footer">
+            <p>For other projects visit www.stefanosleventis.com</p>
+        </div>
+    </div>
+
+
+    <script src="https://chancejs.com/chance.min.js"></script>
+    <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>
+    <script src="script.js"></script>
+
+</body>
+
+</html>
diff --git a/Week1/Homework/codeAlong/issue-tracker/script.js b/Week1/Homework/codeAlong/issue-tracker/script.js
@@ -0,0 +1,89 @@
+"use strict"
+document.getElementById('issueInputForm').addEventListener("submit", saveIssue);
+
+function saveIssue(e) {
+    let issueDesc = document.querySelector("#issueDescInput").value;
+    let issueSeverity = document.querySelector("#issueSeverityInput").value;
+    let issueAssignedTo = document.querySelector("#issueAssignedToInput").value;
+    let issueId = chance.guid();
+    let issueStatus = "Open";
+
+    let issue = {
+        id: issueId,
+        description: issueDesc,
+        severity: issueSeverity,
+        assignedTo: issueAssignedTo,
+        status: issueStatus
+    }
+
+    if (localStorage.getItem("issues") == null) {
+        let issues = [];
+        issues.push(issue);
+        localStorage.setItem("issues", JSON.stringify(issues));
+    } else {
+        let issues = JSON.parse(localStorage.getItem("issues"));
+        issues.push(issue);
+        localStorage.setItem("issues", JSON.stringify(issues));
+    }
+
+    document.querySelector("#issueInputForm").reset();
+
+    fetchIssues();
+
+    e.preventDefault();
+}
+
+function setStatusClosed(id) {
+    let issues = JSON.parse(localStorage.getItem("issues"));
+
+    for (let i = 0; i < issues.length; i++) {
+        if (issues[i].id == id) {
+            issues[i].status = "Closed";
+        }
+    }
+
+    localStorage.setItem("issues", JSON.stringify(issues));
+
+    fetchIssues();
+
+}
+
+function deleteIssue(id) {
+    let issues = JSON.parse(localStorage.getItem("issues"));
+
+    for (let i = 0; i < issues.length; i++) {
+        if (issues[i].id == id) {
+            issues.splice(i, 1);
+        }
+    }
+
+    localStorage.setItem("issues", JSON.stringify(issues));
+
+    fetchIssues();
+
+}
+
+function fetchIssues() {
+    let issues = JSON.parse(localStorage.getItem("issues"));
+    let issuesList = document.querySelector("#issuesList");
+
+    issuesList.innerHTML = "";
+    for (let i = 0; i < issues.length; i++) {
+        let id = issues[i].id;
+        let desc = issues[i].description;
+        let severity = issues[i].severity;
+        let assignedTo = issues[i].assignedTo;
+        let status = issues[i].status;
+
+
+        //Check the glyphicon icon | Stopped coding at 35:00
+        issuesList.innerHTML += '<div class="well">' +
+            '<h6>Issue ID: ' + id + '</h6>' + '<p><span class="badge badge-info p-2">' + status + '</span></p>' + '<h3>' + desc + '</h3>' + '<p><i class="far fa-clock mr-2"></i>' + severity + '</p>' +
+            '<p><i class="fas fa-user mr-2"></i>' + assignedTo + '</p>' +
+            '<a href="#" onclick="setStatusClosed(\'' + id + '\')" class="btn btn-warning">Close</a>' +
+            '<a href="#" onclick="deleteIssue(\'' + id + '\')" class="btn btn-danger">Delete</a>' + '</div>' + '<hr>';
+
+
+    }
+
+}
diff --git a/Week1/Homework/codeAlong/issue-tracker/style.css b/Week1/Homework/codeAlong/issue-tracker/style.css
@@ -0,0 +1,23 @@
+@import url('https://fonts.googleapis.com/css?family=Exo+2&display=swap');
+*{
+    margin: 0;
+    padding: 0;
+}
+body {
+    background-color: rgb(255, 255, 255);
+    font-family: 'Exo 2', sans-serif;
+}
+.jumbotron {
+    background-color: rgb(236, 168, 136)!important;
+}
+div.well {
+    margin: 20px 0 20px 0;
+    background-color: rgb(243, 225, 219);
+    border:1px solid rgb(170, 166, 164);
+    border-radius: 10px;
+    padding: 20px;
+
+}
+a.btn.btn-warning, a.btn.btn-danger {
+    margin: 5px 12px 5px 0px;
+}
diff --git a/Week1/Homework/js-exercises/aboutMe/aboutMe.js b/Week1/Homework/js-exercises/aboutMe/aboutMe.js
@@ -0,0 +1,15 @@
+//Changing Font
+document.body.style.fontFamily = "Arial,sans-serif";
+//Adding personal info
+document.querySelector("#nickname").innerHTML = "Stef";
+document.querySelector("#fav-food").innerHTML = "Pastitsio";
+document.querySelector("#hometown").innerHTML = "New Philadelphia";
+//Adding class in each li inside the ul
+let listItem = document.getElementsByTagName("li");
+for (let i = 0; i < listItem.length; i++) {
+    listItem[i].className = "list-item"
+}
+//Adding Photo
+let myPhoto = document.createElement("img");
+myPhoto.src = "https://media-exp1.licdn.com/dms/image/C5603AQH-4xn8lqwm_A/profile-displayphoto-shrink_200_200/0?e=1586390400&v=beta&t=cdHKfe_B5JDWPC76dV4BqGO1uUhKCzQk6ISv99lTYcY";
+document.body.appendChild(myPhoto);
diff --git a/Week1/Homework/js-exercises/aboutMe/about_me.html b/Week1/Homework/js-exercises/aboutMe/about_me.html
@@ -0,0 +1,25 @@
+<!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="aboutMe.js"></script>
+</body>
+
+</html>
diff --git a/Week1/Homework/js-exercises/bookList/bookList.html b/Week1/Homework/js-exercises/bookList/bookList.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title></title>
+
+</head>
+
+<body>
+
+    <script src="bookList.js"></script>
+</body>
+
+</html>
diff --git a/Week1/Homework/js-exercises/bookList/bookList.js b/Week1/Homework/js-exercises/bookList/bookList.js
@@ -0,0 +1,54 @@
+"use strict"
+//Variable that holds the list of books
+const books = [{
+        title: 'How to Win Friends and Influence People',
+        author: 'Dale Carnegie',
+        alreadyRead: true,
+        cover: "https://images-na.ssl-images-amazon.com/images/I/51NVtjOrnqL.jpg",
+    },
+    {
+        title: 'The 7 Habits of Highly Effective People',
+        author: 'Stephen Covey',
+        alreadyRead: true,
+        cover: "https://images-na.ssl-images-amazon.com/images/I/51hV5vGr4AL.jpg",
+    },
+    {
+        title: 'How to stop worrying and start living',
+        author: 'Dale Carnegie',
+        alreadyRead: false,
+        cover: "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRmQ0AywM8bzvN1c0Ag7UG8WGwgn5lO8FUrp8lO896OpgH2ZqfO"
+    }
+];
+
+//Array iteration that creates a paragraph for each book
+books.forEach(function(element) {
+        let paragraph = document.createElement("p")
+        paragraph.innerHTML = `${element.title} by ${element.author}`;
+        document.body.appendChild(paragraph);
+    })
+    //Creating an unordered list of the books
+let list = document.createElement("ul");
+document.body.appendChild(list)
+books.forEach(function(element) {
+    let listItem = document.createElement("li");
+    listItem.innerHTML = element.title;
+    list.appendChild(listItem);
+    //Green style for the books I have read, red style for those I haven't read
+    if (element.alreadyRead === true) {
+        listItem.style.backgroundColor = "green"
+    } else {
+        listItem.style.backgroundColor = "red"
+    }
+})
+
+
+books.forEach(function(element) {
+        //Creating an anchor tag for each book with its cover image
+        let anchor = document.createElement("a");
+        anchor.href = element.cover
+        let image = document.createElement("img")
+        image.setAttribute("src", element.cover);
+        anchor.appendChild(image);
+        document.body.appendChild(anchor);
+    })
+    //END
diff --git a/Week1/Homework/js-exercises/catWalk/cat.html b/Week1/Homework/js-exercises/catWalk/cat.html
@@ -0,0 +1,14 @@
+<!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 src="catWalk.js"></script>
+</body>
+
+</html>
diff --git a/Week1/Homework/js-exercises/catWalk/catWalk.js b/Week1/Homework/js-exercises/catWalk/catWalk.js
@@ -0,0 +1,22 @@
+'use strict'
+//Variables
+let catImage = document.querySelector("img");
+let positionNum = 10
+let positionStyle = catImage.style.left = positionNum + "px";
+let screenWidth = window.innerWidth;
+//Function that moves the cat 10px to the right every 50 milliseconds
+setInterval(function () {
+    positionNum += 10;
+    catImage.style.left = positionNum + "px";
+    let halfScreen = screenWidth / 2;
+    //Changing image source in the middle of the screen
+    if (positionNum == halfScreen) {
+        catImage.src = "https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif?itemid=10561424";
+    }
+    //Restarting the animation when it reaches the end of the screen
+    else if (positionNum === screenWidth) {
+        positionNum = 10;
+        catImage.src = "http://www.anniemation.com/clip_art/images/cat-walk.gif"
+    }
+}, 50)
+
diff --git a/Week1/Homework/js-exercises/logoHijack.js b/Week1/Homework/js-exercises/logoHijack.js
@@ -0,0 +1,7 @@
+"use strict"
+function hijackGoogleLogo() {
+    let oldLogo = document.getElementById("hplogo");
+    oldLogo.src = "https://www.hackyourfuture.dk/static/logo-dark.svg";
+    oldLogo.srcset = "https://www.hackyourfuture.dk/static/logo-dark.svg";
+}
+hijackGoogleLogo();
diff --git a/Week1/Homework/js-exercises/whatsTheTime/showCurrentTime.js b/Week1/Homework/js-exercises/whatsTheTime/showCurrentTime.js
@@ -0,0 +1,19 @@
+"use strict"
+//Create an h1 that contains the time
+let h1 = document.createElement("h1");
+h1.style.fontSize = ("5rem");
+h1.style.textAlign = ("center");
+document.body.appendChild(h1);
+
+//Function to show the current time
+function currentTime() {
+    setInterval(function () {
+        let today = new Date();
+        let time = `${today.getHours()}:${today.getMinutes()}:${today.getSeconds()}`;
+        h1.innerHTML = time;
+    }, 1000);
+}
+//Function onload
+h1.onload = currentTime();
+
+
diff --git a/Week1/Homework/js-exercises/whatsTheTime/time.html b/Week1/Homework/js-exercises/whatsTheTime/time.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+
+<head>
+    <title>Current time</title>
+</head>
+
+<body>
+    <script src="showCurrentTime.js"></script>
+</body>
+
+</html>