About Me

\ No newline at end of file +--> + + + + + + What's the time + + + + + \ No newline at end of file diff --git a/Week1/js-exercises/ex4-whatsTheTime.js b/Week1/js-exercises/ex4-whatsTheTime.js index 4024c1016..47b34e655 100644 --- a/Week1/js-exercises/ex4-whatsTheTime.js +++ b/Week1/js-exercises/ex4-whatsTheTime.js @@ -10,9 +10,16 @@ 4. Have the function execute when it 's loading in the browser */ - +const span = document.createElement('span'); +document.body.appendChild(span); function displayCurrentTime() { // your code goes in here + +const time = new Date(); +span.innerHTML = time.toTimeString(); + } -setInterval(displayCurrentTime, 1000); \ No newline at end of file +setInterval(displayCurrentTime, 1000); +window.open(displayCurrentTime()) ; + diff --git a/Week1/js-exercises/ex5-catWalk.js b/Week1/js-exercises/ex5-catWalk.js index 309eca0eb..2983bb5e8 100644 --- a/Week1/js-exercises/ex5-catWalk.js +++ b/Week1/js-exercises/ex5-catWalk.js @@ -10,4 +10,35 @@ 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 +*/ + +const img = document.querySelector('img'); +const dancingCat = "https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif?itemid=10561424"; +const originalImgSrc = img.src; +const originalImgWidth = img.width; + +function setCatPositionToBeginning(){ + img.style.left = '0px' +} +setCatPositionToBeginning(); + +function catWalk(){ +const currentPosition = parseFloat(img.style.left); +img.style.left = (currentPosition + 10).toString().concat('px'); + +const middlePosition = (window.innerWidth - originalImgWidth ) / 2; + +if (currentPosition >= middlePosition - 10 && currentPosition <= middlePosition + 10){ + clearInterval(interval); + img.src = dancingCat; + setTimeout(() => { + img.src = originalImgSrc; + img.style.left = (currentPosition + 20).toString().concat('px'); + interval = setInterval(catWalk, 50); + }, 5000); +} +if(currentPosition > window.innerWidth){ + setCatPositionToBeginning(); +} +} +let interval = setInterval(catWalk,50); \ No newline at end of file diff --git a/Week1/project/index.css b/Week1/project/index.css index e69de29bb..a5a67de91 100644 --- a/Week1/project/index.css +++ b/Week1/project/index.css @@ -0,0 +1,58 @@ +body { + font-size: 20px; + background: #FFA500; + color: #fff; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.container { + background-color: #fff; + color: #FFA500; + padding: 5rem 15rem; + margin-top: 6rem; +} + +.white-space { + background: #fff; + padding: 1.5rem 12rem; + margin-top: .5rem; +} + +#button { + background-color: #FFA500; + color: #fff; + padding: 1rem; + position: absolute; + left: 70%; + top: 50%; + border: none; + cursor: pointer; +} + +.social-links { + position: absolute; + left: 22%; + top: 50%; +} + +ion-icon { + display: inline-block; + width: 2rem; + height: 2rem; + color: #fff; + background-color: #FFA500; + padding: .3rem; +} + +span { + position: absolute; + left: 70%; + top: 45%; +} + +h1::before { + content: '\201C'; +} \ No newline at end of file diff --git a/Week1/project/index.html b/Week1/project/index.html index 87d3c8b86..7783c4424 100644 --- a/Week1/project/index.html +++ b/Week1/project/index.html @@ -1 +1,25 @@ - \ No newline at end of file + + + + + + + + My quotes + + +

+ +

your quote is going to be showen here

+ Author Name + + +

+ + + + diff --git a/Week1/project/index.js b/Week1/project/index.js index 8427aa356..9bdc30a61 100644 --- a/Week1/project/index.js +++ b/Week1/project/index.js @@ -1 +1,30 @@ -// your code goes in here \ No newline at end of file +// your code goes in here +const quotes = [ + { + quote :`Life is like riding a bicycle, to keep your balance, you must keep moving.`, + author : '- Albert Einstein' +},{ + quote:`Love the life you live. Live the life you love.`, + author: '- Bob Marley' +},{ + quote:`Our greatest glory is not in never falling, but in rising every time we fall.`, + author: '- Confucius' +},{ + quote:`First, solve the problem. Then, write the code`, + author: '– John Johnson' +},{ + quote:`Experience is the name everyone gives to their mistakes.`, + author: '– Oscar Wilde' +},{ + quote:`Code is like humor. When you have to explain it, it’s bad.`, + author: '– Cory House' +}]; + + +function newQuote(){ + let x = Math.floor(Math.random() * quotes.length); + document.getElementById('quote').innerText = quotes[x].quote; + document.getElementById('author').innerText = quotes[x].author; +}; + + diff --git a/Week2/js-exercises/ex1-oddOnesOut.js b/Week2/js-exercises/ex1-oddOnesOut.js index 4f42050ac..7d6dd2600 100644 --- a/Week2/js-exercises/ex1-oddOnesOut.js +++ b/Week2/js-exercises/ex1-oddOnesOut.js @@ -8,14 +8,26 @@ */ 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 oddOnesOut = numbers.filter(number => { + return number % 2 ===0; +}); +const newNumbers = oddOnesOut.map(number => { + return number * 2; +}) +return newNumbers; } 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]" to the console + + + + + +// const newNumbers = []; +// for (let i = 0; i < numbers.length; i++) { +// if (numbers[i] % 2 === 0) { +// newNumbers.push(numbers[i] * 2); +// } +// } +// return newNumbers; \ No newline at end of file diff --git a/Week2/js-exercises/ex2-whatsYourMondayWorth.js b/Week2/js-exercises/ex2-whatsYourMondayWorth.js index 47cea70ba..bf311ffc1 100644 --- a/Week2/js-exercises/ex2-whatsYourMondayWorth.js +++ b/Week2/js-exercises/ex2-whatsYourMondayWorth.js @@ -13,8 +13,13 @@ function dayWorth(tasks, hourlyRate) { - // put your code in here, the function does returns a euro formatted string -} + // put your code in here, the function does returns a euro formatted string + const durationTimeForTask = tasks.map(mondayTasks => mondayTasks.duration / 60); + const multiplyDurationAndSum = durationTimeForTask.reduce(function (total, durationTimeForTask) { + return total + (durationTimeForTask * hourlyRate) + }, 0) + return `€${ multiplyDurationAndSum }`; +}; const mondayTasks = [{ name: 'Daily standup', diff --git a/Week2/js-exercises/ex3-lemonAllergy.js b/Week2/js-exercises/ex3-lemonAllergy.js index 54ac8da04..40abdd6cb 100644 --- a/Week2/js-exercises/ex3-lemonAllergy.js +++ b/Week2/js-exercises/ex3-lemonAllergy.js @@ -14,8 +14,11 @@ function takeOutLemons(basket) { // your code goes in here. The output is a string + return basket.filter(newBasket => { + return newBasket !== 'Lemon'; + }) } const fruitBasket = ['Apple', 'Lemon', 'Grapefruit', 'Lemon', 'Banana', 'Watermelon', 'Lemon']; -console.log(takeOutLemons(fruitBasket)); \ No newline at end of file +console.log('my Mom brought me a fruit basket, containing: ' + takeOutLemons(fruitBasket)); \ No newline at end of file diff --git a/Week2/js-exercises/ex4-collectiveAge.js b/Week2/js-exercises/ex4-collectiveAge.js index d17275cdc..e9a1f345a 100644 --- a/Week2/js-exercises/ex4-collectiveAge.js +++ b/Week2/js-exercises/ex4-collectiveAge.js @@ -10,6 +10,11 @@ function collectiveAge(people) { // return the sum of age for all the people + const ages = people.map(hackYourFutureMembers => hackYourFutureMembers.age); + const combinedAges = ages.reduce(function (total, ages) { + return total + (ages / people.length) + },0); + return combinedAges } const hackYourFutureMembers = [{ @@ -30,4 +35,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..aed0f2334 100644 --- a/Week2/js-exercises/ex5-myFavoriteHobbies.html +++ b/Week2/js-exercises/ex5-myFavoriteHobbies.html @@ -1,5 +1,11 @@ - - - - + + + + + + MY 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..cb872fd7d 100644 --- a/Week2/js-exercises/ex5-myFavoriteHobbies.js +++ b/Week2/js-exercises/ex5-myFavoriteHobbies.js @@ -7,15 +7,31 @@ Use the map and / or forEach function to put each hobby into a list item Put the list items in an unordered list */ - -function createHTMLList(arr) { - // your code goes in here -} - +const heading = document.createElement('h1'); +heading.textContent = 'My favorite hobbies are '; +document.body.appendChild(heading); +heading.style.textAlign = 'center'; const myHobbies = [ 'Meditation', 'Reading', 'Programming', 'Hanging out with friends', 'Going to the gym', -]; \ No newline at end of file +]; +function createHTMLList(arr) { + // your code goes in here + const hobbies = arr.map(hobby => { + const listItem = document.createElement('li') + listItem.textContent = hobby; + const list = document.createElement('ul'); + list.appendChild(listItem); + list.style.textAlign = 'center'; + list.style.listStyle = 'none'; + + return document.body.appendChild(list); + }); + return hobbies +}; + +createHTMLList(myHobbies); + diff --git a/Week2/project/index.html b/Week2/project/index.html index 664b242d3..57541315b 100644 --- a/Week2/project/index.html +++ b/Week2/project/index.html @@ -5,13 +5,55 @@ Pomodoro Clock + - +

Pomodoro Clock

session length

+ +

- +

session

- + + + + + - \ No newline at end of file + diff --git a/Week2/project/index.js b/Week2/project/index.js index 5b306f0f2..6e1fabeb7 100644 --- a/Week2/project/index.js +++ b/Week2/project/index.js @@ -1,10 +1,91 @@ -/** - In this week 's project you'll be making a Pomodoro Clock! - A user can specify how many minutes the timer should be set, and with a click on the play button it starts counting down!If the user wants to pause the timer, they can do so by clicking the pause button. - - If the timer is running, the user can 't change the session length anymore - Use at least 3 functions - 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 +/////// BUTTONS//////////////// +const start = document.getElementById('play'); +const pause = document.getElementById('pause'); +const reset = document.getElementById('reset'); +const arrowUp = document.getElementById('arrow_up'); +const arrowDown = document.getElementById('arrow_down'); + +/////////// VARIABLES ////////////////// +let minutes = document.getElementById('minutes'); +let secounds = document.getElementById('secounds'); +let semicolon = document.getElementById('semicolon'); +let sessionLength = document.getElementById('time'); +let startTimer; + +sessionLength.innerText = minutes.innerText; + +// ///////////// ARROW UP AND DOWN ////////////// +arrowUp.addEventListener('click',()=>{ + if(minutes.innerText >= 0 && !startTimer ){ + minutes.style.visibility = 'visible'; + secounds.style.visibility = 'visible'; + semicolon.innerText = ':' + minutes.innerText++; + sessionLength.innerText++; + secounds.innerText = '00'; + } +}) +arrowDown.addEventListener('click', ()=>{ + if(minutes.innerText > 0 && !startTimer ){ + minutes.innerText--; + sessionLength.innerText--; + secounds.innerText = '00'; + }else if(minutes.innerText == 0 && !startTimer ){ + minutes.style.visibility = 'hidden'; + secounds.style.visibility = 'hidden'; + semicolon.innerText = `time's up!`; + } +}) + +/////////////////// START RESET STOP BUTTONS ////////////// +start.addEventListener('click', ()=>{ + if(startTimer === undefined){ + startTimer = setInterval(timer, 1000) + }else{ + alert('Timer is already running') + } +}) + +reset.addEventListener('click', () =>{ + if(minutes.innerText == 0 && secounds.innerText == 0){ + minutes.innerText = sessionLength.innerText; + secounds.innerText = '00'; + semicolon.textContent = ':' + stopInterval() + startTimer = undefined; + }else{ + minutes.innerText = sessionLength.innerText; + secounds.innerText = '00'; + stopInterval() + startTimer = undefined; + } +}) + +pause.addEventListener('click', ()=>{ + stopInterval(); + startTimer = undefined; +}) + +// start timer Function +function timer(){ + if(secounds.innerText != 0){ + secounds.innerText--; + } if(minutes.innerText != 0 && secounds.innerText == 0){ + secounds.innerText = 59; + minutes.innerText --; + } if (minutes.innerText == 0 && secounds.innerText == 0){ + minutes.style.visibility ='hidden'; + secounds.style.visibility ='hidden'; + semicolon.innerText = `time's up!`; + clearInterval(startTimer); + startTimer = undefined; + } + if (secounds.innerText < 10 ){ + secounds.innerText = `0${secounds.innerText}`; + console.log(secounds.innerText); + }; + }; +//stop timer function +function stopInterval(){ + clearInterval(startTimer); +} diff --git a/Week3/js-exercises/ex1-AddSix.js b/Week3/js-exercises/ex1-AddSix.js index 67e8bb63f..627d1409a 100644 --- a/Week3/js-exercises/ex1-AddSix.js +++ b/Week3/js-exercises/ex1-AddSix.js @@ -4,16 +4,22 @@ Declare a function called `createBase`.The function takes a number as a parameter and return a closure, that adds a number to the base number argument. - Call the function three times. The return values should be: 15, 24, 33 - */ -function createBase( /* ???? */ ) { +function createBase( number ) { // Put here your logic... + return ()=>{ + return number += 9; + } } const addSix = createBase(6); // Put here your function calls... + +console.log(addSix()); +console.log(addSix()); +console.log(addSix()); + diff --git a/Week3/js-exercises/ex2-RemoveDuplicates.js b/Week3/js-exercises/ex2-RemoveDuplicates.js index 0138e7195..d5962f098 100644 --- a/Week3/js-exercises/ex2-RemoveDuplicates.js +++ b/Week3/js-exercises/ex2-RemoveDuplicates.js @@ -1,21 +1,37 @@ /** ** Exercise 2: The lottery machine ** + Write a function called removeDuplicates. This function accept an array as an argument + does not return anything but removes any duplicate elements from the array. + The function should remove duplicate elements. So the result should be: + ['a', 'b', 'c', 'd', 'e', 'f'] + */ -Write a function called removeDuplicates. This function accept an array as an argument -does not return anything but removes any duplicate elements from the array. - - The function should remove duplicate elements.So the result should be: - - +/** + * Checks your solution against correct solution + * @param {Array} array your solution + * @returns boolean */ +function checkSolution(array) { + const solution = ['a', 'b', 'c', 'd', 'e', 'f']; + if (array == null) return false; + if (array.length !== solution.length) return false; + for (let i = 0; i < solution.length; i++) { + if (array[i] !== solution[i]) return false; + } + return true; +} // WRITE YOUR FUNCTION HERE +function removeDuplicates(array){ + return Array.from(new Set(array)); + +}; const letters = ['a', 'b', 'c', 'd', 'a', 'e', 'f', 'c', 'b']; - removeDuplicates(letters); -if (letters === ['a', 'b', 'c', 'd', 'e', 'f']) - console.log("Hooray!") +if (checkSolution(letters)) { + console.log("Hooray!"); +} diff --git a/Week3/js-exercises/ex3-GuessTheOutput.js b/Week3/js-exercises/ex3-GuessTheOutput.js index 7d783ceef..cd3a6b739 100644 --- a/Week3/js-exercises/ex3-GuessTheOutput.js +++ b/Week3/js-exercises/ex3-GuessTheOutput.js @@ -1,14 +1,13 @@ /** - ** Exercise 3: Guess the output ** - Look at the bellow code snippet. Can you guess the output? Write out your reasoning in 50 words or less. - */ - +// it will alert 12 because we reassignesd the variable in the function and the alert is in the function +// that child of the x function so it has an access to the parent function(scope) +// if we used const for an example insted of let it will show that the variable is already declared let a = 10; const x = (function () { diff --git a/Week3/js-exercises/ex4-GuessMore.js b/Week3/js-exercises/ex4-GuessMore.js index 81a4ec273..00b3577c7 100644 --- a/Week3/js-exercises/ex4-GuessMore.js +++ b/Week3/js-exercises/ex4-GuessMore.js @@ -16,7 +16,6 @@ function f1(val) { } f1(x); console.log(x); - const y = { x: 9 }; @@ -26,4 +25,7 @@ function f2(val) { return val; } f2(y); -console.log(y); \ No newline at end of file +console.log(y); + +// the argument in the first function is passed by value and the secound one is passed by reference +// the variables type number and boleean and string are passed by value and the arrays and object types are passed by reference \ No newline at end of file diff --git a/Week3/js-exercises/ex5-LotteryMachine.js b/Week3/js-exercises/ex5-LotteryMachine.js index ad09b963c..adfd9ec10 100644 --- a/Week3/js-exercises/ex5-LotteryMachine.js +++ b/Week3/js-exercises/ex5-LotteryMachine.js @@ -25,14 +25,35 @@ 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. */ +///// there is something that I dont understand could you pleas tell me why it is not helping I did everything I should do +// but still not works + +function threeCallback() { + console.log('say three') +} +function fiveCallback() { + console.log('say five') +} function threeFive(startIndex, stopIndex, threeCallback, fiveCallback) { const numbers = []; - // make array + for (let i = startIndex; i <= stopIndex; i++){ + numbers.push(i) + } + console.log(numbers); + // start at beginning of array and check if you should call threeCallback or fiveCallback or go on to next + numbers.forEach((number) => { + if (number % 3 === 0) { + threeCallback(); + } + if (number % 5 === 0) { + fiveCallback(); + } + }); } +threeFive(10, 15, threeCallback, fiveCallback); -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/project/index.html b/Week3/project/index.html index fac819b21..0ca1f8190 100644 --- a/Week3/project/index.html +++ b/Week3/project/index.html @@ -4,11 +4,41 @@ + Tip Calculator -

Tip Calculator

+ + + +

How many people are sharing the bill?

+ people + +

+ 0.00 + each +

diff --git a/Week3/project/index.js b/Week3/project/index.js index e12fb76ed..e720c2fd1 100644 --- a/Week3/project/index.js +++ b/Week3/project/index.js @@ -1,3 +1,31 @@ -// Your code goes in here +let eachWord = document.getElementById('each'); +eachWord.style.display = 'none'; +document.getElementById('totalTip').style.display = 'none' -document.querySelector("#app").innerText = "Tip Calculator"; \ No newline at end of file +function claculateTip() { + let billAmount = document.getElementById('billamt').value; + let serviceQuality = document.getElementById('serviceQual').value; + let numberOfPeople = document.getElementById('peopleamt').value; + + if (billAmount === '' || serviceQuality == 0) { + alert('pleas enter values'); + return; + } + + if (numberOfPeople === '' || numberOfPeople < 1) { + numberOfPeople = 1; + eachWord.style.display = 'none'; + } else { + eachWord.style.display = 'block'; + } + + let totalTip = (billAmount * serviceQuality) / numberOfPeople; + totalTip = totalTip.toFixed(2); + + document.getElementById('totalTip').style.display = 'block'; + document.getElementById('tip').innerText = `TIP AMOUNT $${totalTip}`; +} + +document.getElementById('calculate').onclick = function () { + claculateTip(); +}; \ No newline at end of file diff --git a/Week3/project/style.css b/Week3/project/style.css new file mode 100644 index 000000000..09c13f3b7 --- /dev/null +++ b/Week3/project/style.css @@ -0,0 +1,105 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,200&display=swap'); +body { + font-family: 'Poppins', sans-serif; + background-color: #4c2827; +} + +#app { + height: 525px; + width: 360px; + margin: 100px auto; + background: #f7f7f7; + box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); + border-radius: 20px; + -webkit-border-radius: 20px; + -moz-border-radius: 20px; +} + +h1 { + background: #1F030C; + color: white; + margin: 0; + padding: 10px 100px; + text-transform: uppercase; + font-size: 18px; + font-weight: normal; + border-top-left-radius: 20px; + border-top-right-radius: 20px; +} + +p { + padding-left: 20px; +} + +form input[type="text"] { + width: 90px; +} + +input { + padding-left: 20px; +} + +#billamt { + font-size: 14px; + color: red; + background-color: #f7f7f7; + width: 60%; + padding: 5px 5px 8px 8px; +} + +#billamt:focus { + background: #fff; + border: 3px solid #2980b9; + outline: none; +} + +#peopleamt { + width: 60%; + padding: 5px 5px 8px 8px; + margin-left: 20px; + color: red; + background-color: #f7f7f7; + font-size: 14px; +} + +#serviceQual { + padding: 13px 13px 20px 20px; + margin-left: 20px; + font-size:20px; +} + +button { + text-transform: uppercase; + font-weight: bold; + display: block; + margin: 30px auto; + background: #AD133A; + border-radius: 5px; + width: 200px; + height: 50px; + font-size: 17px; + color: white; +} + +button:hover { + background: #4c2827; + border-bottom-color: #111; +} + +button:active { + position: relative; + top: 1px; +} + +#totalTip { + font-size: 30px; + margin-top: 5px; + text-align: center; +} + + +#totalTip small { + font-size: 20px; + font-weight: bold; + display: block; +} \ No newline at end of file

My Book List

About Me

your quote is going to be showen here

Pomodoro Clock

session length

session

Tip Calculator