diff --git a/.DS_Store b/.DS_Store index 19f35c2d4..a8da5af43 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/Week1/js-exercises/ex1-bookList.html b/Week1/js-exercises/ex1-bookList.html index b3864ac18..2fd501f90 100644 --- a/Week1/js-exercises/ex1-bookList.html +++ b/Week1/js-exercises/ex1-bookList.html @@ -8,10 +8,11 @@ -

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..6bedacdf6 100644 --- a/Week1/js-exercises/ex1-bookList.js +++ b/Week1/js-exercises/ex1-bookList.js @@ -1,5 +1,5 @@ /** - + ** Exercise 1: The book list ** I 'd like to display my three favorite books inside a nice webpage! @@ -9,34 +9,74 @@ element with the book title and author and append it to the page. 3. Use a ` - - + \ No newline at end of file diff --git a/Week1/js-exercises/ex2-aboutMe.js b/Week1/js-exercises/ex2-aboutMe.js index 2244d7d30..1b052703d 100644 --- a/Week1/js-exercises/ex2-aboutMe.js +++ b/Week1/js-exercises/ex2-aboutMe.js @@ -1,11 +1,31 @@ +'use strict'; /** - ** Exercise 2: About me ** - 1. See HTML 2. Change the body tag 's style so it has a font-family of "Arial, sans-serif". 3. Replace each of the spans(nickname, fav - food, hometown) with your own information. 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 + */ +const bodyTag = document.body; +bodyTag.style.fontFamily = 'Arial, sans-serif'; + +const nickName = document.getElementById('nickname'); +const favFood = document.getElementById('fav-food'); +const homeTown = document.getElementById('hometown'); + +nickName.innerText = 'Saif Alamrani'; +favFood.innerText = 'Dolma'; +homeTown.innerText = 'Amsterdam'; + +const listItem = document.getElementsByTagName('li'); +for (let i = 0; i < listItem.length; i++) { + listItem[i].className = 'list-item'; +} + +const imgOfMe = document.createElement('img'); +imgOfMe.setAttribute('src', 'https://media-exp1.licdn.com/dms/image/C4D03AQF39cEdRfB4-g/profile-displayphoto-shrink_200_200/0?e=1591833600&v=beta&t=isD64N-5hi1FPahxAJDZlFM8ia0sx1ATyzewKlj_ipM'); + +const h1 = document.querySelector('h1'); +bodyTag.insertBefore(imgOfMe, h1); \ No newline at end of file diff --git a/Week1/js-exercises/ex3-hijackLogo.js b/Week1/js-exercises/ex3-hijackLogo.js index 5ca291435..3fa8fdbea 100644 --- a/Week1/js-exercises/ex3-hijackLogo.js +++ b/Week1/js-exercises/ex3-hijackLogo.js @@ -13,7 +13,11 @@ */ function hijackGoogleLogo() { - // your code goes in here + const logoG = document.getElementsByName('img'); + const hyfLogo = 'https://www.hackyourfuture.dk/static/logo-dark.svg'; + logoG[0].src = hyfLogo; + logoG[0].srcset = hyfLogo; + } hijackGoogleLogo(); \ No newline at end of file diff --git a/Week1/js-exercises/ex4-whatsTheTime.html b/Week1/js-exercises/ex4-whatsTheTime.html index 2c357e7cd..be9396f94 100644 --- a/Week1/js-exercises/ex4-whatsTheTime.html +++ b/Week1/js-exercises/ex4-whatsTheTime.html @@ -1,4 +1,33 @@ \ 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..6be3e9652 100644 --- a/Week1/js-exercises/ex4-whatsTheTime.js +++ b/Week1/js-exercises/ex4-whatsTheTime.js @@ -13,6 +13,10 @@ function displayCurrentTime() { // your code goes in here + const Time = new Date(); + const h1 = document.getElementById('date'); + h1.innerHTML = Time.toLocaleTimeString(); } -setInterval(displayCurrentTime, 1000); \ No newline at end of file +// Have the function execute when it 's loading in the browser +window.onload = setInterval(displayCurrentTime, 1000); diff --git a/Week1/js-exercises/ex5-catWalk.html b/Week1/js-exercises/ex5-catWalk.html index 0f04792f7..1ddc16866 100644 --- a/Week1/js-exercises/ex5-catWalk.html +++ b/Week1/js-exercises/ex5-catWalk.html @@ -7,7 +7,7 @@ - + diff --git a/Week1/js-exercises/ex5-catWalk.js b/Week1/js-exercises/ex5-catWalk.js index 309eca0eb..36ad40a8f 100644 --- a/Week1/js-exercises/ex5-catWalk.js +++ b/Week1/js-exercises/ex5-catWalk.js @@ -10,4 +10,33 @@ 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 catGif = document.querySelector('img'); +catGif.style.left = '0px'; + +let gifLeft = -catGif.width; +let control = -catGif.width; + +function catWalk() { + gifLeft += 10; + catGif.style.left = `${gifLeft} px` + control += 10; + if (gifLeft > window.innerWidth) { + gifLeft = -catGif.width; + control = -catGif.width; + } + else if (control > ((window.innerWidth / 2) - (catGif.width / 2))) { + clearInterval(cat); + catGif.setAttribute('src', 'https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif'); + setTimeout(() => { + catGif.setAttribute('src', "http://www.anniemation.com/clip_art/images/cat-walk.gif"); + cat = setInterval(catWalk, 50); + } + , 3000); + control = -1000; + } +} +let cat = setInterval(catWalk, 50); + + diff --git a/Week1/project/index.css b/Week1/project/index.css index e69de29bb..eba8a4dc5 100644 --- a/Week1/project/index.css +++ b/Week1/project/index.css @@ -0,0 +1,65 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body{ + background-color:orange; + font-family: 'Poppins', sans-serif; + color: black; +} + +.container { + width: 50%; + margin: 100px auto 0; + background-color: white; + padding: 40px 50px; +} + +p{ + line-height: 1.5; + color :#04356A; +} +.fas { + font-size: 2em; + margin-right: 10px; +} +#quote { + font-size: 1.7em; +} +#author { + float: right; + font-size: 1em; + margin-top: 15px; +} +.social{ + clear: both; + display: flex; + justify-content: space-between; + margin-top: 60px; + font-size: 1.5em; +} +button{ + padding: 10px 12px; + background-color: orange; + color: white; + outline: none; + border-radius: 3px; + font-size: 0.5em; + cursor: pointer; + min-width: 50px; +} +#next { + font-family: 'Poppins' , sans-serif; + font-size: 0.5em; + color: white; + border-radius: 3px; + cursor: pointer; + min-width: 50px; +} +button :hover{ + opacity: 0.5; + transition: 0.1s ease-in-out; + color:black; +} diff --git a/Week1/project/index.html b/Week1/project/index.html index 87d3c8b86..6d10812a3 100644 --- a/Week1/project/index.html +++ b/Week1/project/index.html @@ -1 +1,30 @@ - \ No newline at end of file + + + + + + + My Fav Quotes + + + + + + +
+

Carry out a random act of kindness, with no expectation of + reward, safe in the knowledge that one day someone might do the same for you.

+

Princess Diana

+
+
+ + +
+ +
+
+ + + + + \ No newline at end of file diff --git a/Week1/project/index.js b/Week1/project/index.js index 8427aa356..20ee60727 100644 --- a/Week1/project/index.js +++ b/Week1/project/index.js @@ -1 +1,38 @@ -// your code goes in here \ No newline at end of file +// your code goes in here + +const quote = document.querySelector('#quote'); +const author = document.querySelector('#author'); +const button = document.querySelector('#next'); +let numQuote = 0; +let numQuote1 = [0]; +button.addEventListener('click', () => { + do { + numQuote = Math.floor(Math.random() * quotes.length); + } while (numQuote1[numQuote1.length - 1] === numQuote); + numQuote1.push(numQuote); + quote.textContent = `${quotes[numQuote].quote}`; + author.textContent = `${quotes[numQuote].author}`; +}); + +const quotes = [ + { + quote: "Carry out a random act of kindness, with no expectation of reward, safe in the knowledge that one day someone might do the same for you.", + author: "princess Diana" + }, + { + quote: "Be yourself, everyone else is already taken.", + author: "Oscar Wilde" + }, + { + quote: "Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.", + author: "Albert Einstein" + }, + { + quote: "A room without books is like a body without a soul.", + author: "Marcus Tullius Cicero" + }, + { + quote: "Be the change that you wish to see in the world.", + author: "Mahatma Gandhi" + } +] diff --git a/Week2/js-exercises/ex1-oddOnesOut.js b/Week2/js-exercises/ex1-oddOnesOut.js index 4f42050ac..3bb82e975 100644 --- a/Week2/js-exercises/ex1-oddOnesOut.js +++ b/Week2/js-exercises/ex1-oddOnesOut.js @@ -7,15 +7,21 @@ 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; -} +// 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]; -console.log(doubleEvenNumbers(myNumbers)); // Logs "[4, 8]" to the console \ No newline at end of file + +const doubleEvenNumbers = myNumbers.filter(number => number % 2 === 0).map(number => number * 2); + +console.log(doubleEvenNumbers); \ No newline at end of file diff --git a/Week2/js-exercises/ex2-whatsYourMondayWorth.js b/Week2/js-exercises/ex2-whatsYourMondayWorth.js index 47cea70ba..fa011c09f 100644 --- a/Week2/js-exercises/ex2-whatsYourMondayWorth.js +++ b/Week2/js-exercises/ex2-whatsYourMondayWorth.js @@ -14,25 +14,29 @@ function dayWorth(tasks, hourlyRate) { // put your code in here, the function does returns a euro formatted string + return `€${ + tasks.map(task => (task.duration / 60) * hourlyRate) + .reduce((total, currentvalue) => total + currentvalue, 0)}`; } 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, - }, + 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, +}, ]; console.log(dayWorth(mondayTasks, 25)) -console.log(dayWorth(mondayTasks, 13.37)) \ No newline at end of file +console.log(dayWorth(mondayTasks, 13.37)) +console.log(dayWorth(mondayTasks, 20)) \ No newline at end of file diff --git a/Week2/js-exercises/ex3-lemonAllergy.js b/Week2/js-exercises/ex3-lemonAllergy.js index 54ac8da04..757eb0079 100644 --- a/Week2/js-exercises/ex3-lemonAllergy.js +++ b/Week2/js-exercises/ex3-lemonAllergy.js @@ -13,9 +13,9 @@ function takeOutLemons(basket) { - // your code goes in here. The output is a string + return basket.filter(fruit => fruit !== '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..20aebad37 100644 --- a/Week2/js-exercises/ex4-collectiveAge.js +++ b/Week2/js-exercises/ex4-collectiveAge.js @@ -9,25 +9,26 @@ */ function collectiveAge(people) { - // return the sum of age for all the people + return people.map(member => member.age) + .reduce((totalAge, currentValue) => totalAge + currentValue, 0); } const hackYourFutureMembers = [{ - name: 'Wouter', - age: 33 - }, - { - name: 'Federico', - age: 32 - }, - { - name: 'Noer', - age: 27 - }, - { - name: 'Tjebbe', - age: 22 - }, + name: 'Wouter', + age: 33 +}, +{ + name: 'Federico', + age: 32 +}, +{ + name: 'Noer', + age: 27 +}, +{ + name: 'Tjebbe', + 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)); \ No newline at end of file diff --git a/Week2/js-exercises/ex5-myFavoriteHobbies.html b/Week2/js-exercises/ex5-myFavoriteHobbies.html index 06ab17d45..b59d1bf07 100644 --- a/Week2/js-exercises/ex5-myFavoriteHobbies.html +++ b/Week2/js-exercises/ex5-myFavoriteHobbies.html @@ -1,5 +1,15 @@ - + + - + + + + 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..b9e969bae 100644 --- a/Week2/js-exercises/ex5-myFavoriteHobbies.js +++ b/Week2/js-exercises/ex5-myFavoriteHobbies.js @@ -9,7 +9,11 @@ */ function createHTMLList(arr) { - // your code goes in here + const list0fHobbies = document.body.appendChild(document.createElement('ul')); + console.log(list0fHobbies); + arr.map(hobby => { + list0fHobbies.innerHTML += `
  • ${hobby}
    • `; + }); } const myHobbies = [ @@ -18,4 +22,5 @@ const myHobbies = [ 'Programming', 'Hanging out with friends', 'Going to the gym', -]; \ No newline at end of file +]; +createHTMLList(myHobbies); \ No newline at end of file diff --git a/Week2/project/index.html b/Week2/project/index.html index 664b242d3..18a6f028e 100644 --- a/Week2/project/index.html +++ b/Week2/project/index.html @@ -5,11 +5,30 @@ Pomodoro Clock + + +
    - +

    Pomodoro Clock

    +

    Session Length

    +
    + + 15 + +
    +
    +

    Session

    +

    15 : 00

    +
    +
    + + + +
    diff --git a/Week2/project/index.js b/Week2/project/index.js index 5b306f0f2..e69de29bb 100644 --- a/Week2/project/index.js +++ b/Week2/project/index.js @@ -1,10 +0,0 @@ -/** - 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 diff --git a/Week2/project/style.css b/Week2/project/style.css new file mode 100644 index 000000000..7f0a53789 --- /dev/null +++ b/Week2/project/style.css @@ -0,0 +1,56 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Roboto', sans-serif; +} +body { + background-color: #1E666C; + color: white; +} +h1{ + font-size: 3.5em; + margin-bottom: 40px; +} +button{ + background-color: #1E666C; + color: white; + padding: 10px; + outline: none; + border: none; + cursor: pointer; + font-size: 25px; +} +button :hover{ + transition: all 0.3s; + opacity: 0.7; + transform: scale(1.1); +} +#app { + margin: 50px auto; + width: 50%; + text-align: center; +} +.timer{ + font-size: 25px; + margin: 0 15px; +} +#showcase{ + width: 50%; + margin: 12px auto; + padding: 15px; + border: 5px solid pink; + border-radius: 30px; +} +p{ + font-size: 2em; +} +#spanM, #spanS{ + font-family: 'Orbitron', sans-serif; +} +#play{ + margin-right: 1px; +} +.fade{ + opacity: 0.5; +} diff --git a/Week3/js-exercises/ex1-AddSix.js b/Week3/js-exercises/ex1-AddSix.js index a801a72fd..fd27371a5 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( /* ???? */ ) { - // Put here your logic... +function createBase(base) { + function add(number) { + return base + number; + } + return add } const addSix = createBase(6); // Put here your function calls... -console.log(addSix()); \ No newline at end of file +console.log(addSix(9)); +console.log(addSix(18)); +console.log(addSix(30)); \ No newline at end of file diff --git a/Week3/js-exercises/ex2-RemoveDuplicates.js b/Week3/js-exercises/ex2-RemoveDuplicates.js index aa9d0d7d0..872d7a07b 100644 --- a/Week3/js-exercises/ex2-RemoveDuplicates.js +++ b/Week3/js-exercises/ex2-RemoveDuplicates.js @@ -9,13 +9,10 @@ does not return anything but removes any duplicate elements from the array. */ - - -// WRITE YOUR FUNCTION HERE - const letters = ['a', 'b', 'c', 'd', 'a', 'e', 'f', 'c', 'b']; -removeDuplicates(letter); +function removeDuplicates(arr) { + return arr.filter((a, b) => arr.indexOf(a) === b) +}; -if (letters === ['a', 'b', 'c', 'd', 'e', 'f']) - console.log("Hooray!") \ No newline at end of file +console.log(removeDuplicates(letters)); \ No newline at end of file diff --git a/Week3/js-exercises/ex3-GuessTheOutput.js b/Week3/js-exercises/ex3-GuessTheOutput.js index 7d783ceef..143e8fd7e 100644 --- a/Week3/js-exercises/ex3-GuessTheOutput.js +++ b/Week3/js-exercises/ex3-GuessTheOutput.js @@ -11,11 +11,15 @@ Write out your reasoning in 50 words or less. let a = 10; +// we declared a as variable and we assigned 10 to it as a value // const x = (function () { + // here we updated the value of (a) and the new value is 12// a = 12; + + // the value of x = 12 return function () { alert(a); }; })(); - +// the output for the function(x) = 12 x(); \ No newline at end of file diff --git a/Week3/js-exercises/ex4-GuessMore.js b/Week3/js-exercises/ex4-GuessMore.js index 81a4ec273..74fad09b8 100644 --- a/Week3/js-exercises/ex4-GuessMore.js +++ b/Week3/js-exercises/ex4-GuessMore.js @@ -14,7 +14,9 @@ function f1(val) { val = val + 1; return val; } +// when the function f() will be executed it will increase the value of x by 1 so the result will be x = 10// f1(x); +// the function will not change the variable of x so the value will be the same so the output = 9// console.log(x); const y = { @@ -25,5 +27,11 @@ function f2(val) { val.x = val.x + 1; return val; } +// when we call the function it will increase the obj y so the output will be 10 f2(y); -console.log(y); \ No newline at end of file +console.log(y); + +/* +when (x) is passed as an argument of (f1) it will not change the original value of (x) becouse the function will only get to know the value not the argument location. +but when (y) object passed as an argument to (f2) function (that the argument key value ) it will alson change the value of (y) becouse if the function changes an object property it will chaange the orignail value as well . +*/ diff --git a/Week3/js-exercises/ex5-LotteryMachine.js b/Week3/js-exercises/ex5-LotteryMachine.js index ad09b963c..a8ec41b80 100644 --- a/Week3/js-exercises/ex5-LotteryMachine.js +++ b/Week3/js-exercises/ex5-LotteryMachine.js @@ -28,11 +28,27 @@ Don't you just love the thrill of the lottery? What if I told you we can make ou function threeFive(startIndex, stopIndex, threeCallback, fiveCallback) { const numbers = []; - // make array - // start at beginning of array and check if you should call threeCallback or fiveCallback or go on to next -} + for (let currentIndex = startIndex; currentIndex <= stopIndex; currentIndex++) { + numbers.push(currentIndex); + } + numbers.forEach(item => { + if (item % 3 === 0 && item % 5 === 0) { + console.log(item + ' is divisible by both ' + threeCallback() + ' and ' + fiveCallback()); + } else if (item % 3 === 0) { + console.log(item + ' is divisible by ' + threeCallback()); + } else if (item % 5 === 0) { + console.log(item + ' is divisible by ' + fiveCallback()); + } + }); +} +function sayThree() { + return 3; +} +function sayFive() { + return 5; +} 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/index.html b/Week3/project/index.html index fac819b21..e704740e2 100644 --- a/Week3/project/index.html +++ b/Week3/project/index.html @@ -4,12 +4,45 @@ - Tip Calculator + tip Calculator + -
    +
    +

    TIP CALCULATOR

    +
    +
    +

    How much was your bill? +

    + $ +

    How was your service? +

    + +

    +

    How many people are sharing the bill?

    + + people + +
    +
    + $0.00 + Each person +
    +
    + +
    +
    +
    - \ No newline at end of file + diff --git a/Week3/project/index.js b/Week3/project/index.js index e12fb76ed..6b8a9e69d 100644 --- a/Week3/project/index.js +++ b/Week3/project/index.js @@ -1,3 +1,46 @@ -// Your code goes in here +const modelClass = document.querySelector('.model'); +const result = document.getElementById('result'); -document.querySelector("#app").innerText = "Tip Calculator"; \ No newline at end of file +function calculateTip() { + let billAmount = document.getElementById("billamount").value; + let serviceRating = document.getElementById("serviceRating").value; + let amountOfPeople = document.getElementById("peopleAmount").value; + try { + if (billAmount == "") throw "Insert in the bill amount please !!!"; + if (isNaN(billAmount)) throw "Insert any number for bill amount"; + billAmount = Number(billAmount); + if (billAmount <= 0) throw "Insert a number greater then Zero"; + + if (serviceRating == 0) throw "Rate the service"; + serviceRating = Number(serviceRating); + + if (amountOfPeople == "") throw "Insert no. of people fields"; + if (isNaN(amountOfPeople)) throw "Please insert any number for the amount of people"; + amountOfPeople = Number(amountOfPeople); + if (amountOfPeople <= 0) throw "Insert a number greater then zero for the number of people!!!"; + if (Math.floor(amountOfPeople) !== amountOfPeople) throw "Insert an integer number for the amount of people!!!"; + const total = ((billAmount * serviceRating) / amountOfPeople).toFixed(2); + + (amountOfPeople === 1) ? document.getElementById("eachPerson").style.display = "none" : document.getElementById("eachPerson").style.display = "block"; + + document.getElementById("totalTip").style.display = "block"; + document.getElementById("tip").innerHTML = total; + + } + catch (errorMessage) { + modelClass.style.display = 'block'; + result.innerHTML = ` +

    Information

    +
    +

    ${errorMessage}

    + `; + setTimeout(function () { modelClass.style.display = 'none'; }, 2000); + } +} + +document.getElementById("totalTip").style.display = "none"; +document.getElementById("eachPerson").style.display = "none"; + +document.getElementById("calculate").addEventListener('click', function () { + calculateTip() +}); diff --git a/Week3/project/style.css b/Week3/project/style.css new file mode 100644 index 000000000..54e4eaff6 --- /dev/null +++ b/Week3/project/style.css @@ -0,0 +1,145 @@ +body { + font-family: 'Roboto', Helvetica, sans-serif; + background: linear-gradient(to left, rgb(71, 48, 133), rgb(31, 28, 24)); +} + +#app { + height: 500px; + width: 370px; + margin: 100px auto; + background: #f7f7f7; + box-shadow: 0 0 3px rgba(86, 115, 138, 0.1); + border-radius: 20px; +} + +h1 { + background: rgb(127, 112, 167); + color: rgb(255, 255, 255); + margin: 0; + padding: 10px 100px; + font-size: 18px; + font-weight: normal; + border-top-left-radius: 20px; + border-top-right-radius: 20px; +} + +p { + padding-left: 15px; +} + +form input[type="text"] { + width: 70px; +} + +input { + padding-left: 20px; +} + +#billamount { + font-size: 15px; + color: rgb(43, 11, 117); + background-color: #f7f7f7; + width: 50%; + padding: 5px 5px 5px 5px; +} + +#billamount:focus { + background: rgb(255, 255, 255); + border: 3px solid #2980b9; + outline: none; +} + +#peopleAmount { + width: 50%; + padding: 5px 5px 8px 8px; + margin-left: 20px; + color: rgb(23, 60, 109); + background-color: #f7f7f7; + font-size: 15px; +} + +#serviceRating { + padding: 10px 10px 10px 10px; + margin-left: 20px; + font-size: 15px; + color: rgb(23, 60, 109); +} + +button { + font-weight: bold; + display: block; + margin: 30px auto; + background: rgb(173, 19, 58); + border-radius: 5px; + width: 200px; + height: 50px; + font-size: 17px; + color: rgb(255, 255, 255); +} + +button:hover { + background: #4b2726; + border-bottom-color: rgb(17, 17, 17); +} + +button:active { + position: relative; + top: 1px; +} + +#totalTip { + font-size: 30px; + margin-top: 5px; + text-align: center; +} + +#totalTip:before { + content: "Tip amount"; + font-size: 20px; + font-weight: bold; + display: block; + text-transform: uppercase; +} + +#totalTip sup { + font-size: 20px; + top: -18px; +} + +#totalTip small { + font-size: 20px; + font-weight: bold; + display: block; +} + +/* Modal css */ +.model { + display: none; + position: fixed; + z-index: 10; + left: 0; + top: 0; + height: 100%; + width: 100%; + overflow: auto; + background: rgba(0, 0, 0, 0.5); +} + +.modalContent { + background: rgb(255, 255, 255); + text-align: center; + margin: 10% auto; + font-size: 1.2rem; + width: 350px; + border-radius: 10px; + padding: 2rem; + box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.17); + animation-name: modalopen; + animation-duration: 1s; +} + +.modalContent h2 { + margin-bottom: 1rem; + padding: 0; + color: rgb(31, 3, 12); +}