diff --git a/Week1/js-exercises/Random-Quote-Generator.css b/Week1/js-exercises/Random-Quote-Generator.css new file mode 100644 index 000000000..82135841d --- /dev/null +++ b/Week1/js-exercises/Random-Quote-Generator.css @@ -0,0 +1,96 @@ +* { + margin: 0px; + padding: 0px; + box-sizing: border-box; +} + +body { + background-color: orange; +} + +.container { + width: 100vh; + height: 50vh; + display: flex; + flex-direction: column; + background-color: white; + margin: auto; + margin-top: 25vh; + justify-content: space-around; +} + +.output-container { + display: flex; + justify-content: flex-start; + align-items: center; +} + +.quote-output { + height: 30vh; + display: flex; + justify-content: flex-start; + align-items: center; + padding: 50px; + font-size: 35px; + color: orange; +} + +.quote-output i { + color: orange; +} + +.writer { + text-align: right; + padding: 25px; + font-size: 25px; + color: orange; + font-weight: bold; +} + +.buttons-wraper { + height: 15vh; +} + +.social-btn { + width: 35px; + height: 40px; + background-color: orange; + float: left; + margin: 10px; + cursor: pointer; +} +.social-btn i { + color: white; + width: 100%; + height: 100%; + padding: 5px; + font-size: 25px; +} + +.gererator { + float: right; + width: 125px; + height: 50px; + background-color: orange; + margin: 15px; + font-size: 15px; + font-weight: bold; + color: white; + cursor: pointer; +} + +.gererator:hover { + + + background-color: red; + + + transform-origin: center; + transform: scale(1.1 , 1.1); + transition: all ease-in-out 0.2s; + } + +.fa-quote-left { + color: orange; + margin: 15px; +} diff --git a/Week1/js-exercises/Random-Quote-Generator.html b/Week1/js-exercises/Random-Quote-Generator.html new file mode 100644 index 000000000..7137c348f --- /dev/null +++ b/Week1/js-exercises/Random-Quote-Generator.html @@ -0,0 +1,36 @@ + + + + + + Random Quote Generator + + + + +
+ +
+ +

+ Click the button , to get a nice Quote +

+
+ +

........

+ +
+ + + +
+
+ + + + diff --git a/Week1/js-exercises/Random-Quote-Generator.js b/Week1/js-exercises/Random-Quote-Generator.js new file mode 100644 index 000000000..9843ffbab --- /dev/null +++ b/Week1/js-exercises/Random-Quote-Generator.js @@ -0,0 +1,49 @@ +// variables + +const outPutField = document.querySelector('.quote-output'); +const button = document.querySelector('.gererator'); +const writerOutput = document.querySelector('.writer'); + +// array of quotes + +const listOfQuote = [ + { + quote: 'How many cares one loses when one decides not to be something but to be someone.', + writer: 'Gabrielle “Coco” Chanel', + }, + { + quote: + 'Be who you are and say what you feel, because those who mind don’t matter and those who matter don’t mind.', + writer: 'Dr. Seuss', + }, + { + quote: 'Do your own thing on your own terms and get what you came here for.', + writer: 'Oliver James', + }, + { quote: 'Flatter yourself critically .', writer: '-Willis Goth Regier' }, + { + quote: 'Do what you feel in your heart to be right, for you’ll be criticized anyway.', + writer: 'Eleanor Roosevelt', + }, + { + quote: + 'Whenever you find yourself on the side of the majority, it is time to pause and reflect.', + writer: 'Mark Twain', + }, +]; + +let printRandomQuote = function() { + // creating a random index, to use it to select a random quote from the array + let randomIndex = Math.floor(Math.random() * listOfQuote.length); + + // assiging the result of the random quote to variabels to use them when appending the result to the html + let quoteOutput = listOfQuote[randomIndex].quote; + let writer = listOfQuote[randomIndex].writer; + + writerOutput.innerText = writer; + outPutField.innerText = quoteOutput; +}; + +// adding our function to the button using addeventlistener method + +button.addEventListener('click', printRandomQuote); diff --git a/Week1/js-exercises/ex1-bookList.html b/Week1/js-exercises/ex1-bookList.html index b3864ac18..e9b295c4f 100644 --- a/Week1/js-exercises/ex1-bookList.html +++ b/Week1/js-exercises/ex1-bookList.html @@ -1,17 +1,16 @@ + + + + Book List + + - - - - Book List - + +

My Book List

+
+ - -

My Book List

-
- -
- - - \ No newline at end of file + + diff --git a/Week1/js-exercises/ex1-bookList.js b/Week1/js-exercises/ex1-bookList.js index 2db54ba5e..da99ba3e1 100644 --- a/Week1/js-exercises/ex1-bookList.js +++ b/Week1/js-exercises/ex1-bookList.js @@ -18,25 +18,53 @@ function createBookList(books) { // your code goes in here, return the ul element + // declaring the Ul element so we will be able to append the other created element to it + let createdUl = document.createElement('ul'); + + // looping through the array of books + for (let book of books) { + // creating a list element for each book + let createdLi = document.createElement('li'); + // chaning the HTML content of each li elemnt according to the data we need + createdLi.innerHTML = `

Title: ${book.title}

Author: ${ + book.author + }

`; + // checking if the key alreadyRead is true so we make the background of that element green, otherwise it will be red + book.alreadyRead ? createdLi.style.backgroundColor = 'green' : createdLi.style.backgroundColor = 'red' + + // last step, appending the created li elements to the ul element which we have declared + + createdUl.appendChild(createdLi); + } + + // outside the scope of the loop , we return the createdUls variable in order to be able to append the function to the container div + + return createdUl; } -const books = [{ +const books = [ + { title: 'The Design of Everyday Things', author: 'Don Norman', - alreadyRead: false + alreadyRead: false, + url: './images/the-design-of-everything.jpg', }, { title: 'The Most Human Human', author: 'Brian Christian', - alreadyRead: true + alreadyRead: true, + url: './images/the-most-human.jpg', }, { title: 'The Pragmatic Programmer', author: 'Andrew Hunt', - alreadyRead: true - } + alreadyRead: true, + url: './images/pragmatic.jpg', + }, ]; +createBookList(books); + let ulElement = createBookList(books); -document.querySelector("#bookList").appendChild(ulElement); \ No newline at end of file +document.querySelector('#bookList').appendChild(ulElement); diff --git a/Week1/js-exercises/ex1-booklist.css b/Week1/js-exercises/ex1-booklist.css new file mode 100644 index 000000000..84ad9ca8d --- /dev/null +++ b/Week1/js-exercises/ex1-booklist.css @@ -0,0 +1,44 @@ +* { + margin: 0px; + padding: 0px; + box-sizing: border-box; +} + +body { + font-family: Arial, Helvetica, sans-serif; +} + +h1 { + margin: 25px auto; + text-align: center; +} + +#bookList { + width: 100%; + height: 100vh; + display: flex; + justify-content: space-around; + align-items: center; +} + +ul { + display: flex; + justify-content: space-between; +} + +ul li { + width: 30%; + height: 600px; + font-weight: bold; + font-size: 20px; + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + color: white; +} + +img { + width: 80%; + height: 50%; +} diff --git a/Week1/js-exercises/ex2-aboutMe.css b/Week1/js-exercises/ex2-aboutMe.css new file mode 100644 index 000000000..cbfed00a4 --- /dev/null +++ b/Week1/js-exercises/ex2-aboutMe.css @@ -0,0 +1,28 @@ +* { + margin: 0px; + padding: 0px; + box-sizing: border-box; +} + +body { + width: 100%; + display: flex; + justify-self: center; + flex-direction: column; +} + +h1 { + text-align: center; +} + +ul { + list-style: none; +} + +ul li { + margin: 5px; + padding: 10px; + font-weight: bold; + color: white; + text-align: center; +} diff --git a/Week1/js-exercises/ex2-aboutMe.html b/Week1/js-exercises/ex2-aboutMe.html index 5e77f49a6..88f73ad40 100644 --- a/Week1/js-exercises/ex2-aboutMe.html +++ b/Week1/js-exercises/ex2-aboutMe.html @@ -1,24 +1,28 @@ + + + About Me - - - About Me + + + + - + +

About Me

- + - -

About Me

- - - - - - - \ No newline at end of file + + + + diff --git a/Week1/js-exercises/ex2-aboutMe.js b/Week1/js-exercises/ex2-aboutMe.js index 2244d7d30..c996fe886 100644 --- a/Week1/js-exercises/ex2-aboutMe.js +++ b/Week1/js-exercises/ex2-aboutMe.js @@ -8,4 +8,31 @@ 4. Iterate through each li and change the class to "list-item". 5. See HTML 6. Create a new img element and set its src attribute to a picture of you.Append that element to the page. - */ \ No newline at end of file + */ + +//variables +const body = document.querySelector('body'); +const nickName = document.getElementById('nickname'); +const favoriteFood = document.getElementById('fav-food'); +const homeTown = document.getElementById('hometown'); +const listItems = document.querySelectorAll('ul li'); + +// DOM manipulation +body.style.fontFamily = 'Arial, sans-serif'; + +nickName.innerText = 'Tarek Aljabr'; +favoriteFood.innerText = 'Fish'; +homeTown.innerText = 'Syria'; + +// iterating the list to add class 'list-item' + +listItems.forEach(item => (item.className = 'list-item')); + +// creating img element and append it to the page + +const myImage = document.createElement('img'); + +myImage.src = './images/myPhoto.jpg'; +myImage.style.margin = 'auto'; + +body.appendChild(myImage); diff --git a/Week1/js-exercises/ex3-hijackLogo.js b/Week1/js-exercises/ex3-hijackLogo.js index 5ca291435..d60ed11d1 100644 --- a/Week1/js-exercises/ex3-hijackLogo.js +++ b/Week1/js-exercises/ex3-hijackLogo.js @@ -14,6 +14,17 @@ function hijackGoogleLogo() { // your code goes in here + // finding the logo image + let CurrentLogo = document.getElementById('hplogo'); + // finding the parent of the image + let logoContainer = CurrentLogo.parentElement; + // creating the image element to be the new logo + let newLogo = document.createElement('img'); + newLogo.src = 'https://www.hackyourfuture.dk/static/logo-dark.svg'; + // removing the current logo + logoContainer.removeChild(CurrentLogo); + //appending the new logo + logoContainer.appendChild(newLogo); } -hijackGoogleLogo(); \ No newline at end of file +hijackGoogleLogo(); diff --git a/Week1/js-exercises/ex4-whatsTheTime.css b/Week1/js-exercises/ex4-whatsTheTime.css new file mode 100644 index 000000000..30c7ea51a --- /dev/null +++ b/Week1/js-exercises/ex4-whatsTheTime.css @@ -0,0 +1,61 @@ +* { + margin: 0px; + padding: 0px; + box-sizing: border-box; +} + +body { + height: 1000px; + display: flex; + flex-direction: column; + align-items: center; + background-color: rgb(77, 77, 77); +} + +.clock-container { + margin-top: 50px; + width: 350px; + height: 350px; + background-image: url(./images/clock-background.png); + + background-position: center; + border-radius: 50% 50%; + margin: auto; + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.hand { + width: 100px; + height: 5px; + background-color: red; + position: absolute; + top: calc(50%); + left: calc(50% - 100px); + transform: rotateZ(90deg); + transform-origin: 100%; + + transition: cubic-bezier(0, -1.83, 0, 1.6); +} + +.hours-hand { + height: 6px; + width: 70px; + left: calc(50% - 70px); + transition: ease-in-out; +} + +.min-hand { + height: 4px; + width: 100px; + left: calc(50% - 100px); +} + +.sec-hand { + height: 2px; + width: 125px; + left: calc(50% - 125px); +} diff --git a/Week1/js-exercises/ex4-whatsTheTime.html b/Week1/js-exercises/ex4-whatsTheTime.html index 2c357e7cd..a7d86ed30 100644 --- a/Week1/js-exercises/ex4-whatsTheTime.html +++ b/Week1/js-exercises/ex4-whatsTheTime.html @@ -1,4 +1,25 @@ \ No newline at end of file +--> + + + + + + + Clock + + + +
+
+
+
+
+
+
+ + + + diff --git a/Week1/js-exercises/ex4-whatsTheTime.js b/Week1/js-exercises/ex4-whatsTheTime.js index 4024c1016..a87d6a6d1 100644 --- a/Week1/js-exercises/ex4-whatsTheTime.js +++ b/Week1/js-exercises/ex4-whatsTheTime.js @@ -11,8 +11,59 @@ */ -function displayCurrentTime() { - // your code goes in here +('use strict'); +// variables +const hoursHand = document.querySelector('.hours-hand'); +const minHand = document.querySelector('.min-hand'); +const secHand = document.querySelector('.sec-hand'); +const timer = document.createElement('h1'); +const container = document.querySelector('.clock-container'); + + // styling the output + timer.style.marginTop = '500px'; + timer.style.color = 'red'; + timer.style.padding = '5px'; + timer.style.background = 'yellow'; + +// declaring updateTime function, to get the time in hours , minutes and secondes , and adding the animation to the clock's hand +function updateTime() { + // getting the information + + const timeNow = new Date(); + const minutes = timeNow.getMinutes(); + const seconds = timeNow.getSeconds(); + const hours = timeNow.getHours(); + + // getting the right degrees for each hand + const secondsDegree = (seconds / 60) * 360 + 90; + const minutesDegree = (minutes / 60) * 360 + 90; + const hoursDegree = (hours / 12) * 360 + 105; + // animation + secHand.style.transform = ` rotateZ(${secondsDegree}deg) `; + minHand.style.transform = ` rotateZ(${minutesDegree}deg) `; + hoursHand.style.transform = ` rotateZ(${hoursDegree}deg) `; + // changing the inner HTML of timer element to print the reslut + timer.innerText = ` ${hours} : ${minutes} : ${seconds} `; + // checking if the seconds and minutes contain only 1 number so we add 0 to prevent getting something like 20:15:5 + if (seconds.toString().length === 1) { + timer.innerText = ` ${hours} : ${minutes} : ${seconds.toString().padStart(2,0)} ` + } if (minutes.toString().length === 1) { + timer.innerText = ` ${hours} : ${minutes.toString().padStart(2,0)} : ${seconds} `; + } if (hours.toString().length === 1) { + timer.innerText = ` ${hours.toString().padStart(2,0)} : ${minutes} : ${seconds} `; + } + + + container.appendChild(timer); + // using setÍnterval function to update our function every 1 sec + +} + +// excuting the function updTime only when DomContent is Loaded + +function settingInterval(){ + setInterval(updateTime, 1000) + } -setInterval(displayCurrentTime, 1000); \ No newline at end of file +window.addEventListener('DOMContentLoaded', settingInterval ); diff --git a/Week1/js-exercises/ex5-catWalk.js b/Week1/js-exercises/ex5-catWalk.js index 309eca0eb..5a78692d2 100644 --- a/Week1/js-exercises/ex5-catWalk.js +++ b/Week1/js-exercises/ex5-catWalk.js @@ -10,4 +10,50 @@ 5. When the cat reaches the right - hand of the screen, restart them at the left hand side("0px").So they should keep walking from left to right across the screen, forever and ever. 6. When the cat reaches the middle of the screen, replace the img with an image of a cat dancing(use this URL: https: //tenor.com/StFI.gif), keep it dancing for 5 seconds, and then replace the img with the original image and have it continue the walk. -*/ \ No newline at end of file +*/ + +// variabels +const image = document.querySelector('img'); +const body = document.querySelector('body'); +let startWalking = setInterval(catWalk, 50); +// the first position of the cat is 0 +image.style.transform = 'translateX(0px)'; + +function catWalk() { + + // everytime the function excutes it will move the image 10px to the right + image.style.transform += 'translateX(10px)'; + // getting the length of the cat photo to add to the whole pixels to make sure that the cat will stay on the page + const catWidth = image.width; + // getting the full width of the page to keep the cat moving inside it + let fullWidth = document.body.clientWidth; + // the currnet position on X of the cat + let currentPosition = image.getBoundingClientRect().x; + //getting the half of the whole width to make the cat dances when it reaches the middle of the page + let middleOfPage = Math.floor((fullWidth - catWidth) / 2); + // checking if the current position of the cat + the cat lenght is greater than the body, then reset the translateX to 0, so its start from the begining + if (currentPosition + catWidth >= fullWidth) { + image.style.transform = 'translateX(0px)'; + console.log('tes'); + } + // because we don't know exactly the width of the whole page, i made the condition in range of 10 pix + the middle of the page, in this way the condition will be + // true only once every loop ..... (ps: i know there must be a better way but i spend already 2 days and couldn't find another solution, + // i saw cats running and trying to kill me in my dreams :xD + //i was super happy cause i could make it work ) + // if there is a way to make this codition more specific and dynamic , i can't wait until i hear it. + + if (currentPosition >= middleOfPage && currentPosition <= middleOfPage + 10) { + // changing the image from walking cat to a dancing cat + image.src = + 'https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif?itemid=10561424'; + // clearing the interval so the cat will not move anymore + clearInterval(startWalking); + // calling the function walkAgain which will excute the same old interval so the cat will move again but after 5 sec. + setTimeout(walkAgain, 5000); + + function walkAgain() { + image.src = 'http://www.anniemation.com/clip_art/images/cat-walk.gif' + startWalking = setInterval(catWalk, 50); + } + } +} diff --git a/Week1/js-exercises/images/clock-background.png b/Week1/js-exercises/images/clock-background.png new file mode 100644 index 000000000..941d4ad31 Binary files /dev/null and b/Week1/js-exercises/images/clock-background.png differ diff --git a/Week1/js-exercises/images/myPhoto.JPG b/Week1/js-exercises/images/myPhoto.JPG new file mode 100644 index 000000000..a7ffc793e Binary files /dev/null and b/Week1/js-exercises/images/myPhoto.JPG differ diff --git a/Week1/js-exercises/images/pragmatic.jpg b/Week1/js-exercises/images/pragmatic.jpg new file mode 100644 index 000000000..5168b14a9 Binary files /dev/null and b/Week1/js-exercises/images/pragmatic.jpg differ diff --git a/Week1/js-exercises/images/randomquotegenerator.png b/Week1/js-exercises/images/randomquotegenerator.png new file mode 100644 index 000000000..0c1015b39 Binary files /dev/null and b/Week1/js-exercises/images/randomquotegenerator.png differ diff --git a/Week1/js-exercises/images/the-design-of-everything.jpg b/Week1/js-exercises/images/the-design-of-everything.jpg new file mode 100644 index 000000000..52022af98 Binary files /dev/null and b/Week1/js-exercises/images/the-design-of-everything.jpg differ diff --git a/Week1/js-exercises/images/the-most-human.jpg b/Week1/js-exercises/images/the-most-human.jpg new file mode 100644 index 000000000..ce42e767d Binary files /dev/null and b/Week1/js-exercises/images/the-most-human.jpg differ diff --git a/Week2/js-exercises/ex1-oddOnesOut.js b/Week2/js-exercises/ex1-oddOnesOut.js index 4f42050ac..96c5cd18c 100644 --- a/Week2/js-exercises/ex1-oddOnesOut.js +++ b/Week2/js-exercises/ex1-oddOnesOut.js @@ -17,5 +17,13 @@ function doubleEvenNumbers(numbers) { return newNumbers; } -const myNumbers = [1, 2, 3, 4]; -console.log(doubleEvenNumbers(myNumbers)); // Logs "[4, 8]" to the console \ No newline at end of file +const myNumbers = [1, 2, 3, 4 ]; +console.log(doubleEvenNumbers(myNumbers)); // Logs "[4, 8]" to the console + + +// we can use the filter method to get an array of all elements which fulfill the condition, then we use map method to modify those elements by multiply them by 2 !! + + +const newNumbers2 = myNumbers.filter(num => num % 2 === 0).map(num => num * 2); + +console.log(newNumbers2) \ No newline at end of file diff --git a/Week2/js-exercises/ex2-whatsYourMondayWorth.js b/Week2/js-exercises/ex2-whatsYourMondayWorth.js index 47cea70ba..4f7bb4bb6 100644 --- a/Week2/js-exercises/ex2-whatsYourMondayWorth.js +++ b/Week2/js-exercises/ex2-whatsYourMondayWorth.js @@ -11,12 +11,36 @@ */ - function dayWorth(tasks, hourlyRate) { // put your code in here, the function does returns a euro formatted string + // using every method to make the condition to make sure that the objects in the array have property : duration && this property value's is a number !! + const isDuration = tasks.every( + task => task.hasOwnProperty('duration') === true && typeof task.duration === 'number', + ); + // usuing the result of the every method + // if the objects in the arrays doesn't have property : duration or the value of this property is not a nubmer === >log this in a message + if (!isDuration) { + return console.log( + 'Objects in the array should have property : duration!!! && the value of this property must be number!!!! ', + ); + // else if all the objects in the array have property : duration && the value of this property is a nubmer =====> do this : + } else { + // usuing map method to create an array includes all the duration of all tasks in one array; + const durationInMinutes = tasks.map(task => task.duration); + // using reduce method to get the total of all durations in the new array + const totalMinutesWorked = durationInMinutes.reduce((x, y) => x + y); + // to get the total hours, we divide the total minutes by 60 so we get how many worked hours on monday then we multiply it by the hours rate ! + + const totalHours = totalMinutesWorked / 60; + + let result = totalHours * hourlyRate; + + return ` € ${result.toFixed(2)} `; + } } -const mondayTasks = [{ +const mondayTasks = [ + { name: 'Daily standup', duration: 30, // specified in minutes }, @@ -34,5 +58,5 @@ const mondayTasks = [{ }, ]; -console.log(dayWorth(mondayTasks, 25)) -console.log(dayWorth(mondayTasks, 13.37)) \ No newline at end of file +console.log(dayWorth(mondayTasks, 25)); +console.log(dayWorth(mondayTasks, 13.37)); diff --git a/Week2/js-exercises/ex3-lemonAllergy.js b/Week2/js-exercises/ex3-lemonAllergy.js index 54ac8da04..767b0e07c 100644 --- a/Week2/js-exercises/ex3-lemonAllergy.js +++ b/Week2/js-exercises/ex3-lemonAllergy.js @@ -14,6 +14,13 @@ function takeOutLemons(basket) { // your code goes in here. The output is a string + // creating a new array includes all elements except Lemon . used toLowerCase method to exclude lemon with small letter also . + const filterdBasket = basket.filter(fruit => fruit.toLowerCase() !== 'lemon') + // declaring the outputString variable and using join method to have spaces between the filterbasket array's elemnts. + let outputString = `My mom bought me a fruit basket, containing : ${filterdBasket.join(' ')}` + + return outputString ; + } const fruitBasket = ['Apple', 'Lemon', 'Grapefruit', 'Lemon', 'Banana', 'Watermelon', 'Lemon']; diff --git a/Week2/js-exercises/ex4-collectiveAge.js b/Week2/js-exercises/ex4-collectiveAge.js index d17275cdc..4cb94c84a 100644 --- a/Week2/js-exercises/ex4-collectiveAge.js +++ b/Week2/js-exercises/ex4-collectiveAge.js @@ -6,10 +6,17 @@ Write a function that calculates the combined age of every member Avoid using for loop or forEach. + */ function collectiveAge(people) { // return the sum of age for all the people + // creating array includes all ages + const ages = people.map(x => x.age); + // using reduce to get the total of all ages in the array + let totalAges = ages.reduce((x,y) => x + y , 0) + + return totalAges; } const hackYourFutureMembers = [{ @@ -30,4 +37,4 @@ const hackYourFutureMembers = [{ }, ]; -console.log("The collective age of the HYF team is: " + collectiveMembers(hackYourFutureMembers)); \ No newline at end of file +console.log("The collective age of the HYF team is: " + collectiveAge(hackYourFutureMembers)); \ No newline at end of file diff --git a/Week2/js-exercises/ex5-myFavoriteHobbies.html b/Week2/js-exercises/ex5-myFavoriteHobbies.html index 06ab17d45..05e4593a7 100644 --- a/Week2/js-exercises/ex5-myFavoriteHobbies.html +++ b/Week2/js-exercises/ex5-myFavoriteHobbies.html @@ -1,5 +1,19 @@ - - + + + + + + + + Hobbies + + + + + + + + + - \ No newline at end of file diff --git a/Week2/js-exercises/ex5-myFavoriteHobbies.js b/Week2/js-exercises/ex5-myFavoriteHobbies.js index 289c68380..4cfa929c4 100644 --- a/Week2/js-exercises/ex5-myFavoriteHobbies.js +++ b/Week2/js-exercises/ex5-myFavoriteHobbies.js @@ -10,6 +10,19 @@ function createHTMLList(arr) { // your code goes in here + // creating h1 elemnt to out put the hobbies in html page && the list which will hold the hobbies as items in this list + let h1 = document.createElement('h1'); + h1.innerText = 'My hobbies'; + document.body.appendChild(h1); + let hobbiesList = document.createElement('ul'); + + // looping through the array, create li for each elemnt and append the result to the unorderedlist + arr.map(hobby => { + let itemOfList = document.createElement('li'); + itemOfList.innerText = hobby; + document.body.appendChild(hobbiesList); + hobbiesList.appendChild(itemOfList); + }); } const myHobbies = [ @@ -18,4 +31,6 @@ const myHobbies = [ 'Programming', 'Hanging out with friends', 'Going to the gym', -]; \ No newline at end of file +]; + +createHTMLList(myHobbies); diff --git a/Week2/project/index.html b/Week2/project/index.html index 664b242d3..208a4a798 100644 --- a/Week2/project/index.html +++ b/Week2/project/index.html @@ -1,17 +1,41 @@ + + + + Pomodoro Clock + + + + - - - - Pomodoro Clock - + +
+

Pomodoro Clock

- -
+

Session Length

+
+ +

25

-
- - + +
+
+

Session

+

25:00

+
- \ No newline at end of file +
+ + + +
+
+ + + diff --git a/Week2/project/index.js b/Week2/project/index.js index 5b306f0f2..ca7c46b9d 100644 --- a/Week2/project/index.js +++ b/Week2/project/index.js @@ -7,4 +7,137 @@ Display minutes and seconds If the timer finishes the timer should be replaced by the message: Time 's up! * - */ \ No newline at end of file + */ + +// variables +const upButton = document.querySelector('.increase-length'); +const downButton = document.querySelector('.decrease-length'); +const timeSelected = document.querySelector('.length-output'); +const timerOutput = document.querySelector('.timer-output '); +const play = document.querySelector('.play'); +const pause = document.querySelector('.pause'); +const stop = document.querySelector('.stop'); +let counting = false; +// defualt timer's values +let startingMinutes = parseInt(timeSelected.innerText); +let time = startingMinutes * 60; +// default pause button color is red , cause the timer is not on yet +pause.style.backgroundColor = 'red'; + +//------------------------------------------------------------- + +// functions +// keeps the selected time always updated +function updateTimeSelected() { + startingMinutes = parseInt(timeSelected.innerText); + time = startingMinutes * 60; + let minutes = Math.floor(time / 60); + let sec = time % 60; + timerOutput.innerHTML = ` ${minutes.toString().padStart(2, 0)}:${sec.toString().padStart(2, 0)} `; +} +// this function will disable the buttons and give them red background color to let the user knows he can't use them while the counting is on +function disableButtons() { + upButton.removeEventListener('click', addingMinute); + upButton.style.backgroundColor = 'red'; + downButton.style.backgroundColor = 'red'; + downButton.removeEventListener('click', substractMinute); + play.style.backgroundColor = 'red'; + pause.style.backgroundColor = 'transparent'; +} +// this function will enable the buttons and return thier default background color to let user knows he can use them again +function enableButtons() { + upButton.addEventListener('click', addingMinute); + upButton.style.backgroundColor = 'transparent'; + downButton.style.backgroundColor = 'transparent'; + downButton.addEventListener('click', substractMinute); + play.style.backgroundColor = 'transparent'; + pause.style.backgroundColor = 'red'; +} + +function addingMinute() { + // this function adds one minute to the timer selector and updates the timer value + timeSelected.innerText = parseInt(timeSelected.innerText) + 1; + + // after changing the selected time, we call updatetime function to update the timer. + updateTimeSelected(); + // max minutes allowed is 50 if the users tried to select 50 or more it will reset to 25 + if (timeSelected.innerText >= 50) { + timeSelected.innerText = 25; + timerOutput.innerText = ` ${timeSelected.innerText}:00 `; + } +} + +function substractMinute() { + // this function substract one minute from the time selector. + timeSelected.innerText = parseInt(timeSelected.innerText) - 1; + + // after changing the selected time, we call updatetime function to update it + updateTimeSelected(); + // minmum minutes allowed is 50 if the users tried to select 50 or more it will reset to 25 + if (timeSelected.innerText <= 0) { + timeSelected.innerText = 25; + timerOutput.innerText = ` ${timeSelected.innerText}:00 `; + } +} + +function playingAndUpdating() { + //checking if counting already is on or not, if not then do this ===> : + if (!counting) { + // counting now is on ===> true + counting = true; + // making the buttons disable while the counting is on + disableButtons(); + + // setting the interval which will be the counter, it will decrement every 1 second + let starting = setInterval(() => { + time--; + let minutes = Math.floor(time / 60); + let sec = time % 60; + timeSelected.innerText = ` ${minutes} `; + timerOutput.innerHTML = ` ${minutes}:${sec} `; + // checking when the seconds or the minutes is only one number then we add 0 before the number + if (minutes.toString().length === 1) { + timerOutput.innerHTML = ` ${minutes.toString().padStart(2, 0)}:${sec} `; + } + if (sec.toString().length === 1) { + timerOutput.innerHTML = ` ${minutes}:${sec.toString().padStart(2, 0)} `; + } + // adding an event to the pause button to stop the interval when it's clicked + pause.addEventListener('click', function() { + counting = false; + clearInterval(starting); + // making the buttons to increase and decrease time and play enabled again + enableButtons(); + }); + // adding reset function + stop.addEventListener('click', function() { + counting = false; + clearInterval(starting); + // making the buttons to increase and decrease time and play enabled again + enableButtons(); + + timeSelected.innerText = `${startingMinutes}`; + timerOutput.innerHTML = `${startingMinutes}:00`; + updateTimeSelected(); + }); + + // when timer ends and reachs 0 then it will print Time's Up message for 2 seconds then it will reset the timer to 25 !! + if (minutes === 0 && sec === 0) { + timerOutput.innerHTML = "Times's Up!"; + clearInterval(starting); + // reseting the timer value to 25 after 2 seconds + setTimeout(function() { + counting = false; + timeSelected.innerText = 25; + updateTimeSelected(); + // making the buttons to increase and decrease time and play enabled again + enableButtons(); + }, 2000); + } + }, 1000); + } +} + +upButton.addEventListener('click', addingMinute); +downButton.addEventListener('click', substractMinute); +play.addEventListener('click', playingAndUpdating); diff --git a/Week2/project/style.css b/Week2/project/style.css new file mode 100644 index 000000000..152a4722e --- /dev/null +++ b/Week2/project/style.css @@ -0,0 +1,93 @@ +* { + padding: 0px; + margin: 0px; + box-sizing: border-box; + font-family: 'Orbitron', sans-serif; +} + +body { + background-color: #1e555c; +} + +#app { + width: 65%; + height: 80vh; + margin: auto; + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + margin-top: 90px; + border: 8px solid #12292c; + border-radius: 100px; +} + +h1 { + color: white; + font-size: 50px; + margin-top: 50px; + max-width: 50%; +} + +.session-length { + margin-top: 80px; +} + +p { + color: white; + font-size: 40px; + align-self: center; +} + +.length-selectors-wrapper { + width: 15%; + display: flex; + flex-direction: row; + justify-content: space-evenly; + margin-bottom: 50px; +} + +.length-selectors-wrapper button { + background-color: transparent; + width: 50px; + height: 75px; +} + +i { + color: white; + font-size: 45px; + cursor: pointer; +} + +.timer-output-wrapper { + width: 40%; + height: 250px; + background-color: #274c52; + border: 12px solid #10272b; + border-radius: 20%; + display: flex; + justify-content: space-evenly; + flex-direction: column; +} + +.session { + font-size: 50px; +} + +.timer-output { + font-size: 50px; +} + +.control-button-wrapper { + width: 20%; + height: 60px; + display: flex; + justify-content: space-around; + align-content: center; +} + +.control-button-wrapper button { + background-color: transparent; + width: 70px; + height: 60px; +}