diff --git a/Week1/Homework/codeAlong/issue-tracker/index.html b/Week1/Homework/codeAlong/issue-tracker/index.html new file mode 100644 index 000000000..b9746c733 --- /dev/null +++ b/Week1/Homework/codeAlong/issue-tracker/index.html @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + JS Issue Tracker + + + +
+

Javascript Issue Tracker by Stefanos Leventis

+
+

Add a new issue:

+
+
+ + +
+
+ + +
+
+ + +
+ + +
+
+
+
+
+
+

For other projects visit www.stefanosleventis.com

+
+
+ + + + + + + + + + + \ No newline at end of file diff --git a/Week1/Homework/codeAlong/issue-tracker/script.js b/Week1/Homework/codeAlong/issue-tracker/script.js new file mode 100644 index 000000000..3c9d1caca --- /dev/null +++ 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 += '
' + + '
Issue ID: ' + id + '
' + '

' + status + '

' + '

' + desc + '

' + '

' + severity + '

' + + '

' + assignedTo + '

' + + 'Close' + + 'Delete' + '
' + '
'; + + + } + +} \ No newline at end of file diff --git a/Week1/Homework/codeAlong/issue-tracker/style.css b/Week1/Homework/codeAlong/issue-tracker/style.css new file mode 100644 index 000000000..8666fbaee --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/Week1/Homework/js-exercises/aboutMe/aboutMe.js b/Week1/Homework/js-exercises/aboutMe/aboutMe.js new file mode 100644 index 000000000..85a4a25b6 --- /dev/null +++ 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); \ No newline at end of file diff --git a/Week1/Homework/js-exercises/aboutMe/about_me.html b/Week1/Homework/js-exercises/aboutMe/about_me.html new file mode 100644 index 000000000..2cf9ef7f8 --- /dev/null +++ b/Week1/Homework/js-exercises/aboutMe/about_me.html @@ -0,0 +1,25 @@ + + + + + + About Me + + + + +

About Me

+ + + + + + \ No newline at end of file diff --git a/Week1/Homework/js-exercises/bookList/bookList.html b/Week1/Homework/js-exercises/bookList/bookList.html new file mode 100644 index 000000000..cbd160eaa --- /dev/null +++ b/Week1/Homework/js-exercises/bookList/bookList.html @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/Week1/Homework/js-exercises/bookList/bookList.js b/Week1/Homework/js-exercises/bookList/bookList.js new file mode 100644 index 000000000..153ad2a82 --- /dev/null +++ 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 \ No newline at end of file diff --git a/Week1/Homework/js-exercises/catWalk/cat.html b/Week1/Homework/js-exercises/catWalk/cat.html new file mode 100644 index 000000000..da36289ae --- /dev/null +++ b/Week1/Homework/js-exercises/catWalk/cat.html @@ -0,0 +1,14 @@ + + + + + + Cat Walk + + + + + + + + \ No newline at end of file diff --git a/Week1/Homework/js-exercises/catWalk/catWalk.js b/Week1/Homework/js-exercises/catWalk/catWalk.js new file mode 100644 index 000000000..0a4e0c333 --- /dev/null +++ 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 new file mode 100644 index 000000000..30afeea8d --- /dev/null +++ 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(); \ No newline at end of file diff --git a/Week1/Homework/js-exercises/whatsTheTime/showCurrentTime.js b/Week1/Homework/js-exercises/whatsTheTime/showCurrentTime.js new file mode 100644 index 000000000..bcba9230b --- /dev/null +++ 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 new file mode 100644 index 000000000..a47c87b48 --- /dev/null +++ b/Week1/Homework/js-exercises/whatsTheTime/time.html @@ -0,0 +1,11 @@ + + + + Current time + + + + + + + \ No newline at end of file diff --git a/Week1/Homework/project-RandomQuoteGenerator/index.html b/Week1/Homework/project-RandomQuoteGenerator/index.html new file mode 100644 index 000000000..e278c0417 --- /dev/null +++ b/Week1/Homework/project-RandomQuoteGenerator/index.html @@ -0,0 +1,32 @@ + + + + + + + + + + + + Random Quotes + + + +
+
+
+

Welcome to + the quote generator

+ +

Click on the following button to generate a quote

+ +
+
+
+ + + + + + \ No newline at end of file diff --git a/Week1/Homework/project-RandomQuoteGenerator/script.js b/Week1/Homework/project-RandomQuoteGenerator/script.js new file mode 100644 index 000000000..e9c076704 --- /dev/null +++ b/Week1/Homework/project-RandomQuoteGenerator/script.js @@ -0,0 +1,21 @@ +"use strict" +//Creating array with quotes +const quotes = [ + "Science is nothing but perception", + "The greatest wealth is to live content with little", + "Success is sweet but the secret is sweat", + "Every day is a good start", + "Learning never exhausts the mind", + "Work to become, not to acquire", + "Independence is happiness" +]; +//Selecting button and quote text +let button = document.querySelector(".new-quote"); +let quoteText = document.querySelector("#quote"); + +//Function that returns a random quote from the array above +function returnQuote() { + quoteText.innerHTML = quotes[Math.floor(Math.random() * quotes.length)]; +} +//Returning a random quote when the button is clicked +button.addEventListener("click", returnQuote); \ No newline at end of file diff --git a/Week1/Homework/project-RandomQuoteGenerator/style.css b/Week1/Homework/project-RandomQuoteGenerator/style.css new file mode 100644 index 000000000..3ef52eec6 --- /dev/null +++ b/Week1/Homework/project-RandomQuoteGenerator/style.css @@ -0,0 +1,89 @@ +@import url('https://fonts.googleapis.com/css?family=Exo+2:400,700&display=swap'); + +*{ + margin: 0; + padding: 0; +} +body { + font-family: 'Exo 2', sans-serif; + background-color: rgb(0, 97, 104); +} +.full-container { + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; +} +.quote-box { + background-color: white; + margin-left: 6vw; + margin-right: 6vw; + text-align: center; + height: 320px; + display: flex; + flex-direction: column; + justify-content: center; + border-radius: 12px; +} +.text { + display: inline-block; + vertical-align: middle; + text-align: center; + padding: 12px; +} + +h2 { + color: rgb(255, 122, 89); + font-size: 2.6rem; + margin: 10px 0 35px 0; +} +p { + font-size: 1.1rem; + margin: 10px 0 20px 0; +} + +i { + color: rgb(0, 97, 104); +} + +span#quote { + margin-right: 15px; + margin-left: 15px; +} + +button { + height: 40px; + width: 100px; + border-radius: 12px; + color: white; + font-weight: bold; + font-size: 1rem; + padding: 5px; + box-shadow: 2px 2px rgb(197, 82, 54); +} + +a button.new-quote { + background-color: rgb(255, 122, 89); + border: 2px solid rgb(255, 122, 89); +} + +a button.new-quote:link { + background-color: rgb(255, 122, 89); + border: 2px solid rgb(255, 122, 89); +} +a button.new-quote:visited { + background-color: rgb(255, 122, 89); + border: 2px solid rgb(255, 122, 89); +} + +a button.new-quote:hover { + background-color: rgb(255, 153, 128); + border: 2px solid rgb(255, 153, 128); + cursor: pointer; +} + +a button.new-quote:active { + background-color: rgb(255, 199, 154); + border: 2px solid rgb(255, 199, 154); +} + diff --git a/Week1/homework/app.js b/Week1/homework/app.js deleted file mode 100644 index a9b5f75d8..000000000 --- a/Week1/homework/app.js +++ /dev/null @@ -1,11 +0,0 @@ -'use strict'; - -{ - const bookTitles = [ - // Replace with your own book titles - 'harry_potter_chamber_secrets', - ]; - - // Replace with your own code - console.log(bookTitles); -} diff --git a/Week1/homework/index.html b/Week1/homework/index.html deleted file mode 100644 index b22147cd1..000000000 --- a/Week1/homework/index.html +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/Week1/homework/style.css b/Week1/homework/style.css deleted file mode 100644 index bab13ec23..000000000 --- a/Week1/homework/style.css +++ /dev/null @@ -1 +0,0 @@ -/* add your styling here */ \ No newline at end of file diff --git a/Week2/Homework/codeAlong/rockPaperScissors/index.html b/Week2/Homework/codeAlong/rockPaperScissors/index.html new file mode 100644 index 000000000..ee1e53644 --- /dev/null +++ b/Week2/Homework/codeAlong/rockPaperScissors/index.html @@ -0,0 +1,66 @@ + + + + + + + + + + + + + Rock, paper, scissors! + + + + + + +
+

Rock Paper Scissors

+

An all time classic

+ +
+
+
Player: 0
+
Computer: 0
+
+
+

Make your selection

+
+
+ + + +
+
+ + + +
+
+ +
+
+ + +
+ + + + + + + + + + + \ No newline at end of file diff --git a/Week2/Homework/codeAlong/rockPaperScissors/ropasc-bg.jpg b/Week2/Homework/codeAlong/rockPaperScissors/ropasc-bg.jpg new file mode 100644 index 000000000..705da3959 Binary files /dev/null and b/Week2/Homework/codeAlong/rockPaperScissors/ropasc-bg.jpg differ diff --git a/Week2/Homework/codeAlong/rockPaperScissors/script.js b/Week2/Homework/codeAlong/rockPaperScissors/script.js new file mode 100644 index 000000000..e143067b3 --- /dev/null +++ b/Week2/Homework/codeAlong/rockPaperScissors/script.js @@ -0,0 +1,113 @@ +"use strict" +const choices = document.querySelectorAll(".choice"); +const score = document.getElementById("score"); +const result = document.getElementById("result"); +const restart = document.getElementById("restart"); +const modal = document.querySelector(".my-modal"); +const scoreboard = { + player: 0, + computer: 0 +} + +//Play game +function play(e) { + restart.style.display = "inline-block"; + const playerChoice = e.target.id; + const computerChoice = getComputerChoice(); + const winner = getWinner(playerChoice, computerChoice); + showWinner(winner, computerChoice); +} + +//Get computer choice +function getComputerChoice() { + const rand = Math.random(); + if (rand < 0.34) { + return "rock"; + } else if (rand <= 0.67) { + return "paper"; + } else { + return "scissors"; + } +} + +//Get game winner +function getWinner(pl, comp) { + if (pl === comp) { + return "draw"; + } + else if (pl === "rock") { + if (comp === "paper") { + return "computer"; + } else { + return "player"; + } + } + else if (pl === "paper") { + if (comp === "scissors") { + return "computer"; + } + else { return "player" } + } + else if (pl === "scissors") { + if (comp === "rock") { + return "computer"; + } else { return "player" } + } +} + +//Show Winner +function showWinner(winner, computerChoice) { + if (winner === "player") { + scoreboard.player++; + result.innerHTML = + `

You Win!

+ +

Computer Chose ${computerChoice.charAt(0).toUpperCase() + computerChoice.slice(1)}

+ `; + } else if (winner === "computer") { + scoreboard.computer++; + result.innerHTML = + `

You Lose!

+ +

Computer Chose ${computerChoice.charAt(0).toUpperCase() + computerChoice.slice(1)}

+ `; + } else { + result.innerHTML = + `

It's a draw!

+ +

Computer Chose ${computerChoice.charAt(0).toUpperCase() + computerChoice.slice(1)}

+ `; + } + score.innerHTML = `
+
Player: ${scoreboard.player}
+
Computer: ${scoreboard.computer}
+
`; + // `

Player: ${scoreboard.player}

+ //

Computer: ${scoreboard.computer}

+ // `; + modal.style.display = "block"; +} +//Restart +function restartGame() { + scoreboard.player = 0; + scoreboard.computer = 0; + score.innerHTML = ` +
+
Player: 0
+
Computer: 0
+
+ `; + restart.style.display = "none" +} + +//Clear modal +function clearModal(e) { + if (e.target == modal) { + modal.style.display = "none" + } +} + +//Event listeners +choices.forEach(choice => choice.addEventListener("click", play)); +window.addEventListener("click", clearModal); +restart.addEventListener("click", restartGame); diff --git a/Week2/Homework/codeAlong/rockPaperScissors/style.css b/Week2/Homework/codeAlong/rockPaperScissors/style.css new file mode 100644 index 000000000..6cc064d72 --- /dev/null +++ b/Week2/Homework/codeAlong/rockPaperScissors/style.css @@ -0,0 +1,108 @@ +@import url('https://fonts.googleapis.com/css?family=Patrick+Hand&display=swap'); + +*{ + margin: 0; + padding: 0; +} + +body { + font-family: 'Patrick Hand', cursive; + background-image: url("ropasc-bg.jpg"); + background-size: 100%; + background-position-y: 20%; +} +div.container { + margin-top: 20px; + margin-bottom: 20px; +} +h2 { + margin-top: 20px; + margin-bottom: 20px; +} + +p { + font-size: 1.5rem; +} +button#restart { + font-size: 1.2rem!important; +} + + +div.player { + border: 1px solid rgb(0, 80, 100); + background-color: rgb(0, 80, 100); + border-radius: 7px; + color: white; + font-size: 1.2rem; +} + +div.computer { + border: 1px solid rgb(0, 80, 100); + background-color: rgb(0, 80, 100); + border-radius: 7px; + color: white; + font-size: 1.2rem; +} +i.choice { + color: rgb(255, 146, 96); + cursor: pointer; +} +i.choice:hover { + color: rgb(247, 197, 174); + cursor: pointer; +} + +.text-win { + color: rgb(4, 80, 4); +} +.text-lose { + color: rgb(179, 24, 24); +} +.restart-btn { + display: none; + margin-bottom: 1rem; +} +:root { + --modal-duration: 1s; +} +.my-modal { + display:none; + position: fixed; + left: 0; + top: 0; + height: 100%; + width: 100%; + overflow: auto; + background: rgba(0,0,0,0.4); + z-index: 1; +} +.modal-content { + background: lavenderblush; + text-align: center; + margin: 10% auto; + width: 400px; + border-radius: 20px; + border: 2px solid lavenderblush; + padding: 3rem; + box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2),0 7px 20px 0 rgba(0,0,0,0.17) ; + animation-name: modalopen; + animation-duration: var(--modal-duration); + +} +.modal-content h1 { + margin-bottom: 1rem; +} +.modal-content p { + font-size: 1.2rem; + margin-top: 1rem; +} + +@keyframes modalopen { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + diff --git a/Week2/Homework/js-exercises/collectiveAge.js b/Week2/Homework/js-exercises/collectiveAge.js new file mode 100644 index 000000000..30c41cd4c --- /dev/null +++ b/Week2/Homework/js-exercises/collectiveAge.js @@ -0,0 +1,12 @@ +"use strict" +const hackYourFutureMembers = [ + { name: 'Wouter', age: 33 }, + { name: 'Federico', age: 32 }, + { name: 'Noer', age: 27 }, + { name: 'Tjebbe', age: 22 }, +]; + +let collectiveAge = hackYourFutureMembers.reduce(function (acc, cur) { + return acc + cur.age; +}, 0); +console.log(`The collective age of the HYF team is: ${collectiveAge}`) \ No newline at end of file diff --git a/Week2/Homework/js-exercises/favoriteHobbies/favoriteHobbies.js b/Week2/Homework/js-exercises/favoriteHobbies/favoriteHobbies.js new file mode 100644 index 000000000..14339aa9b --- /dev/null +++ b/Week2/Homework/js-exercises/favoriteHobbies/favoriteHobbies.js @@ -0,0 +1,20 @@ +"use strict" +const myHobbies = [ + 'Meditation', + 'Reading', + 'Programming', + 'Hanging out with friends', + 'Going to the gym', +]; + +let newUl = document.createElement("ul"); +document.body.appendChild(newUl) + +function hobbiesIntoList() { + myHobbies.forEach(function (item) { + let newLi = document.createElement("li"); + newLi.innerHTML = item; + newUl.appendChild(newLi); + }) +} +hobbiesIntoList(); diff --git a/Week2/Homework/js-exercises/favoriteHobbies/hobbies.html b/Week2/Homework/js-exercises/favoriteHobbies/hobbies.html new file mode 100644 index 000000000..6542da51f --- /dev/null +++ b/Week2/Homework/js-exercises/favoriteHobbies/hobbies.html @@ -0,0 +1,15 @@ + + + + + + Favorite Hobbies + + + + + + + + + \ No newline at end of file diff --git a/Week2/Homework/js-exercises/lemonAllergy.js b/Week2/Homework/js-exercises/lemonAllergy.js new file mode 100644 index 000000000..2d10e3dd0 --- /dev/null +++ b/Week2/Homework/js-exercises/lemonAllergy.js @@ -0,0 +1,4 @@ +"use strict" +const fruitBasket = ['Apple', 'Lemon', 'Grapefruit', 'Lemon', 'Banana', 'Watermelon', 'Lemon']; +let fruitsWithoutLemons = fruitBasket.filter(fruit => fruit !== 'Lemon'); +console.log(`My mom bought me a fruit basket, containing ${fruitsWithoutLemons.join(", ")}`) \ No newline at end of file diff --git a/Week2/Homework/js-exercises/mondayWorth.js b/Week2/Homework/js-exercises/mondayWorth.js new file mode 100644 index 000000000..5950ca673 --- /dev/null +++ b/Week2/Homework/js-exercises/mondayWorth.js @@ -0,0 +1,31 @@ +"use strict" +const mondayTasks = [ + { + name: 'Daily standup', + duration: 30, // specified in minutes + }, + { + name: 'Feature discussion', + duration: 120, + }, + { + name: 'Development time', + duration: 240, + }, + { + name: 'Talk to different members from the product team', + duration: 60, + }, +]; + +function mondayWorth() { + let totalRate = mondayTasks.map(function (activity) { + //Converting each duration to hours and multiplying by hourly rate + return (activity.duration / 60) * 25 + //Adding all rates + }).reduce(function (acc, cur) { + return acc + cur; + }, 0) + return `€${+totalRate.toFixed(2)}`; +} + diff --git a/Week2/Homework/js-exercises/oddOnesOut.js b/Week2/Homework/js-exercises/oddOnesOut.js new file mode 100644 index 000000000..8833530bb --- /dev/null +++ b/Week2/Homework/js-exercises/oddOnesOut.js @@ -0,0 +1,4 @@ +"use strict" +const myNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; +let doubleEvenNumbers = myNumbers.filter(item => item % 2 === 0).map(item => item * 2); +console.log(doubleEvenNumbers); \ No newline at end of file diff --git a/Week2/homework/maartjes-work.js b/Week2/Homework/maartjes-work.js similarity index 100% rename from Week2/homework/maartjes-work.js rename to Week2/Homework/maartjes-work.js diff --git a/Week2/homework/map-filter.js b/Week2/Homework/map-filter.js similarity index 100% rename from Week2/homework/map-filter.js rename to Week2/Homework/map-filter.js diff --git a/Week2/Homework/project-PomodoroClock/alarm-sound.mp3 b/Week2/Homework/project-PomodoroClock/alarm-sound.mp3 new file mode 100644 index 000000000..1d29715ec Binary files /dev/null and b/Week2/Homework/project-PomodoroClock/alarm-sound.mp3 differ diff --git a/Week2/Homework/project-PomodoroClock/index.html b/Week2/Homework/project-PomodoroClock/index.html new file mode 100644 index 000000000..80942e84e --- /dev/null +++ b/Week2/Homework/project-PomodoroClock/index.html @@ -0,0 +1,50 @@ + + + + + + + + + + + + Pomodoro Clock + + + +
+
+

Pomodoro Clock

+

Session Length

+ +

0

+ +
+
+

Session

+

0:00

+ + + +
+
+
+ + +
+ + + + + + + + \ No newline at end of file diff --git a/Week2/Homework/project-PomodoroClock/script.js b/Week2/Homework/project-PomodoroClock/script.js new file mode 100644 index 000000000..eb99ef1ba --- /dev/null +++ b/Week2/Homework/project-PomodoroClock/script.js @@ -0,0 +1,76 @@ +"use strict" +//DOM elements selection +let lengthUp = document.querySelector("#length-up"); +let lengthDown = document.querySelector("#length-down"); +let lengthDisplay = document.querySelector("#length-display"); +let play = document.querySelector("#play"); +let pause = document.querySelector("#pause"); +let timeDisplay = document.querySelector("#time-display"); +let audio = document.querySelector("audio"); +let totalSeconds; +let paused = false; + + + +//Increasing and decreasing the session length +lengthUp.addEventListener("click", () => { + let plusOne = parseInt(lengthDisplay.innerHTML) + 1; + lengthDisplay.innerHTML = plusOne; + timeDisplay.innerHTML = `${lengthDisplay.innerHTML}:00`; + totalSeconds = parseInt(timeDisplay.innerHTML) * 60; +}); +lengthDown.addEventListener("click", () => { + let minusOne = parseInt(lengthDisplay.innerHTML) - 1; + lengthDisplay.innerHTML = minusOne; + timeDisplay.innerHTML = `${lengthDisplay.innerHTML}:00`; + totalSeconds = parseInt(timeDisplay.innerHTML) * 60; +}) + + +//Start timer + +let countdown; + +function timer(sec) { + const now = Date.now(); + const then = now + sec * 1000; + displayTimeLeft(sec); + + countdown = setInterval(() => { + const secondsLeft = Math.round((then - Date.now()) / 1000); + if (secondsLeft < 0) { + clearInterval(countdown); + timeDisplay.innerHTML = "Time's up!"; + audio.play(); + return; + } + + displayTimeLeft(secondsLeft); + + }, 1000); +} + +function displayTimeLeft(sec) { + const min = Math.floor(sec / 60); + const remainderSec = Math.floor(sec % 60); + const display = `${min}:${remainderSec < 10 ? "0" : ""}${remainderSec}`; + timeDisplay.innerHTML = display; + +} +//Play button function (if pause was pressed before, continue with the remaining timer) +play.addEventListener("click", () => { + if (paused) { + totalSeconds = (parseInt(timeDisplay.innerHTML[0]) * 60) + (parseInt(timeDisplay.innerHTML[2] + timeDisplay.innerHTML[3])); + } + timer(totalSeconds) +}); + +//Pause button function +pause.addEventListener("click", function () { + clearInterval(countdown); + paused = true; +}); + + + + diff --git a/Week2/Homework/project-PomodoroClock/style.css b/Week2/Homework/project-PomodoroClock/style.css new file mode 100644 index 000000000..f3d6c9637 --- /dev/null +++ b/Week2/Homework/project-PomodoroClock/style.css @@ -0,0 +1,99 @@ +@import url('https://fonts.googleapis.com/css?family=Fredoka+One&display=swap'); +@import url('https://fonts.googleapis.com/css?family=Orbitron&display=swap'); + +*{ + margin: 0; + padding: 0; +} + +body { + font-family: 'Fredoka One', cursive; + background-color: rgb(201, 44, 44); + color: white; +} + +h1 { + font-size: 3rem; +} +h2 { + font-size: 2rem; +} +div.inside-text h3 { + font-size:3.2rem; +} +#length-display { + font-size: 2.1rem; +} +.mainContainer { + height: 100vh; +} + +.in-the-box { + margin: 15px; + padding: 15px; +} +.length-button { + font-size: 2.7rem; + color: white; + cursor: pointer; +} +.length-button:link { + color: white; +} +.length-button:visited { + color: white; +} +.length-button:hover { + color: sandybrown; +} +.length-button:active { + color: sandybrown; +} +.timer { + font-family: 'Orbitron', sans-serif; + border: 15px solid rgb(121, 33, 33) ; + border-radius: 50%; + width: 350px; + height: 350px; +} +.time-buttons { + font-size: 2.2rem; + margin: 3px 10px 3px 10px; + color: white; + cursor: pointer; +} +.time-buttons:link { + color: white; +} +.time-buttons:visited { + color: white; +} +.time-buttons:hover { + color: sandybrown; +} +.time-buttons:active { + color: sandybrown; +} +#pomodoro { + position: absolute; + top: 120px; + left: 5vw; + height: 500px; + transform: rotate(20deg); +} + +@media (max-width:576px){ +h1 { + font-size: 2.5rem; + } + h2 { + font-size: 1.5rem; + } + div.inside-text h3 { + font-size:3rem; +} +#length-display { + font-size: 1.8rem; +} + +} diff --git a/Week3/homework/codeAlong/booklist-app/index.html b/Week3/homework/codeAlong/booklist-app/index.html new file mode 100644 index 000000000..41e9f77d2 --- /dev/null +++ b/Week3/homework/codeAlong/booklist-app/index.html @@ -0,0 +1,64 @@ + + + + + + + + + + + + + Stefanos' Book List + + + + +
+

BookList

+ +
+
+ + +
+
+ + +
+
+ + +
+ +
+ + + + + + + + + + +
TitleAuthorISBN#
+ +
+ + + + + + + + + \ No newline at end of file diff --git a/Week3/homework/codeAlong/booklist-app/main.js b/Week3/homework/codeAlong/booklist-app/main.js new file mode 100644 index 000000000..37b4bbf14 --- /dev/null +++ b/Week3/homework/codeAlong/booklist-app/main.js @@ -0,0 +1,122 @@ +//Book Class +class Book { + constructor(title, author, isbn) { + this.title = title; + this.author = author; + this.isbn = isbn; + } +} + +//UI Class +class UI { + static displayBooks() { + + const books = Store.getBooks(); + + books.forEach((book) => UI.addBookToList(book)); + } + static addBookToList(book) { + const list = document.querySelector("#book-list"); + + const row = document.createElement("tr"); + + row.innerHTML = ` + ${book.title} + ${book.author} + ${book.isbn} + X + `; + + list.appendChild(row); + } + static deleteBook(el) { + if (el.classList.contains("delete")) { + el.parentElement.parentElement.remove(); + } + } + + static showAlert(message, className) { + const div = document.createElement("div"); + div.className = `alert alert-${className}`; + div.appendChild(document.createTextNode(message)); + const container = document.querySelector(".container"); + const form = document.querySelector("#book-form"); + container.insertBefore(div, form); + setTimeout(() => document.querySelector(".alert").remove(), 2000); + } + + static clearFields() { + document.querySelector("#title").value = ""; + document.querySelector("#author").value = ""; + document.querySelector("#isbn").value = ""; + + } +} + +//Store Class +class Store { + static getBooks() { + let books; + if (localStorage.getItem("books") === null) { + books = []; + } else { + books = JSON.parse(localStorage.getItem("books")); + } + return books; + } + + static addBook(book) { + const books = Store.getBooks(); + + books.push(book); + localStorage.setItem("books", JSON.stringify(books)); + } + + static removeBook(isbn) { + const books = Store.getBooks(); + books.forEach((book, index) => { + if (book.isbn === isbn) { + books.splice(index, 1); + } + }); + localStorage.setItem("books", JSON.stringify(books)); + } +} + + +//Display Books +document.addEventListener("DOMContentLoaded", UI.displayBooks); + +//Add a book +document.querySelector("#book-form").addEventListener("submit", (e) => { + e.preventDefault(); + + const title = document.querySelector("#title").value; + const author = document.querySelector("#author").value; + const isbn = document.querySelector("#isbn").value; + + if (title === "" || author === "" || isbn === "") { + UI.showAlert("Please fill in all the fields", "danger"); + } else { + + const book = new Book(title, author, isbn); + + UI.addBookToList(book); + + Store.addBook(book); + + UI.showAlert("Book Added", "success"); + + UI.clearFields; + } +}); + +//Remove a book +document.querySelector("#book-list").addEventListener("click", (e) => { + UI.deleteBook(e.target); + + Store.removeBook(e.target.parentElement.previousElementSibling.textContent); + + UI.showAlert("Book Removed", "success"); +}); + diff --git a/Week3/homework/codeAlong/booklist-app/style.css b/Week3/homework/codeAlong/booklist-app/style.css new file mode 100644 index 000000000..0dd716a9a --- /dev/null +++ b/Week3/homework/codeAlong/booklist-app/style.css @@ -0,0 +1,31 @@ +*{ + padding: 0; + margin: 0; +} +body { + background-color: #ECF0D8; +} +.logo-header { + color: #4D5767; +} +th { + border-top: 1px solid rgb(38, 76, 105)!important; + border-bottom: 4px solid rgb(38, 76, 105)!important; +} +input.btn{ + background-color: #333C4A; + border: 2px solid #333C4A; +} +input.btn:hover { + background-color: rgb(77, 89, 109); + border: 2px solid rgb(77, 89, 109); +} +input.btn:active { + background-color: rgb(151, 165, 190)!important; + border: 2px solid rgb(151, 165, 190)!important; +} +input.btn:focus { + background-color: rgb(151, 165, 190)!important; + border: 2px solid rgb(151, 165, 190)!important; +} + diff --git a/Week3/homework/js-exercises/addSix.js b/Week3/homework/js-exercises/addSix.js new file mode 100644 index 000000000..c499acb7f --- /dev/null +++ b/Week3/homework/js-exercises/addSix.js @@ -0,0 +1,8 @@ +"use strict" +function createBase(base, num) { + return num => base + num; +} +const addSix = createBase(6); +console.log(addSix(9)); +console.log(addSix(18)); +console.log(addSix(30)); \ No newline at end of file diff --git a/Week3/homework/js-exercises/guessMore.js b/Week3/homework/js-exercises/guessMore.js new file mode 100644 index 000000000..1e4fb1783 --- /dev/null +++ b/Week3/homework/js-exercises/guessMore.js @@ -0,0 +1,4 @@ +//f1(x) --> 10 | The function adds 1 to the value of the variable x +//console.log(x); --> 9 | It just prints out the initial variable +//f2(y) --> {x:10} | The function adds 1 to the value of the key x (object) +//console.log(y); --> {x:9} | It prints out the value of the variable which is an object \ No newline at end of file diff --git a/Week3/homework/js-exercises/guessOutput.js b/Week3/homework/js-exercises/guessOutput.js new file mode 100644 index 000000000..cc099fa36 --- /dev/null +++ b/Week3/homework/js-exercises/guessOutput.js @@ -0,0 +1,4 @@ +//It will return 12. +//The variable a inside the function x scope takes the value of 12. +//So the function with the alert method will use the upper function scope and display 12. +//The first variable declaration has nothing to do with the function scope. diff --git a/Week3/homework/js-exercises/lotteryMachine.js b/Week3/homework/js-exercises/lotteryMachine.js new file mode 100644 index 000000000..07dc3fb99 --- /dev/null +++ b/Week3/homework/js-exercises/lotteryMachine.js @@ -0,0 +1,25 @@ +"use strict" +function threeFive(startIndex, stopIndex, threeCallback, fiveCallback) { + const numbers = []; + + for (let n = startIndex; n < stopIndex; n++) { + numbers.push(n); + } + + numbers.forEach(n => { + if (n % 3 === 0) { + threeCallback(); + } + else if (n % 5 === 0) { + fiveCallback(); + } + }) +} +function sayThree() { + console.log("three"); +} +function sayFive() { + console.log("five"); +} + +threeFive(10, 15, sayThree, sayFive); diff --git a/Week3/homework/js-exercises/removeDuplicates.js b/Week3/homework/js-exercises/removeDuplicates.js new file mode 100644 index 000000000..ae621fec7 --- /dev/null +++ b/Week3/homework/js-exercises/removeDuplicates.js @@ -0,0 +1,8 @@ +"use strict" +const letters = ['a', 'b', 'c', 'd', 'a', 'e', 'f', 'c', 'b']; + +function removeDuplicates(arr) { + let noDuplicates = arr.filter((item, index) => arr.indexOf(item) === index); + return noDuplicates; +} +console.log(removeDuplicates(letters)); \ No newline at end of file diff --git a/Week3/homework/project-TipCalculator/index.html b/Week3/homework/project-TipCalculator/index.html new file mode 100644 index 000000000..a1e341106 --- /dev/null +++ b/Week3/homework/project-TipCalculator/index.html @@ -0,0 +1,48 @@ + + + + + + + + Tip Calculator + + + + + + +
+
+
+

TIP CALCULATOR

+
+
+
+

How much was your bill?

+ € +

How was your service?

+ +

How many people are sharing the bill?

+ people +
+ +

TIP AMOUNT

+

€ 0.00

+

each

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/Week3/homework/project-TipCalculator/main.js b/Week3/homework/project-TipCalculator/main.js new file mode 100644 index 000000000..4942257db --- /dev/null +++ b/Week3/homework/project-TipCalculator/main.js @@ -0,0 +1,59 @@ +"use strict" +//Selecting the elements + +const bill = document.querySelector("#bill"); +const services = document.querySelector("#services"); +const people = document.querySelector("#people"); +const button = document.querySelector("#calc-button"); +const amount = document.querySelector("#tip-amount"); +const each = document.querySelector("#each"); +let total; + +//Event listener for the button click +button.addEventListener("click", calculateTips); + +//Function that calculates the tips for each service selection +function calculateTips() { + //Checks if some of the fields is blank + if (bill.value === "" || services.value === "choose-option" || people.value === "") { + alert("You need to fill in all the fields!"); + //Changes the tip value for each percentage + } else { + switch (services.value) { + case "outstanding": + onePerson(); + total = (bill.value * 0.30) / people.value; + amount.innerHTML = `€ ${total}`; + break; + case "good": + onePerson(); + total = (bill.value * 0.20) / people.value; + amount.innerHTML = `€ ${total}`; + break; + case "ok": + onePerson(); + total = (bill.value * 0.15) / people.value; + amount.innerHTML = `€ ${total}`; + break; + case "bad": + onePerson(); + total = (bill.value * 0.1) / people.value; + amount.innerHTML = `€ ${total}`; + break; + case "terrible": + onePerson(); + total = (bill.value * 0.05) / people.value; + amount.innerHTML = `€ ${total}`; + break; + } + } +} + +//Function that checks if there is more than one person that pays the bill and adds or deletes the "each" +function onePerson() { + if (parseInt(people.value) === 1) { + each.innerHTML = ""; + } else { + each.innerHTML = "each"; + } +} diff --git a/Week3/homework/project-TipCalculator/style.css b/Week3/homework/project-TipCalculator/style.css new file mode 100644 index 000000000..943c6397a --- /dev/null +++ b/Week3/homework/project-TipCalculator/style.css @@ -0,0 +1,91 @@ +@import url('https://fonts.googleapis.com/css?family=Odibee+Sans&display=swap'); + +* { + margin: 0; + padding: 0; +} +body { + text-align: center; + font-family: 'Odibee Sans', cursive; + font-size: 1.5rem; +} +p,h2,h3,h4, input,button,label,select { + margin-bottom: 10px; +} +input, select { + border-radius: 5px; +} + +div.container { + display:flex; + justify-content: center; + align-items: center; + background-color: #303952; + height: 100vh; + width: 100vw; +} + +div.calculator { + background-color: white; + border-radius: 20px; + width: 350px; +} + +div.calc-header{ + padding: 10px; + border-top-left-radius: 20px; + border-top-right-radius: 20px; + background-color: #c25858; + color: white; +} +div.calc-body{ + padding: 10px; +} +.bill-section{ + margin-bottom: 20px; +} +.service-section{ + margin-bottom: 20px; +} + +#bill { + height: 30px; + width: 180px; + padding: 5px; +} +#services { + width: 210px; + font-size:1.2rem; + padding: 5px; +} +#people { + width: 80px; + padding: 5px; +} +#calc-button { + padding: 5px; + font-size: 1.8rem; + background-color: #c25858; + border-radius: 10px; + color: white; + font-family: 'Odibee Sans', cursive; + cursor: pointer; +} +#calc-button:hover { + background-color: #fd7f7f; + } + +input#bill{ + font-family: 'Segoe UI', sans-serif; + font-size: 1.3rem; + +} +input#people{ + font-family: 'Segoe UI', sans-serif; + font-size: 1.1rem; + +} +select#services{ + font-family: 'Segoe UI', sans-serif; +} +