diff --git a/.DS_Store b/.DS_Store index 19f35c2d4..5b2a16721 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/Week1/.DS_Store b/Week1/.DS_Store new file mode 100644 index 000000000..439e20440 Binary files /dev/null and b/Week1/.DS_Store differ diff --git a/Week1/homework/.DS_Store b/Week1/homework/.DS_Store new file mode 100644 index 000000000..f2f321350 Binary files /dev/null and b/Week1/homework/.DS_Store differ diff --git a/Week1/homework/issue-tracker/index.html b/Week1/homework/issue-tracker/index.html new file mode 100644 index 000000000..aba3003db --- /dev/null +++ b/Week1/homework/issue-tracker/index.html @@ -0,0 +1,47 @@ + + + + + + + + + + + Issue Tracker + + +
+

JS Issue Tracker by SocialHackersAcademy

+
+

Add New Issue:

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

© Michalis Ligopsychakis

+
+ + + + + + + + + \ No newline at end of file diff --git a/Week1/homework/issue-tracker/issue-tracker.js b/Week1/homework/issue-tracker/issue-tracker.js new file mode 100644 index 000000000..3df5867e6 --- /dev/null +++ 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 = "

ID: " + (new Date()).getTime() + "

" + + "

Open

" + + "

" + desc.value + "

" + + "

" + " " + sev.value + "" + + " " + assign.value + "

" + + "" + + ""; + 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 new file mode 100644 index 000000000..79845d99a Binary files /dev/null and b/Week1/homework/js-exercises/.DS_Store differ diff --git a/Week1/homework/js-exercises/about-me.js b/Week1/homework/js-exercises/about-me.js new file mode 100644 index 000000000..e87cd6e8c --- /dev/null +++ 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 new file mode 100644 index 000000000..97672e505 --- /dev/null +++ b/Week1/homework/js-exercises/about_me.html @@ -0,0 +1,21 @@ + + + + + About Me + + + +

About Me

+ + + + \ No newline at end of file diff --git a/Week1/homework/js-exercises/books.js b/Week1/homework/js-exercises/books.js new file mode 100644 index 000000000..be38f1a31 --- /dev/null +++ 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 new file mode 100644 index 000000000..ed6ba9528 --- /dev/null +++ b/Week1/homework/js-exercises/cat-walk.html @@ -0,0 +1,44 @@ + + + + + Cat Walk + + + + + + + \ No newline at end of file diff --git a/Week1/homework/js-exercises/hijackGoogleLogo.js b/Week1/homework/js-exercises/hijackGoogleLogo.js new file mode 100644 index 000000000..ba906d8c7 --- /dev/null +++ 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"; +} \ No newline at end of file diff --git a/Week1/homework/js-exercises/showCurrentTime.js b/Week1/homework/js-exercises/showCurrentTime.js new file mode 100644 index 000000000..77f2ada51 --- /dev/null +++ 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 new file mode 100644 index 000000000..808afda64 --- /dev/null +++ b/Week1/homework/js-exercises/time.html @@ -0,0 +1,9 @@ + + + + Time + + + + + diff --git a/Week1/homework/random-quote/index.html b/Week1/homework/random-quote/index.html new file mode 100644 index 000000000..109328dd6 --- /dev/null +++ b/Week1/homework/random-quote/index.html @@ -0,0 +1,27 @@ + + + + + + + Random Quote!!! + + + + +
+
+

Random quote... Click the button to get wiser!

+

- Michalis Ligopsychakis

+
+ + + +
+
+
+
+ + + + \ No newline at end of file diff --git a/Week1/homework/random-quote/quote.css b/Week1/homework/random-quote/quote.css new file mode 100644 index 000000000..6064c7ef3 --- /dev/null +++ b/Week1/homework/random-quote/quote.css @@ -0,0 +1,87 @@ +body{ + background-color: #ffa500; + color: #ffa500; + font-size: 2em; +} + +.all{ + /* background-color: white; */ + width: 60%; + margin-left: auto; + margin-right: auto; + margin-top: 10%; +} + +.block{ + width: 80%; + margin-left: auto; + margin-right: auto; + background-color: white; +} + +.main-block{ + padding: 5%; +} + +.block p:first-child{ + text-align: center; + margin-bottom: 35px; +} + +.small{ + text-align: right; + font-size: 0.5em; + margin-bottom: 40px; +} + +.info-block{ + width: 100%; + margin-left: 0; + margin-right: 0; + display: flex; +} + +.info-block i:nth-child(2){ + flex: 1; + margin-left: 3px; +} + +#btn{ + background-color: #ffa500; + color: white; + padding: 5px; + font-size: 0.5em; +} + +.down-block{ + height: 20px; + width: 20%; + margin-top: 4px; +} + +@media all and (max-width:400px){ + .block p:first-child{ + font-size: 0.6em; + } + .small{ + font-size: 0.4em; + } + .info-block i{ + font-size: 25px; + } + #btn{ + font-size: 0.4em; + } + .all{ + width: 95%; + } +} + +@media all and (max-width:180px){ + #btn{ + font-size: 0.3em; + } + .info-block i{ + font-size: 15px; + } +} \ No newline at end of file diff --git a/Week1/homework/random-quote/random-quote.js b/Week1/homework/random-quote/random-quote.js new file mode 100644 index 000000000..b4f6f4e6d --- /dev/null +++ b/Week1/homework/random-quote/random-quote.js @@ -0,0 +1,32 @@ +let quote = document.querySelector("p"); +let name = document.querySelector("p:nth-child(2)"); +let btn = document.getElementById("btn"); +let num; //use to avoid to repeat the same quote two times in a row + +//array of six quotes +let quoteList = ["Two things are infinite: the universe and human stupidity; and I'm not sure about the universe..", + "So many books, so little time..", + "A room without books is like a body without a soul..", + "Be the change that you wish to see in the world..", + "You only live once, but if you do it right, once is enough..", + "Without music, life would be a mistake.." +]; + +//array of names in the same index of quote that each own +let nameList = ["- Albert Einstein", "- Frank Zappa", "- Marcus Tullius Cicero", "- Mahatma Gandhi", "- Mae West", "- Friedrich Nietzsche"]; + +//when button onclick change the quote and the name and keep in "num" the value just to remember the last quote and not repeat it after +btn.addEventListener("click", function(){ + refreshQuote(quote,name,quoteList,nameList,num); + num = refreshQuote(quote,name,quoteList,nameList,num); +}); + + +function refreshQuote(quo, nam, quoList, namList, n){ + do{ + var i = Math.floor(Math.random() * 6); + }while(n === i || i === 6) + quo.innerHTML = " " + quoList[i]; + nam.innerText = namList[i]; + return n = i; +} diff --git a/Week2/.DS_Store b/Week2/.DS_Store new file mode 100644 index 000000000..e1ff11aaf Binary files /dev/null and b/Week2/.DS_Store differ diff --git a/Week2/homework/.DS_Store b/Week2/homework/.DS_Store new file mode 100644 index 000000000..d10f90084 Binary files /dev/null and b/Week2/homework/.DS_Store differ diff --git a/Week2/homework/js-exercises/.DS_Store b/Week2/homework/js-exercises/.DS_Store new file mode 100644 index 000000000..fd8511923 Binary files /dev/null and b/Week2/homework/js-exercises/.DS_Store differ diff --git a/Week2/homework/js-exercises/collectiveAge.js b/Week2/homework/js-exercises/collectiveAge.js new file mode 100644 index 000000000..7a48cb29f --- /dev/null +++ b/Week2/homework/js-exercises/collectiveAge.js @@ -0,0 +1,18 @@ +"use strict"; + +const hackYourFutureMembers = [ + { name: 'Wouter', age: 33 }, + { name: 'Federico', age: 32 }, + { name: 'Noer', age: 27 }, + { name: 'Tjebbe', age: 22 }, +]; + +function collectiveAge(infos){ + let sumOfAges = infos + .map(info => info.age) //map to keep the ages from the object + .reduce((total,age) => total + age , 0); //reduce to add the ages + console.log("The collective age of HYF is " + sumOfAges); + return sumOfAges; +} + +collectiveAge(hackYourFutureMembers); \ No newline at end of file diff --git a/Week2/homework/js-exercises/favoriteHobbies.js b/Week2/homework/js-exercises/favoriteHobbies.js new file mode 100644 index 000000000..0411892d8 --- /dev/null +++ b/Week2/homework/js-exercises/favoriteHobbies.js @@ -0,0 +1,23 @@ +const myHobbies = [ + 'Meditation', + 'Reading', + 'Programming', + 'Hanging out with friends', + 'Going to the gym', +]; + +function createListItems(hobbies){ + //append to body the ul element + const body = document.getElementById("all") + let unList = document.createElement("ul"); + body.appendChild(unList); + + //append to ul the list items + hobbies.forEach((hobbie) => { + let listItem = document.createElement("li"); + unList.appendChild(listItem); + document.querySelector("ul li:last-child").innerText = hobbie; + }); +} + +createListItems(myHobbies); \ No newline at end of file diff --git a/Week2/homework/js-exercises/index.html b/Week2/homework/js-exercises/index.html new file mode 100644 index 000000000..de84cc4e2 --- /dev/null +++ b/Week2/homework/js-exercises/index.html @@ -0,0 +1,9 @@ + + + + Favorite Hobbies + + + + + \ No newline at end of file diff --git a/Week2/homework/js-exercises/lemonAlergy.js b/Week2/homework/js-exercises/lemonAlergy.js new file mode 100644 index 000000000..5046adf5d --- /dev/null +++ b/Week2/homework/js-exercises/lemonAlergy.js @@ -0,0 +1,10 @@ +"use strict" + +const fruitBasket = ['Apple', 'Lemon', 'Grapefruit', 'Lemon', 'Banana', 'Watermelon', 'Lemon']; + +function theLemonsOut(fruits){ + let basket = fruits.filter(fruit => fruit !== "Lemon"); //filter to put out the lemons + return basket; +} + +console.log("My mom bought me a fruit basket, containing " + theLemonsOut(fruitBasket)); \ 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..ffe89f846 --- /dev/null +++ b/Week2/homework/js-exercises/mondayWorth.js @@ -0,0 +1,34 @@ +"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 (tasks){ + let hours = tasks + .map(task => task.duration / 60) //map to get an array of tasks duration in hours + .reduce((total,dur) => total + dur , 0); //reduce to sum the working hours + let salary = hours * 25; + return salary; +} + +console.log(mondayWorth(mondayTasks) + " Euros"); + + + + diff --git a/Week2/homework/js-exercises/oddOnesOut.js b/Week2/homework/js-exercises/oddOnesOut.js new file mode 100644 index 000000000..392099f46 --- /dev/null +++ b/Week2/homework/js-exercises/oddOnesOut.js @@ -0,0 +1,10 @@ +"use strict"; +function doubleEvenNumbers(number){ + const newNumbers = number + .filter(num => num % 2 === 0) //use filter to keep only even numbers + .map(num => num * 2); //use map to multiply the evenNumbers + return newNumbers; +} + +const myNumbers = [1, 2, 3, 4]; +console.log(doubleEvenNumbers(myNumbers)); \ No newline at end of file diff --git a/Week2/homework/paper-rock-game/index.html b/Week2/homework/paper-rock-game/index.html new file mode 100644 index 000000000..92d1e80c7 --- /dev/null +++ b/Week2/homework/paper-rock-game/index.html @@ -0,0 +1,39 @@ + + + + + + + Paper Rock Scissors Game + + + + + +
+

Paper - Rock - Scissors Game

+ +
+
Player: 0
+
Computer: 0
+
+
+
Make your selection
+
+
+
+
+
+
+

+ +

+
+
+
+ + + + + + \ No newline at end of file diff --git a/Week2/homework/paper-rock-game/paper-rock.css b/Week2/homework/paper-rock-game/paper-rock.css new file mode 100644 index 000000000..7bba8e3ec --- /dev/null +++ b/Week2/homework/paper-rock-game/paper-rock.css @@ -0,0 +1,113 @@ + .container{ + text-align: center; + font-size: 1.4em; + font-family: sans-serif; + -webkit-touch-callout: none; /* iOS Safari */ + -webkit-user-select: none; /* Safari */ + -khtml-user-select: none; /* Konqueror HTML */ + -moz-user-select: none; /* Old versions of Firefox */ + -ms-user-select: none; /* Internet Explorer/Edge */ + user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */ +} + +i { + font-size: 13em; +} + +button{ + font-size: 0.7em; + margin-bottom: 10px; + background-color: #f2f3f5; + transition: all ease 0.35s; +} + +button:focus{ + outline: none; +} + +#selection{ + margin-bottom: 30px; + margin-top: 35px; +} + +#score div:first-child{ + background-color:#0a38ab; + color: white; +} + +#score div:last-child{ + background-color: black; + color: white; +} + + +/* hovers */ +button:hover{ + color: white; + background-color: #0a38ab; +} + + +/* responsive */ +@media all and (max-width:990px){ + i{ + font-size: 10em; + } +} + +@media all and (max-width:770px){ + i{ + font-size: 6em; + } +} + +@media all and (max-width:420px){ + .container{ + font-size: 0.8em; + } + + button{ + font-size: 0.7em; + } +} + +@media all and (max-width:230px){ + i{ + font-size: 4em; + } +} + + +/* style for result page */ +.result-page{ + background-color: #a8aaad; + opacity: 1; +} + +#result{ + display: none; + position: absolute; + left: 33%; + background-color: white; + padding: 20px; + padding-bottom: 10px; + border-radius: 20px; + box-shadow: 10px 15px 20px; +} + +#result p{ + margin-top: 15px; + font-size: 0.8em; +} + +#result h3{ + color: #09ad35; +} + +@media all and (max-width:574px){ + #result{ + display: none; + position: absolute; + left:0; + } +} diff --git a/Week2/homework/paper-rock-game/paper-rock.js b/Week2/homework/paper-rock-game/paper-rock.js new file mode 100644 index 000000000..6b77ab250 --- /dev/null +++ b/Week2/homework/paper-rock-game/paper-rock.js @@ -0,0 +1,153 @@ +//for main page +let body = document.body; +const rock = document.getElementById("rock-choise"); +const paper = document.getElementById("paper-choise"); +const scissors = document.getElementById("scissors-choise"); +const choises = document.getElementsByClassName("choise"); +const btn = document.querySelector("button"); + +//for result page +let result = document.getElementById("result"); +let playerScore = document.querySelector("#score div:first-child"); +let computerScore = document.querySelector("#score div:last-child"); +let computerChoseIcon = document.querySelector("#result i"); +let resultState = document.querySelector("#result h3"); +let computerChose = document.querySelector("#result p"); + + +//when user click a choise the game begin +for (let i = 0; i < choises.length; i++){ + choises[i].addEventListener("click",() => play(i)); +} + + +//function of the main game +function play(i){ + if (result.style.display !== "block"){ //an if to make sure that user cannot play when result page is on + let userChoise; //keep the choise of the user + if (choises[i] === rock){ + userChoise = "Rock"; + }else if(choises[i] === paper){ + userChoise = "Paper"; + }else{ + userChoise = "Scissors"; + } + let computerChoise = pcChoise(); //keeps the choise of computer + let winner = theWinnerIs(userChoise,computerChoise); //keeps the winner + resultPage(winner,computerChoise); //call the function that shows the result + } +} + + +//makes a random choise for computer +function pcChoise(){ + let rand = Math.random(); + if (rand <= 0.33){ + return "Paper" + }else if (rand <= 0.66){ + return "Rock" + }else{ + return "Scissors" + } +} + + +//find out who the winner is +let scoreForPl = 0; //use to keep and show the score of player +let scoreForPc = 0; //use to keep and show the score of computers + +function theWinnerIs(player,computer){ + let phrase; + if (player === computer){ + phrase = "It's a Draw"; + }else if(player === "Paper"){ + if (computer === "Rock"){ + scoreForPl += 1; + phrase = "You Win"; + }else{ + scoreForPc += 1; + phrase = "You Lose"; + } + }else if (player === "Rock"){ + if (computer === "Paper"){ + scoreForPc += 1; + phrase = "You Lose"; + }else{ + scoreForPl += 1; + phrase = "You Win"; + } + }else{ + if (computer === "Rock"){ + scoreForPc += 1; + phrase = "You Lose"; + }else{ + scoreForPl += 1; + phrase = "You Win"; + } + } + playerScore.innerText ="Player: " + scoreForPl; + computerScore.innerText ="Computer: " + scoreForPc; + return phrase +} + + +//shows the result of the game on a card +function resultPage(winner,computer){ + computerChoseIcon.className = "fas fa-hand-" + computer.toLowerCase(); + computerChose.innerText = "Computer chose " + computer + "..."; + if (winner === "You Win"){ + resultState.style.color = "#09ad35"; + }else if (winner === "You Lose"){ + resultState.style.color = "#d42222"; + }else{ + resultState.style.color = "black"; + } + resultState.innerText = winner; + body.className = "result-page"; + result.style.display = "block"; +} + + +//restart the game when click the button +btn.addEventListener("click",function(){ + scoreForPc = 0; + scoreForPl = 0; + playerScore.innerText = "Player: " + scoreForPl; + computerScore.innerText = "Computer: " + scoreForPc; +}) + + +//if result page is on, after click anywhere, result page disappear +let secondClick = 0; //use for help, cause with first click i want to show result page and with the second disappear it +window.addEventListener("click",function(){ + if (result.style.display === "block" && secondClick === 1){ + result.style.display = "none"; + body.className = ""; + secondClick = 0; + }else if (result.style.display === "block" && secondClick === 0){ + secondClick = 1; + } +}) + +//hover to blue choises, if result page is off +for (let i = 0; i < choises.length; i++){ + choises[i].addEventListener("mouseover",function(){ + if (result.style.display !== "block"){ + choises[i].style.color = "#0a38ab"; + choises[i].style.cursor = "pointer"; + }else{ + choises[i].style.color = "black"; + choises[i].style.cursor = "unset"; + } + }) +} +//turn choises to black when mouseout +for (let i = 0; i < choises.length; i++){ + choises[i].addEventListener("mouseout",function(){ + choises[i].style.color = "black"; + }) +} + + + + diff --git a/Week2/homework/pomodoro-clock/index.html b/Week2/homework/pomodoro-clock/index.html new file mode 100644 index 000000000..af909b696 --- /dev/null +++ b/Week2/homework/pomodoro-clock/index.html @@ -0,0 +1,30 @@ + + + + + + + Pomodoro Clock + + + + + + +
+

Pomodoro Clock

+

Session Length

+ 0 +
+

Session

+

00 : 00

+
+ + +
+ + + + + + \ No newline at end of file diff --git a/Week2/homework/pomodoro-clock/pomodoro.css b/Week2/homework/pomodoro-clock/pomodoro.css new file mode 100644 index 000000000..4ba86ed9b --- /dev/null +++ b/Week2/homework/pomodoro-clock/pomodoro.css @@ -0,0 +1,100 @@ +/* font-family import */ +@import url('https://fonts.googleapis.com/css?family=Ubuntu&display=swap'); + +body{ + font-family: 'Ubuntu', sans-serif; + background-color: #1f555c; + color: white; + -webkit-touch-callout: none; /* iOS Safari */ + -webkit-user-select: none; /* Safari */ + -khtml-user-select: none; /* Konqueror HTML */ + -moz-user-select: none; /* Old versions of Firefox */ + -ms-user-select: none; /* Internet Explorer/Edge */ + user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */ +} + +.container{ + text-align: center; + font-size: 4em; + margin-top: 6%; + font-weight: bold; +} + +h1{ + font-size: 1em; + font-weight: 800; + margin-bottom: 4%; +} + +h2{ + font-size: 0.7em; + margin-bottom: -25px; +} + + +i{ + font-size: 0.55em; +} + +.container div{ + border: solid #13363a 8px; + border-radius: 60px; + width: fit-content; + padding: 10px 50px; + margin-left: auto; + margin-right: auto; + margin-top: 20px; +} + +span{ + margin-left: 10px; + margin-right: 10px; + font-size: 0.7em; +} + +p{ + margin-bottom: 0; + font-weight: 400; + font-size: 1.4em; +} + + +/* responsive */ +@media all and (max-width:423px){ + .container{ + font-size: 3em; + margin-top: 15%; + } +} + +@media all and (max-width:355px){ + .container{ + font-size: 2.5em; + margin-top: 15%; + } + + p{ + font-size: 1em; + margin-top: 15px; + } +} + +@media all and (max-width:273px){ + p{ + font-size: 0.6em; + } + + .container div{ + padding: 10px 30px; + } + + h2{ + margin-bottom: -15px; + } +} + +@media all and (max-width:220px){ + h1{ + font-size: 0.8em; + } +} \ No newline at end of file diff --git a/Week2/homework/pomodoro-clock/pomodoro.js b/Week2/homework/pomodoro-clock/pomodoro.js new file mode 100644 index 000000000..ec880455f --- /dev/null +++ b/Week2/homework/pomodoro-clock/pomodoro.js @@ -0,0 +1,96 @@ +//initialize the basic variables +const arrowUp = document.getElementById("arrow-up"); +const arrowDown = document.getElementById("arrow-down"); +const play = document.getElementById("play"); +const pause = document.getElementById("pause"); +const timer = document.getElementById("timer"); +const sessionLength = document.getElementById("length"); + + +//when click to arrow up or arrow down, I want to increase or decrease the session length and timer +chooseTime = 0; + +arrowUp.addEventListener("click",function(){ + if (timerIsOn === false){ + chooseTime += 1; + sessionLength.innerText = chooseTime; + timer.innerText = chooseTime + " : " + "00"; + } +}) + +arrowDown.addEventListener("click",function(){ + if (timerIsOn === false){ + chooseTime -= 1; + if (chooseTime < 0){ + chooseTime = 0; + } + sessionLength.innerText = chooseTime; + timer.innerText = chooseTime + " : " + "00"; + } +}) + + +/* if mousedown to arrows I want to increase or decrease the session lenght and timer constantly +and stop when the mouseup */ +let increaseConst; +let decreaseConst; + +arrowUp.addEventListener("mousedown",function(){ + if (timerIsOn === false){ + increaseConst = setInterval(function(){ + chooseTime += 1; + sessionLength.innerText = chooseTime; + },300); + } +}) + +arrowUp.addEventListener("mouseup",function(){ + clearInterval(increaseConst); +}) + +arrowDown.addEventListener("mousedown",function(){ + if (timerIsOn === false){ + decreaseConst = setInterval(function(){ + chooseTime -= 1; + if (chooseTime < 0){ + chooseTime = 0; + } + sessionLength.innerText = chooseTime; + },300); + } +}) + +arrowDown.addEventListener("mouseup",function(){ + clearInterval(decreaseConst); +}) + + +// when click play button I want to begin the reverse counting +let reverseCount; +let timeOnSec = 0; +let timerIsOn = false; //use to know if timer counts cause if it's true I want to disable the arrows + +play.addEventListener("click",function(){ + timerIsOn = true; + if((chooseTime + " : " + "00") == timer.innerText){ //I want to continue the reverse count if it's not finished yet + timeOnSec = chooseTime * 60; + } + timer.innerText = Math.floor(timeOnSec / 60) + " : " + timeOnSec % 60; + + reverseCount = setInterval(function(){ + timeOnSec -= 1; + timer.innerText = Math.floor(timeOnSec / 60) + " : " + timeOnSec % 60; + if (timeOnSec === -1){ + timer.innerText = "Time's up!"; + clearInterval(reverseCount); + timerIsOn = false; + } + },1000); +}) + + +//when click pause button I want to stop the reverse counting +pause.addEventListener("click",function(){ + clearInterval(reverseCount); + timerIsOn = false; +}) \ No newline at end of file diff --git a/Week3/.DS_Store b/Week3/.DS_Store new file mode 100644 index 000000000..e1ff11aaf Binary files /dev/null and b/Week3/.DS_Store differ diff --git a/Week3/homework/.DS_Store b/Week3/homework/.DS_Store new file mode 100644 index 000000000..b718413fd Binary files /dev/null and b/Week3/homework/.DS_Store differ diff --git a/Week3/homework/booklist-app/booklist.js b/Week3/homework/booklist-app/booklist.js new file mode 100644 index 000000000..bef122a4c --- /dev/null +++ b/Week3/homework/booklist-app/booklist.js @@ -0,0 +1,130 @@ +//Book constructor: Represent a book +const Book = function (title,author,isbn) { + this.title = title; + this.author = author; + this.isbn = isbn; +} + +//UI object: Handle UI Tasks +const UI = { + displayBooks : function() { + const books = store.getBooks(); + + books.forEach((book) => UI.addBookToList(book)) + } , + + addBookToList : function(book) { + const list = document.getElementById("book-list"); + const row = document.createElement("tr"); + list.appendChild(row); + row.innerHTML = + "" + book.title + "" + + "" + book.author + "" + + "" + book.isbn + "" + + "" + ; + }, + + clearFields : function() { + document.getElementById("title").value = ""; + document.getElementById("author").value = ""; + document.getElementById("isbn").value = ""; + }, + + deleteBook : function(target) { + if (target.classList.contains("delete")) { + target.parentElement.parentElement.remove(); + } + }, + + showAlert : function(message , className) { + const div = document.createElement("div"); + div.className = "alert alert-" + className + " mt-1"; + + const firstForm = document.querySelector(".container div"); + const container = document.querySelector(".container"); + container.insertBefore(div , firstForm); + div.innerText = message; + + //disappear after 2.5sec + setTimeout(() => div.remove(),2500); + } +}; + + +//Store object: Handle storage +const store = { + getBooks : function() { + let books; + if (localStorage.getItem("books") === null){ + books = []; + }else{ + books = JSON.parse(localStorage.getItem("books")); + } + return books + }, + + addBook : function(book) { + const books = store.getBooks(); + books.push(book); + localStorage.setItem("books" , JSON.stringify(books)); + }, + + removeBook : function(isbn) { + const books = store.getBooks(); + + books.forEach((book , index) => { + if (book.isbn === isbn){ + books.splice(index , 1); + } + }) + + localStorage.setItem("books" , JSON.stringify(books)); + } + +} + + +//Event: Display books that are storage +document.addEventListener("DOMContentLoaded",UI.displayBooks); + + +//Event: Add book + //catch the values when submit clicked +document.querySelector("button").addEventListener("click",() => { + const title = document.getElementById("title").value; + const author = document.getElementById("author").value; + const isbn = document.getElementById("isbn").value; + + //validate + if (title === "" || author === "" || isbn === ""){ + UI.showAlert("Please fill the fields..." , "danger"); + }else{ + //create a new book using the Book constructor + const book = new Book(title,author,isbn); + + //Add book to UI + UI.addBookToList(book); + + //Add book to Store + store.addBook(book); + + //show alert that book added successfully + UI.showAlert("The book is added..." , "success"); + + //Clear Fields + UI.clearFields(); + } +}) + +//Event: Remove a book +document.getElementById("book-list").addEventListener("click",(e) => { + //remove from UI + UI.deleteBook(e.target); + + //remove book from store + store.removeBook(e.target.parentElement.previousSibling.innerText); + + //show alert that book removed + UI.showAlert("Book removed..." , "success"); +}); \ No newline at end of file diff --git a/Week3/homework/booklist-app/index.html b/Week3/homework/booklist-app/index.html new file mode 100644 index 000000000..62c529150 --- /dev/null +++ b/Week3/homework/booklist-app/index.html @@ -0,0 +1,54 @@ + + + + + + + Booklist App + + + + + + + +
+
+ +

MyBookList

+
+
+ + +
+
+ + +
+
+ + +
+ + + + + + + + + +
TitleAuthorISBN
+
+ + + + + + \ No newline at end of file diff --git a/Week3/homework/js-exercises/add-six.js b/Week3/homework/js-exercises/add-six.js new file mode 100644 index 000000000..113d1a001 --- /dev/null +++ b/Week3/homework/js-exercises/add-six.js @@ -0,0 +1,13 @@ +"use strict"; + +function createBase(base){ + return function(num){ + console.log(base + num); + } +} +//store the closure in a variable +const addSix = createBase(6); +//call function three times +addSix(9); +addSix(18); +addSix(30); diff --git a/Week3/homework/js-exercises/duplicates-out.js b/Week3/homework/js-exercises/duplicates-out.js new file mode 100644 index 000000000..b59d9d93d --- /dev/null +++ b/Week3/homework/js-exercises/duplicates-out.js @@ -0,0 +1,18 @@ +"use strict"; + +function removeDuplicates(arr){ + for (let i = 0; i < arr.length - 1; i++){ + for (let x = i + 1; x < arr.length; x++){ + if (arr[i] === arr[x]){ + arr[x] = null; + } + } + } + return arr + .filter(letter => letter !== null) + .sort(); +} + +const letters = ['a', 'b', 'c', 'd', 'a', 'e', 'f', 'c', 'b']; + +console.log(removeDuplicates(letters)); \ No newline at end of file diff --git a/Week3/homework/js-exercises/guess-more.js b/Week3/homework/js-exercises/guess-more.js new file mode 100644 index 000000000..dea5d92b2 --- /dev/null +++ b/Week3/homework/js-exercises/guess-more.js @@ -0,0 +1,21 @@ +// Snippet +const x = 9; +function f1(val) { + val = val + 1; + return val; +} +f1(x); +console.log(x); + +const y = { x: 9 }; +function f2(val) { + val.x = val.x + 1; + return val; +} +f2(y); +console.log(y); + +/* At first it will console.log the value of '9'. Thats because the function 'f1' +will return the value of '10' but that is not affect the variable 'x'. +After that it will console.log the object 'y' as 'x : 10' because 'y' is an object +and the value of the key 'x' will change to '10'. */ \ No newline at end of file diff --git a/Week3/homework/js-exercises/guess-the-output.js b/Week3/homework/js-exercises/guess-the-output.js new file mode 100644 index 000000000..477eb4774 --- /dev/null +++ b/Week3/homework/js-exercises/guess-the-output.js @@ -0,0 +1,17 @@ +// Snippet +let a = 10; +const x = (function() { + a = 12; + return function() { + alert(a); + }; +})(); + +x(); + + +/* The 'a' at the begining initialize with '10'. +Inside the function 'x', the 'a' changes to '12' and function 'x' +returns an another function that makes an alert with the value of 'a' and function 'x' +calls this returning function. +So the call of function 'x' will show an alert with the value '12' */ \ No newline at end of file diff --git a/Week3/homework/js-exercises/lottary-machine.js b/Week3/homework/js-exercises/lottary-machine.js new file mode 100644 index 000000000..c4e847d7e --- /dev/null +++ b/Week3/homework/js-exercises/lottary-machine.js @@ -0,0 +1,32 @@ +"use strict"; + +function threeFive(startIndex, stopIndex, threeCallback, fiveCallback) { + const numbers = []; + + // make array + for (let num = startIndex; num <= stopIndex; num++){ + numbers.push(num); + } + + // start at beginning of array and check if you should call threeCallback or fiveCallback or go on to next + numbers.forEach(num => { + if (num % 3 === 0) threeCallback(); + if (num % 5 === 0) fiveCallback(); + }) +} + +//If num divided by 3 +function sayThree(){ + console.log("Three"); +} + +//If num divided by 5 +function sayFive(){ + console.log("Five"); +} + + +threeFive(10, 15, sayThree, sayFive); + +// Should create an array [10,11,12,13,14,15] +// and call sayFive, sayThree, sayThree, sayFive \ No newline at end of file diff --git a/Week3/homework/tip-calculator/index.html b/Week3/homework/tip-calculator/index.html new file mode 100644 index 000000000..f5770c21f --- /dev/null +++ b/Week3/homework/tip-calculator/index.html @@ -0,0 +1,44 @@ + + + + + + + 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/tip-calculator/tip.css b/Week3/homework/tip-calculator/tip.css new file mode 100644 index 000000000..16c6403ef --- /dev/null +++ b/Week3/homework/tip-calculator/tip.css @@ -0,0 +1,92 @@ +body{ + background-image: linear-gradient(to right, #3f1a13 , #6e1409); + font-family: serif; + font-size: 1.5em; + user-select: none; /* supported by Chrome and Opera */ + -webkit-user-select: none; /* Safari */ + -khtml-user-select: none; /* Konqueror HTML */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* Internet Explorer/Edge */ +} + +.calculator{ + margin: 10vh auto 0 auto; + width: fit-content; + padding: 0px 25px 25px 25px; + border: 1px solid black ; + border-radius: 25px; + background-color: white; +} + +h2{ + margin-top: 0; + background-color: black; + color: white; + text-align: center; + margin: 0 -25px; + border-radius: 23px 23px 0 0; + font-weight: 100; + font-size: 1em; + padding: 17px; +} + +input{ + width: 60%; + font-size: 0.7em; + padding: 5px; + outline: none; +} + +select{ + width: 80%; + font-size: 1.2em; + text-align: center; + outline: none; +} + +form:nth-of-type(2){ + text-align: center; +} + +form:nth-of-type(2) p{ + text-align: left; +} + +button{ + background-color: #a75323; + color: white; + font-size: 1.3em; + text-align: center; + margin-top: 35px; + padding: 13px; + outline: none; +} + +.btn{ + text-align: center; +} + +.tip-amount{ + text-align: center; + line-height: 2.5px; +} + + +@media all and (max-width:439px){ + body{ + font-size: 1.2em; + } + + form:nth-of-type(2){ + text-align: left; + } + + select{ + width: 100%; + font-size: 1em; + } + + .calculator{ + margin: 1vh auto 0 auto; + } +} \ No newline at end of file diff --git a/Week3/homework/tip-calculator/tip.js b/Week3/homework/tip-calculator/tip.js new file mode 100644 index 000000000..c71bb9340 --- /dev/null +++ b/Week3/homework/tip-calculator/tip.js @@ -0,0 +1,74 @@ +//constractor function with the three key-value pairs +function Inputs(bill , service , people){ + this.bill = bill; + this.service = service; + this.people = people; +} + + +//UI object with methods that handles the UI tasks +const UI = { + dissapearTipAmount : function(){ + document.querySelector(".tip-amount").style.display = "none"; + }, + + calculate : function(inputs){ + const result = ((inputs.bill * inputs.service) / inputs.people).toFixed(2); + UI.showTipAmount(result , inputs.people); + }, + + showTipAmount : function(result , people){ + document.getElementById("result").innerText = "$ " + result; + document.querySelector(".tip-amount").style.display = "block"; + document.getElementById("each").style.display = "block"; + //if there is only one person dissapear the word "each" from UI + if (people === "1"){ + document.getElementById("each").style.display = "none"; + } + }, + + showAlert : function(){ + alert("Please fill all the fields.."); + }, + + clearFields : function(){ + document.getElementById("bill").value = ""; + document.getElementById("service").value = "0.3"; + document.getElementById("people").value = ""; + } +} + + +//at the begining dissapear the tip-amount +UI.dissapearTipAmount(); + + +//Event: click button 'CALCULATE!' +const btn = document.querySelector("button"); +btn.addEventListener("click" , function(){ + //create an Inputs object + const bill = document.getElementById("bill").value; + const service = document.getElementById("service").value; + const people = document.getElementById("people").value; + + const inputs = new Inputs(bill , service, people); + + //if click button without fill all fields, show an alert that 'must fill all' + if (inputs.bill === "" || inputs.people === ""){ + UI.showAlert(); + }else { + //calculate tip amount-per person and show it + UI.calculate(inputs); + + } +}) + + +//Event: when input to fields then dissapear the result of tip-amount + const calculator = document.querySelector(".calculator"); + calculator.addEventListener("click" , function(e){ + if(e.target.className === "input" && document.querySelector(".tip-amount").style.display === "block") { + UI.dissapearTipAmount(); + UI.clearFields(); + } + }) \ No newline at end of file