diff --git a/.DS_Store b/.DS_Store index 19f35c2d4..799c40e19 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..2f9df318e Binary files /dev/null and b/Week1/.DS_Store differ diff --git a/Week1/js-exercises/.DS_Store b/Week1/js-exercises/.DS_Store new file mode 100644 index 000000000..436ba4771 Binary files /dev/null and b/Week1/js-exercises/.DS_Store differ diff --git a/Week1/js-exercises/.Rhistory b/Week1/js-exercises/.Rhistory new file mode 100644 index 000000000..e69de29bb diff --git a/Week1/js-exercises/ex1-bookList.html b/Week1/js-exercises/ex1-bookList.html index b3864ac18..22837bd17 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

-
- -
- - - \ No newline at end of file + +

My Book List

+
+ +
+ + + diff --git a/Week1/js-exercises/ex1-bookList.js b/Week1/js-exercises/ex1-bookList.js index 2db54ba5e..3f98e0451 100644 --- a/Week1/js-exercises/ex1-bookList.js +++ b/Week1/js-exercises/ex1-bookList.js @@ -18,25 +18,63 @@ function createBookList(books) { // your code goes in here, return the ul element + + const ulElement = document.createElement('ul'); + const bookList = document.getElementById('bookList'); + const header = document.querySelector('h1'); + header.style.textAlign = 'center'; + + bookList.appendChild(ulElement); + + for (let i = 0; i < books.length; i++) { + const book = books[i]; + const bookLi = document.createElement('li'); + const p = document.createElement('p'); + + p.textContent = book.title + ' - ' + book.author; + if (book.alreadyRead === false) { + bookLi.style.backgroundColor = 'red'; + } else { + bookLi.style.backgroundColor = 'green'; + } + const image = document.createElement('img'); + + image.setAttribute('src', book.imgURL); + image.setAttribute('width', '150'); + image.setAttribute('height', '200'); + image.style.display = 'block'; + image.style.margin = 'auto'; + bookLi.style.listStyle = 'none'; + bookLi.style.width = '30%'; + bookLi.style.display = 'inline-block'; + bookLi.style.margin = '1em'; + p.style.textAlign = 'center'; + bookLi.appendChild(image); + ulElement.appendChild(bookLi); + bookLi.appendChild(p); + } } -const books = [{ +const books = [ + { title: 'The Design of Everyday Things', author: 'Don Norman', - alreadyRead: false + alreadyRead: false, + imgURL: 'https://miro.medium.com/max/500/1*Qo27inBKBKY4Q4Pgk5KkbQ.png', }, { title: 'The Most Human Human', author: 'Brian Christian', - alreadyRead: true + alreadyRead: true, + imgURL: + 'https://images-na.ssl-images-amazon.com/images/I/41m1rQjm5tL._SX322_BO1,204,203,200_.jpg', }, { title: 'The Pragmatic Programmer', author: 'Andrew Hunt', - alreadyRead: true - } + alreadyRead: true, + imgURL: + 'https://images-na.ssl-images-amazon.com/images/I/418M2053aNL._SX396_BO1,204,203,200_.jpg', + }, ]; - -let ulElement = createBookList(books); - -document.querySelector("#bookList").appendChild(ulElement); \ No newline at end of file +const ulElement = createBookList(books); diff --git a/Week1/js-exercises/ex2-aboutMe.html b/Week1/js-exercises/ex2-aboutMe.html index 5e77f49a6..dd1cf58da 100644 --- a/Week1/js-exercises/ex2-aboutMe.html +++ b/Week1/js-exercises/ex2-aboutMe.html @@ -1,24 +1,27 @@ + + + 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..2487d186f 100644 --- a/Week1/js-exercises/ex2-aboutMe.js +++ b/Week1/js-exercises/ex2-aboutMe.js @@ -8,4 +8,21 @@ 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 + */ +document.querySelector('body').style.fontFamily = 'arial, sans-serif'; +document.getElementById('nickname').textContent = 'Obi'; +document.getElementById('fav-food').textContent = 'Mlokhia'; +document.getElementById('hometown').textContent = 'Jableh'; +// const list = document.getElementsByTagName('ul'); +const listItem = document.querySelectorAll('li'); +for (i = 0; i < listItem.length; i++) { + listItem[i].classList.add('list-item'); +} + +const image = document.createElement('img'); +image.setAttribute( + 'src', + 'https://lh3.googleusercontent.com/VS3TUXwHJ76hz7elaV21G2QuRNISmOZsa97OU5uu3jBdktsQ6qrir_oX-VgTQJtidj2dYa3b8QP9dVEWCFzkYZaBTNPKjq2tdmmKU3LN9TkOqZcb5LrBdqWSTUIEz0sMVivfJ-FsV7U=w2400', +); +image.setAttribute('width', '400'); +document.body.appendChild(image); diff --git a/Week1/js-exercises/ex3-hijackLogo.js b/Week1/js-exercises/ex3-hijackLogo.js index 5ca291435..fc4609195 100644 --- a/Week1/js-exercises/ex3-hijackLogo.js +++ b/Week1/js-exercises/ex3-hijackLogo.js @@ -14,6 +14,9 @@ function hijackGoogleLogo() { // your code goes in here + const googleLogo = document.getElementById('hplogo'); + googleLogo.setAttribute('src', 'https://www.hackyourfuture.dk/static/logo-dark.svg'); + googleLogo.setAttribute('srcset', 'https://www.hackyourfuture.dk/static/logo-dark.svg'); } -hijackGoogleLogo(); \ No newline at end of file +hijackGoogleLogo(); diff --git a/Week1/js-exercises/ex4-whatsTheTime.html b/Week1/js-exercises/ex4-whatsTheTime.html index 2c357e7cd..9293254d5 100644 --- a/Week1/js-exercises/ex4-whatsTheTime.html +++ b/Week1/js-exercises/ex4-whatsTheTime.html @@ -1,4 +1,15 @@ \ No newline at end of file +--> + + + + + + What's the time + + + + + diff --git a/Week1/js-exercises/ex4-whatsTheTime.js b/Week1/js-exercises/ex4-whatsTheTime.js index 4024c1016..9e7010ca6 100644 --- a/Week1/js-exercises/ex4-whatsTheTime.js +++ b/Week1/js-exercises/ex4-whatsTheTime.js @@ -10,9 +10,15 @@ 4. Have the function execute when it 's loading in the browser */ - +document.addEventListener('DOMContentLoaded', displayCurrentTime); function displayCurrentTime() { // your code goes in here + const day = new Date(); + + const currentTime = day.toLocaleTimeString(); + + const body = document.querySelector('body'); + body.innerHTML = currentTime; } -setInterval(displayCurrentTime, 1000); \ No newline at end of file +setInterval(displayCurrentTime, 1000); diff --git a/Week1/js-exercises/ex5-catWalk.html b/Week1/js-exercises/ex5-catWalk.html index 0f04792f7..b888aa0d0 100644 --- a/Week1/js-exercises/ex5-catWalk.html +++ b/Week1/js-exercises/ex5-catWalk.html @@ -1,15 +1,16 @@ + + + Cat Walk + - - - Cat Walk - + + - - - - - - - \ No newline at end of file + + + diff --git a/Week1/js-exercises/ex5-catWalk.js b/Week1/js-exercises/ex5-catWalk.js index 309eca0eb..f7a15d7bf 100644 --- a/Week1/js-exercises/ex5-catWalk.js +++ b/Week1/js-exercises/ex5-catWalk.js @@ -10,4 +10,42 @@ 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 +*/ +// debugger; +let leftPos = 0, + interval; +const catImg = document.querySelector('img'); +const halfWidth = (window.innerWidth - catImg.width) / 2; +const body = document.querySelector('body'); +const stepLength = 10; + +function catWalk() { + if (leftPos < halfWidth) { + catImg.style.left = leftPos + 'px'; + leftPos += stepLength; + } + + // Couldn't figure out how to make this happen at exactly the middle of the screen ! + if (leftPos == Math.ceil(halfWidth / 10) * 10) { + console.log('middle'); + clearInterval(interval); + + catImg.src = 'https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif'; + + setTimeout(() => { + catImg.src = 'http://www.anniemation.com/clip_art/images/cat-walk.gif'; + + interval = setInterval(catWalk, 50); + }, 5000); + } + if (leftPos > halfWidth && leftPos < window.innerWidth) { + catImg.style.left = leftPos + 'px'; + leftPos += stepLength; + } + if (leftPos > window.innerWidth) { + leftPos = 0; + } +} + +interval = setInterval(catWalk, 50); +catWalk(); diff --git a/Week1/project/index.css b/Week1/project/index.css index e69de29bb..8b86535d8 100644 --- a/Week1/project/index.css +++ b/Week1/project/index.css @@ -0,0 +1,99 @@ +@import url('https://fonts.googleapis.com/css2?family=Lobster+Two:wght@400;700&family=Ubuntu:wght@300;400;500;700&display=swap'); +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Ubuntu', sans-serif; +} +body { + background-color: #22313f; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} +.quote-wrapper { + width: 450px; + height: 370px; + margin: 0 10px; +} + +.quote-heading { + text-align: center; + margin-bottom: 30px; +} + +.quote-heading h2 { + font-family: 'Lobster Two', cursive; + font-weight: 400; + color: #fff; +} + +.quote-body { + width: 100%; + height: 220px; + padding: 50px 35px; + background-color: #fff; + border-radius: 5px; +} + +.icon-quote { + text-align: center; + font-size: 18px; + color: #747d8c; + height: 42px; + overflow: auto; +} + +.icon { + margin-right: 10px; +} + +.author { + text-align: right; + margin-top: 15px; +} + +.quote-buttons { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 12px; + border-top: 1px solid #93a0ac; + padding: 7px 0; +} + +.social a { + font-size: 40px; + color: #455261; + transition: 0.3s ease; +} + +.social a:hover { + color: #00acee; +} + +.btn button { + border: none; + outline: none; + padding: 10px 15px; + background-color: #455261; + color: #fff; + border-radius: 5px; + font-size: 16px; + cursor: pointer; +} + +.quote-buttons button:hover { + background-color: #eccc68; +} +::-webkit-scrollbar { + width: 6px; +} +::-webkit-scrollbar-track { + background-color: #ddd; +} +::-webkit-scrollbar-thumb { + background-color: #2f3542; + border-radius: 5px; +} diff --git a/Week1/project/index.html b/Week1/project/index.html index 87d3c8b86..d702f561c 100644 --- a/Week1/project/index.html +++ b/Week1/project/index.html @@ -1 +1,42 @@ - \ No newline at end of file + + + + + Quote Generator + + + + + +
+
+

Quote Generator

+
+ +
+
+ + + + Click the button to be quoted! +
+
― Obi
+ +
+ + +
+ +
+
+
+
+ + diff --git a/Week1/project/index.js b/Week1/project/index.js index 8427aa356..3b3f740c2 100644 --- a/Week1/project/index.js +++ b/Week1/project/index.js @@ -1 +1,34 @@ -// your code goes in here \ No newline at end of file +// your code goes in here +const quotes = [ + { text: 'Compassion is the chief law of human existence', author: '_Fyodor Dostoyvsky' }, + { + text: + 'What matters in life is not what happens to you but what you remember and how you remember it', + author: '_Gabriel Garcia Marquez', + }, + { text: 'To be free of belief and unbelief is my religion', author: '_Omar Khayyam' }, + { text: 'Why so serious?', author: '_Joker' }, + { + text: + 'Self-love is a good thing but self-awareness is more important. You need to once in a while go ‘Uh, I’m kind of an asshole.', + author: '_Louis C.K.', + }, + { + text: + "My mama always said life was like a box of chocolates. You never know what you're gonna get.", + author: '_Forrest Gump', + }, +]; +const colors = ['#F79F1F', '#EE5A24', '#0652DD', '#0c2461', '#0a3d62', '#78e08f']; +const button = document.getElementById('quote-btn'); +function showRandomQuote() { + const quoteContainer = document.querySelector('.quote'); + const authorContainer = document.querySelector('.author'); + const body = document.querySelector('body'); + const randomQuote = quotes[Math.floor(Math.random() * quotes.length)]; + const randomColor = colors[Math.floor(Math.random() * colors.length)]; + quoteContainer.innerHTML = randomQuote.text; + authorContainer.innerHTML = randomQuote.author; + body.style.backgroundColor = randomColor; +} +button.addEventListener('click', showRandomQuote); diff --git a/Week2/.DS_Store b/Week2/.DS_Store new file mode 100644 index 000000000..4c635bedd Binary files /dev/null and b/Week2/.DS_Store differ diff --git a/Week2/js-exercises/ex1-oddOnesOut.js b/Week2/js-exercises/ex1-oddOnesOut.js index 4f42050ac..26261dc71 100644 --- a/Week2/js-exercises/ex1-oddOnesOut.js +++ b/Week2/js-exercises/ex1-oddOnesOut.js @@ -7,15 +7,23 @@ The function should still behave the same. */ +// function doubleEvenNumbers(numbers) { +// const newNumbers = []; +// for (let i = 0; i < numbers.length; i++) { +// if (numbers[i] % 2 === 0) { +// newNumbers.push(numbers[i] * 2); +// } +// } +// return newNumbers; +// } + +// const myNumbers = [1, 2, 3, 4]; +// console.log(doubleEvenNumbers(myNumbers)); // Logs "[4, 8]" to the console + +const myNumbers = [1, 2, 3, 4]; function doubleEvenNumbers(numbers) { - const newNumbers = []; - for (let i = 0; i < numbers.length; i++) { - if (numbers[i] % 2 === 0) { - newNumbers.push(numbers[i] * 2); - } - } - return newNumbers; + const evenNumbers = numbers.filter((number) => number % 2 === 0); + return evenNumbers.map((number) => number * 2); } -const myNumbers = [1, 2, 3, 4]; -console.log(doubleEvenNumbers(myNumbers)); // Logs "[4, 8]" to the console \ No newline at end of file +console.log(doubleEvenNumbers(myNumbers)); // Logs "[4,8]" diff --git a/Week2/js-exercises/ex2-whatsYourMondayWorth.js b/Week2/js-exercises/ex2-whatsYourMondayWorth.js index 47cea70ba..6f2882603 100644 --- a/Week2/js-exercises/ex2-whatsYourMondayWorth.js +++ b/Week2/js-exercises/ex2-whatsYourMondayWorth.js @@ -11,12 +11,24 @@ */ - function dayWorth(tasks, hourlyRate) { // put your code in here, the function does returns a euro formatted string + // convert minutes spent on each task to hours , and put the values in a new array + let taskDurationHrs = tasks.map((task) => task.duration / 60); + //caculate what each task is worth based on the specified hourly rate and put the values in a new array + let taskWorth = taskDurationHrs.map((taskDurationHrs) => taskDurationHrs * hourlyRate); + //set the format for EUR and the country and language to (Dutch-Netherlands) + let formatter = new Intl.NumberFormat('nl-NL', { + style: 'currency', + currency: 'EUR', + minimumFractionDigits: 2, + }); + //sums up the tasks worth and returns that in a EUR formatted string for any array of objects which has a 'duration' property + return formatter.format(taskWorth.reduce((total, taskPay) => total + taskPay, 0)); } -const mondayTasks = [{ +const mondayTasks = [ + { name: 'Daily standup', duration: 30, // specified in minutes }, @@ -34,5 +46,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)); //€187.50 +console.log(dayWorth(mondayTasks, 13.37)); //€100.28 diff --git a/Week2/js-exercises/ex3-lemonAllergy.js b/Week2/js-exercises/ex3-lemonAllergy.js index 54ac8da04..2af4d70da 100644 --- a/Week2/js-exercises/ex3-lemonAllergy.js +++ b/Week2/js-exercises/ex3-lemonAllergy.js @@ -11,11 +11,14 @@ */ - function takeOutLemons(basket) { - // your code goes in here. The output is a string + // your code goes in here. The output is a string + // returns an array that doesn't contain 'lemon' or 'Lemon' + const lemonlessBasket = basket.filter((fruit) => fruit != 'Lemon' && fruit != 'lemon'); + + return `My mom bought me a fruit basket, containing : ${lemonlessBasket.join(', ')}.`; } const fruitBasket = ['Apple', 'Lemon', 'Grapefruit', 'Lemon', 'Banana', 'Watermelon', 'Lemon']; -console.log(takeOutLemons(fruitBasket)); \ No newline at end of file +console.log(takeOutLemons(fruitBasket)); //My mom bought me a fruit basket, containing [Apple,Grapefruit,Banana,Watermelon] diff --git a/Week2/js-exercises/ex4-collectiveAge.js b/Week2/js-exercises/ex4-collectiveAge.js index d17275cdc..cb1aed4c0 100644 --- a/Week2/js-exercises/ex4-collectiveAge.js +++ b/Week2/js-exercises/ex4-collectiveAge.js @@ -10,24 +10,27 @@ function collectiveAge(people) { // return the sum of age for all the people + const individualAges = people.map((person) => person.age); + return individualAges.reduce((total, individualAge) => total + individualAge, 0); } -const hackYourFutureMembers = [{ +const hackYourFutureMembers = [ + { name: 'Wouter', - age: 33 + age: 33, }, { name: 'Federico', - age: 32 + age: 32, }, { name: 'Noer', - age: 27 + age: 27, }, { name: 'Tjebbe', - age: 22 + age: 22, }, ]; -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)); diff --git a/Week2/js-exercises/ex5-myFavoriteHobbies.html b/Week2/js-exercises/ex5-myFavoriteHobbies.html index 06ab17d45..5363f3106 100644 --- a/Week2/js-exercises/ex5-myFavoriteHobbies.html +++ b/Week2/js-exercises/ex5-myFavoriteHobbies.html @@ -1,5 +1,12 @@ - - - - - \ No newline at end of file + + + + + + + Document + + + + + diff --git a/Week2/js-exercises/ex5-myFavoriteHobbies.js b/Week2/js-exercises/ex5-myFavoriteHobbies.js index 289c68380..49ca56abc 100644 --- a/Week2/js-exercises/ex5-myFavoriteHobbies.js +++ b/Week2/js-exercises/ex5-myFavoriteHobbies.js @@ -10,6 +10,14 @@ function createHTMLList(arr) { // your code goes in here + const body = document.querySelector('body'); + const ul = document.createElement('ul'); + body.appendChild(ul); + arr.map((hobby) => { + const li = document.createElement('li'); + li.innerHTML = hobby; + ul.appendChild(li); + }); } const myHobbies = [ @@ -18,4 +26,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/.DS_Store b/Week2/project/.DS_Store new file mode 100644 index 000000000..1fcd49c9a Binary files /dev/null and b/Week2/project/.DS_Store differ diff --git a/Week2/project/digital-7-font/Digital7-1e1Z.ttf b/Week2/project/digital-7-font/Digital7-1e1Z.ttf new file mode 100644 index 000000000..5dbe6f908 Binary files /dev/null and b/Week2/project/digital-7-font/Digital7-1e1Z.ttf differ diff --git a/Week2/project/digital-7-font/Digital7Italic-RBM3.ttf b/Week2/project/digital-7-font/Digital7Italic-RBM3.ttf new file mode 100644 index 000000000..5a98d7a62 Binary files /dev/null and b/Week2/project/digital-7-font/Digital7Italic-RBM3.ttf differ diff --git a/Week2/project/digital-7-font/Digital7Mono-B1g5.ttf b/Week2/project/digital-7-font/Digital7Mono-B1g5.ttf new file mode 100644 index 000000000..a481b97b4 Binary files /dev/null and b/Week2/project/digital-7-font/Digital7Mono-B1g5.ttf differ diff --git a/Week2/project/digital-7-font/Digital7Monoitalic-8xKz.ttf b/Week2/project/digital-7-font/Digital7Monoitalic-8xKz.ttf new file mode 100644 index 000000000..a01db8a5d Binary files /dev/null and b/Week2/project/digital-7-font/Digital7Monoitalic-8xKz.ttf differ diff --git a/Week2/project/index.html b/Week2/project/index.html index 664b242d3..c81d328d7 100644 --- a/Week2/project/index.html +++ b/Week2/project/index.html @@ -1,17 +1,68 @@ + + + - - - - Pomodoro Clock - + Pomodoro Clock - -
+ + + + -
- - - - \ No newline at end of file + + +

Pomodoro Clock

+ +
+
+
+

Session Length

+
+ +

25

+ +
+
+
+
+
+

Session

+
+
+

Time's Up!

+
+
+ 0 +

25

+
+ : +
+ 0 +

0

+
+
+
+ + + +
+
+
+
+ + + + diff --git a/Week2/project/index.js b/Week2/project/index.js index 5b306f0f2..7c1a61c68 100644 --- a/Week2/project/index.js +++ b/Week2/project/index.js @@ -7,4 +7,120 @@ 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 + */ +// debugger; +const arrowUp = document.getElementById('up'); +const arrowDown = document.getElementById('down'); +const playBtn = document.getElementById('play'); +const pauseBtn = document.getElementById('pause'); +const stopBtn = document.getElementById('stop'); +const TimeUpMessage = document.getElementById('time-up-message'); +const sessionLength = document.getElementById('session-length'); +const minutes = document.getElementById('minutes'); +const seconds = document.getElementById('seconds'); +const notification = document.getElementById('notification'); + +const sZero = document.getElementById('s-zero'); +const mZero = document.getElementById('m-zero'); +const colon = document.getElementById('colon'); + +let startCountdown; + +let timeUp = false; +pauseBtn.disabled = true; +pauseBtn.style.color = 'grey'; +playBtn.addEventListener('click', function () { + arrowUp.disabled = true; + arrowDown.disabled = true; + pauseBtn.disabled = false; + pauseBtn.style.color = 'white'; + + arrowUp.style.color = 'grey'; + arrowDown.style.color = 'grey'; + minutes.style.color = '#2ed573'; + seconds.style.color = '#2ed573'; + colon.style.color = '#2ed573'; + mZero.style.color = '#2ed573'; + sZero.style.color = '#2ed573'; + notification.innerText = 'Counting Down!'; + if (startCountdown === undefined) { + startCountdown = setInterval(play, 1000); + } else { + notification.innerText = 'Timer is already running!'; + } + if (stopBtn.style.display == 'inline') { + stopBtn.style.display = 'none'; + pauseBtn.style.display = 'inline'; + } +}); +function reset() { + minutes.innerText = 25; + seconds.innerText = '00'; + stopCountdown(); + + TimeUpMessage.classList.replace('show', 'hide'); + minutes.classList.replace('hide', 'show'); + seconds.classList.replace('hide', 'show'); + startCountdown = undefined; + location.reload(); +} +stopBtn.addEventListener('click', reset); + +pauseBtn.addEventListener('click', function () { + notification.innerText = 'Paused!'; + stopBtn.style.display = 'inline'; + pauseBtn.style.display = 'none'; + stopCountdown(); + startCountdown = undefined; +}); +arrowUp.addEventListener('click', function () { + if (startCountdown === undefined) { + minutes.innerText++; + sessionLength.innerText++; + } +}); +arrowDown.addEventListener('click', function () { + if (startCountdown === undefined && minutes.innerText > 0) { + minutes.innerText--; + sessionLength.innerText--; + } +}); + +function play() { + if (seconds.innerText != 0) { + seconds.innerText--; + } else if (seconds.innerText == 0 && minutes.innerText != 0) { + seconds.innerText = 59; + minutes.innerText--; + } + if (seconds.innerText == 0 && minutes.innerText == 0) { + timeUp = true; + if (timeUp == true) { + sZero.style.display = 'none'; + mZero.style.display = 'none'; + } + minutes.classList.add('hide'); + seconds.classList.add('hide'); + colon.classList.replace('show', 'hide'); + + TimeUpMessage.classList.replace('hide', 'show'); + notification.innerText = 'Click anywhere to start a new session!'; + + document.querySelector('html').addEventListener('click', reset); + } + + if (seconds.innerText >= 0 && seconds.innerText < 10 && timeUp == false) { + sZero.style.display = 'inline'; + } else { + sZero.style.display = 'none'; + } + if (minutes.innerText >= 0 && minutes.innerText < 10 && timeUp == false) { + mZero.style.display = 'inline'; + } else { + mZero.style.display = 'none'; + } +} + +function stopCountdown() { + clearInterval(startCountdown); +} diff --git a/Week2/project/style.css b/Week2/project/style.css new file mode 100644 index 000000000..2618843ef --- /dev/null +++ b/Week2/project/style.css @@ -0,0 +1,89 @@ +@font-face { + font-family: digital-7; + src: url(digital-7-font/Digital7-1e1Z.ttf); +} +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +body { + width: 70%; + height: 100%; + margin: 0 auto; + text-align: center; + background-color: #23555c; + color: white; + font-family: 'Orbitron', sans-serif; +} +button { + background-color: transparent; + border: none; + color: white; + outline: none; + width: 4rem; +} +button:hover { + color: #4cd137; +} +#stop { + display: none; +} +.set-timer { + display: flex; + justify-content: center; + font-size: 2rem; +} +.timer-wrapper { + width: 80%; + margin: 0 auto; + /* background-color: red; */ + line-height: 5em; +} +.clock { + display: flex; + justify-content: center; + + flex-wrap: wrap; + border: solid 6px grey; + border-radius: 35px; +} +.m-display { + display: flex; + justify-content: center; + + font-family: digital-7, sans-serif; + font-size: 6rem; + margin-bottom: 2rem; +} +.s-display { + display: flex; + justify-content: center; + font-family: digital-7, sans-serif; + font-size: 6rem; +} +#colon { + font-size: 3rem; +} +#m-zero { + display: none; +} +#session-length { + margin-left: 15px; + margin-right: 15px; +} +#time-up-message { + font-size: 3rem; + margin-bottom: 3rem; + font-weight: bold; + color: #e84118; +} +.inside-title { + width: 100%; +} +.hide { + display: none; +} +.show { + display: block; +} diff --git a/Week3/js-exercises/ex1-AddSix.js b/Week3/js-exercises/ex1-AddSix.js index a801a72fd..e2184c144 100644 --- a/Week3/js-exercises/ex1-AddSix.js +++ b/Week3/js-exercises/ex1-AddSix.js @@ -10,11 +10,16 @@ Call the function three times. The return values should be: */ -function createBase( /* ???? */ ) { +debugger; +function createBase(/* ???? */ x) { // Put here your logic... + return function (y) { + return (x = x + y); + }; } -const addSix = createBase(6); +const addNine = createBase(6); -// Put here your function calls... -console.log(addSix()); \ No newline at end of file +console.log(addNine(9)); //15 +console.log(addNine(9)); //24 +console.log(addNine(9)); //33 diff --git a/Week3/js-exercises/ex2-RemoveDuplicates.js b/Week3/js-exercises/ex2-RemoveDuplicates.js index aa9d0d7d0..45d8a451e 100644 --- a/Week3/js-exercises/ex2-RemoveDuplicates.js +++ b/Week3/js-exercises/ex2-RemoveDuplicates.js @@ -10,12 +10,19 @@ does not return anything but removes any duplicate elements from the array. */ - // WRITE YOUR FUNCTION HERE - +// debugger; const letters = ['a', 'b', 'c', 'd', 'a', 'e', 'f', 'c', 'b']; - -removeDuplicates(letter); - -if (letters === ['a', 'b', 'c', 'd', 'e', 'f']) - console.log("Hooray!") \ No newline at end of file +let removeDuplicates = (letters) => { + letters.sort().forEach((letter, index) => { + if (letters.indexOf(letter) !== index) { + letters.splice(index, 1); + } + }); + return letters; +}; +console.log(removeDuplicates(letters)); + +if (JSON.stringify(removeDuplicates(letters)) === JSON.stringify(['a', 'b', 'c', 'd', 'e', 'f'])) { + console.log('Hooray!'); +} diff --git a/Week3/js-exercises/ex3-GuessTheOutput.js b/Week3/js-exercises/ex3-GuessTheOutput.js index 7d783ceef..3674a84ac 100644 --- a/Week3/js-exercises/ex3-GuessTheOutput.js +++ b/Week3/js-exercises/ex3-GuessTheOutput.js @@ -8,8 +8,7 @@ Write out your reasoning in 50 words or less. */ - - +// debugger; let a = 10; const x = (function () { a = 12; @@ -18,4 +17,9 @@ const x = (function () { }; })(); -x(); \ No newline at end of file +x(); + +//output is alert:12. +// variable a is declared and assigned the value 10 in the global scope. +// function x is declared and defined , a new local scope is created, in which the value of 12 is assigned to the variable a. +// function x returns a function that calls itself immediately and displays alert with the value of a in the local scope. diff --git a/Week3/js-exercises/ex4-GuessMore.js b/Week3/js-exercises/ex4-GuessMore.js index 81a4ec273..a4337dbe9 100644 --- a/Week3/js-exercises/ex4-GuessMore.js +++ b/Week3/js-exercises/ex4-GuessMore.js @@ -17,8 +17,21 @@ function f1(val) { f1(x); console.log(x); +// outputs 9 because x is declared with const and assigned the value of 9 , +// console.log(x) will log this value. +// to get the function's returned value in the console : console.log(f1(x)). +// OR : +// let x=9 +// function f1(val) { +// val = val + 1; +// return (x=val); +// } +// f1(x); +// console.log(x); +// + const y = { - x: 9 + x: 9, }; function f2(val) { @@ -26,4 +39,7 @@ function f2(val) { return val; } f2(y); -console.log(y); \ No newline at end of file +console.log(y); +// outputs {x:10} +// The value that y is pointing to (the object) didn't change here ,y is still pointing to the object +// only the property x of the object changed. diff --git a/Week3/js-exercises/ex5-LotteryMachine.js b/Week3/js-exercises/ex5-LotteryMachine.js index ad09b963c..2c2e0c04d 100644 --- a/Week3/js-exercises/ex5-LotteryMachine.js +++ b/Week3/js-exercises/ex5-LotteryMachine.js @@ -25,14 +25,37 @@ Don't you just love the thrill of the lottery? What if I told you we can make ou if the array value is divisible by both 3 and 5. */ - -function threeFive(startIndex, stopIndex, threeCallback, fiveCallback) { - const numbers = []; +debugger; +function threeFive(startNumber, stopNumber, threeCallback, fiveCallback) { // make array - // start at beginning of array and check if you should call threeCallback or fiveCallback or go on to next + function makeArray() { + let numbers = []; + + for (let i = 0; i <= stopNumber - startNumber; i++) { + numbers.push(startNumber + i); + } + return numbers; + } + let newArray = makeArray(); + + newArray.forEach((num) => { + if (num % 3 === 0) { + threeCallback(num); + } + if (num % 5 === 0) { + fiveCallback(num); + } + }); +} + +function sayThree(num) { + console.log(num + ' Is devisible By Three'); +} +function sayFive(num) { + console.log(num + ' Is devisible By 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 +// and call sayFive, sayThree, sayThree, sayFive diff --git a/Week3/project/.vscode/settings.json b/Week3/project/.vscode/settings.json new file mode 100644 index 000000000..3b6641073 --- /dev/null +++ b/Week3/project/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "git.ignoreLimitWarning": true +} \ No newline at end of file diff --git a/Week3/project/index.css b/Week3/project/index.css new file mode 100644 index 000000000..6bbae6dd1 --- /dev/null +++ b/Week3/project/index.css @@ -0,0 +1,52 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +body { + background-color: #eccc68; + font-family: 'Bangers', cursive; +} +#app { + width: 40%; + + margin: 50px auto; + text-align: center; + line-height: 3rem; +} +main { + padding-top: 2rem; + padding-bottom: 2rem; + background-color: white; + display: flex; + flex-direction: column; + border-radius: 0 0 10px 10px; +} + +#header { + background-color: #ff6348; + border-radius: 10px 10px 0 0; + color: white; +} + +input, +select { + width: 50%; + margin: 0 auto; + padding: 10px; + border-radius: 5px; + border: none; + background-color: #dfe4ea; +} +button { + background-color: #ff6348; + border: none; + padding: 20px 40px; + font-size: 1.1rem; + border-radius: 5px; + outline: none; + color: white; +} +button:hover { + background-color: chartreuse; +} diff --git a/Week3/project/index.html b/Week3/project/index.html index fac819b21..e147d6a74 100644 --- a/Week3/project/index.html +++ b/Week3/project/index.html @@ -1,15 +1,49 @@ + + + + + + Tip Calculator + - - - - Tip Calculator - + +
+
+

+
+
+ +
+ - -
- - +
- \ No newline at end of file + + + +
+
+ +
+
+

Tip Amount

+

$0.00

+

+
+
+
+ + + + diff --git a/Week3/project/index.js b/Week3/project/index.js index e12fb76ed..16c36f016 100644 --- a/Week3/project/index.js +++ b/Week3/project/index.js @@ -1,3 +1,65 @@ // Your code goes in here +// debugger; +document.querySelector('#header').innerText = 'Tip Calculator'; +calculate.addEventListener('click', calculateTip); +function calculateTip() { + const billAmount = document.getElementById('bill-amount'); + const serviceRating = document.getElementById('service-rating'); + const peopleCount = document.getElementById('people-count'); + const calculate = document.getElementById('calculate'); + const outPut = document.getElementById('tip-amount'); + const each = document.getElementById('each'); -document.querySelector("#app").innerText = "Tip Calculator"; \ No newline at end of file + if ( + !billAmount.value || + !serviceRating.value || + !peopleCount.value || + serviceRating.value === '--Choose an option--' || + billAmount.value === '0' || + peopleCount.value === '0' + ) { + alert('All fields must be filled'); + input; + } else { + billAmount.value === billAmount.innerText; + serviceRating.value === serviceRating.innerText; + peopleCount.value === peopleCount.innerText; + if (peopleCount.value > 1) { + each.innerText = 'each'; + } else { + each.innerText = ' '; + } + let formatter = new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'USD', + minimumFractionDigits: 2, + }); + + switch (serviceRating.value) { + case '30% - Outstanding': + outPut.innerText = formatter.format((billAmount.value * (30 / 100)) / peopleCount.value); + console.log(outPut.innerText); + break; + case '20% - Good': + outPut.innerText = formatter.format((billAmount.value * (20 / 100)) / peopleCount.value); + break; + case '15% - It was OK': + outPut.innerText = formatter.format((billAmount.value * (15 / 100)) / peopleCount.value); + break; + case '10% - Bad': + outPut.innerText = formatter.format((billAmount.value * (10 / 100)) / peopleCount.value); + break; + case '5% - Terrible': + outPut.innerText = formatter.format((billAmount.value * (5 / 100)) / peopleCount.value); + break; + + default: + break; + } + } + + // return (output.innerText = (billAmount.value * 10) / 100 + serviceRating.value); +} + +// console.log(billAmount.value); +// calculateTip();