From 0dc837c2b2f4226c4f3b0ca5234f0183cbbe081b Mon Sep 17 00:00:00 2001 From: Noer Date: Thu, 30 Apr 2020 14:54:10 +0200 Subject: [PATCH 1/7] Update MAKEME.md --- Week3/MAKEME.md | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md index 58f28dc87..b79a054aa 100644 --- a/Week3/MAKEME.md +++ b/Week3/MAKEME.md @@ -25,7 +25,7 @@ Call the function three times. The return values should be: 1. 15 2. 24 -3. 36 +3. 33 It should look a little like this: @@ -48,7 +48,7 @@ Write a function called `removeDuplicates`, that takes in an array as an argumen const letters = ['a', 'b', 'b', 'c', 'd', 'a', 'e', 'f', 'f', 'c', 'b']; ``` -The function should modifies the original array: it should remove duplicate letters and `return` the result. +The function should create a copy of the original and return a modified version. This version should only include original letters, no duplicates! Use an array method to perform the operation. The end result should be: @@ -107,13 +107,15 @@ Write a function that takes 4 arguments. - A callback that executes if the number is divisible by 3 - A callback that executes if the number is divisible by 5 -The function should first generate an array containing values from start value to end value (inclusive). +The function should first generate an array, called `numbers`, containing values from start value to end value (inclusive). -Then the function should take the newly created array and iterate over it, and calling the first callback if the array value is divisible by 3. +Then the function should take the `numbers` array and iterate over it. -The function should call the second callback if the array value is divisible by 5. +If the array value is divisible by 3, call `threeCallback`. The return value of the callback should be "Number {NUM} is divisible by 3!". -Both functions should be called if the array value is divisible by both 3 and 5. +If the array value is divisible by 5, call `fiveCallback`. The return value of the callback should be "Number {NUM} is divisible by 5!". + +Both functions should be called if the array value is divisible by both 3 and 5. Here is a starter template: @@ -127,7 +129,6 @@ function threeFive(startIndex, stopIndex, threeCallback, fiveCallback) { threeFive(10, 15, sayThree, sayFive); // Should create an array [10,11,12,13,14,15] -// and call sayFive, sayThree, sayThree, sayFive ``` ## **3. Code along** From 5306a0df47421dcd52a733fad1f003270ad97e9d Mon Sep 17 00:00:00 2001 From: Saif Alamrani Date: Thu, 30 Apr 2020 17:06:13 +0200 Subject: [PATCH 2/7] Week 3 of JavaScript homework --- .DS_Store | Bin 6148 -> 6148 bytes Week1/js-exercises/ex1-bookList.html | 5 +- Week1/js-exercises/ex1-bookList.js | 80 +++++++++++++----- Week1/js-exercises/ex2-aboutMe.html | 6 +- Week1/js-exercises/ex2-aboutMe.js | 26 +++++- Week1/js-exercises/ex3-hijackLogo.js | 6 +- Week1/js-exercises/ex4-whatsTheTime.html | 31 ++++++- Week1/js-exercises/ex4-whatsTheTime.js | 6 +- Week1/js-exercises/ex5-catWalk.html | 2 +- Week1/js-exercises/ex5-catWalk.js | 31 ++++++- Week1/project/index.css | 65 ++++++++++++++ Week1/project/index.html | 31 ++++++- Week1/project/index.js | 39 ++++++++- Week2/js-exercises/ex1-oddOnesOut.js | 26 +++--- .../js-exercises/ex2-whatsYourMondayWorth.js | 36 ++++---- Week2/js-exercises/ex3-lemonAllergy.js | 4 +- Week2/js-exercises/ex4-collectiveAge.js | 35 ++++---- Week2/js-exercises/ex5-myFavoriteHobbies.html | 14 ++- Week2/js-exercises/ex5-myFavoriteHobbies.js | 9 +- Week2/project/index.html | 21 ++++- Week2/project/index.js | 10 --- Week2/project/style.css | 56 ++++++++++++ Week3/MAKEME.md | 15 ++-- Week3/js-exercises/ex1-AddSix.js | 11 ++- Week3/js-exercises/ex2-RemoveDuplicates.js | 11 +-- Week3/js-exercises/ex3-GuessTheOutput.js | 6 +- Week3/js-exercises/ex4-GuessMore.js | 3 + Week3/js-exercises/ex5-LotteryMachine.js | 20 ++++- Week3/project/index.html | 28 +++++- Week3/project/index.js | 27 +++++- Week3/project/style.css | 68 +++++++++++++++ 31 files changed, 605 insertions(+), 123 deletions(-) create mode 100644 Week2/project/style.css create mode 100644 Week3/project/style.css diff --git a/.DS_Store b/.DS_Store index 19f35c2d407a08177dbf67c9e46b596ee6108156..a8da5af437b41919496ceb7417a9ed6f1632d40d 100644 GIT binary patch delta 549 zcmZ{gJx{_=6owxZMG}ePV)zFxG&nmEU?5RUbZ|3)wgOryDK(B=aCdZfGE9b_#%%Px zB__8G^rkuYob!I%bLNeC -

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 `
    ` and `
  • ` to display the books. 4. Add an `` to each book that links to a URL of the book cover. - 5. Change the style of the book depending on whether you have read it(green) or not(red). + 5. Change the style of the book depending on whether you have read it(green) or not(red).// The end result should look something like this: https: //hyf-js2-week1-makeme-ex1-demo.herokuapp.com/ */ - function createBookList(books) { - // your code goes in here, return the ul element + const listOfBooks = document.createElement('ul'); + // iterate through the array by using for loop// + for (let i = 0; i < books.length; i++) { + + // creating the list and the paragraph and the images // + + const listItem = document.createElement('li'); + const listTitle = document.createElement('p'); + const listImg = document.createElement('img'); + listImg.setAttribute('src', imgCoverUrl[i]); + + //style// + + listOfBooks.style.display = 'flex'; + listItem.style.listStyleType = 'none'; + listItem.style.margin = '20px'; + listItem.style.padding = '15px'; + listImg.style.width = '300px'; + listImg.style.height = '425px'; + // Change the style of the book depending on whether you have read it(green) or not(red).// + const BookIsRead = books[i].alreadyRead; + if (BookIsRead === true) { + listItem.style.backgroundColor = 'green'; + } + else { + listItem.style.backgroundColor = 'red'; + } + + const bookTitle = books[i].title; + const bookAutohr = books[i].author; + const bookHeader = document.createTextNode(bookTitle + ' by ' + bookAutohr); + + listTitle.appendChild(bookHeader); + listItem.appendChild(listTitle); + listItem.appendChild(listImg); + listOfBooks.appendChild(listItem); + } + return listOfBooks; + } +let imgCoverUrl = []; +imgCoverUrl[0] = 'https://s.s-bol.com/imgbase0/imagebase3/large/FC/4/8/4/2/9200000010922484.jpg'; +imgCoverUrl[1] = 'https://s.s-bol.com/imgbase0/imagebase3/large/FC/9/0/1/4/1001004011834109.jpg'; +imgCoverUrl[2] = 'https://s.s-bol.com/imgbase0/imagebase3/large/FC/5/5/0/5/9200000110185055.jpg'; const books = [{ - title: 'The Design of Everyday Things', - author: 'Don Norman', - alreadyRead: false - }, - { - title: 'The Most Human Human', - author: 'Brian Christian', - alreadyRead: true - }, - { - title: 'The Pragmatic Programmer', - author: 'Andrew Hunt', - alreadyRead: true - } + title: 'The Design of Everyday Things', + author: 'Don Norman', + alreadyRead: false +}, +{ + title: 'The Most Human Human', + author: 'Brian Christian', + alreadyRead: true +}, +{ + title: 'The Pragmatic Programmer', + author: 'Andrew Hunt', + alreadyRead: true +} ]; let ulElement = createBookList(books); - -document.querySelector("#bookList").appendChild(ulElement); \ No newline at end of file +document.querySelector('#bookList').appendChild(ulElement); \ No newline at end of file diff --git a/Week1/js-exercises/ex2-aboutMe.html b/Week1/js-exercises/ex2-aboutMe.html index 5e77f49a6..9cbdaa971 100644 --- a/Week1/js-exercises/ex2-aboutMe.html +++ b/Week1/js-exercises/ex2-aboutMe.html @@ -4,9 +4,6 @@ About Me - - - @@ -17,8 +14,7 @@

    About Me

  • Favorite food:
  • Hometown:
- - + \ 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/MAKEME.md b/Week3/MAKEME.md index b79a054aa..58f28dc87 100644 --- a/Week3/MAKEME.md +++ b/Week3/MAKEME.md @@ -25,7 +25,7 @@ Call the function three times. The return values should be: 1. 15 2. 24 -3. 33 +3. 36 It should look a little like this: @@ -48,7 +48,7 @@ Write a function called `removeDuplicates`, that takes in an array as an argumen const letters = ['a', 'b', 'b', 'c', 'd', 'a', 'e', 'f', 'f', 'c', 'b']; ``` -The function should create a copy of the original and return a modified version. This version should only include original letters, no duplicates! Use an array method to perform the operation. +The function should modifies the original array: it should remove duplicate letters and `return` the result. The end result should be: @@ -107,15 +107,13 @@ Write a function that takes 4 arguments. - A callback that executes if the number is divisible by 3 - A callback that executes if the number is divisible by 5 -The function should first generate an array, called `numbers`, containing values from start value to end value (inclusive). +The function should first generate an array containing values from start value to end value (inclusive). -Then the function should take the `numbers` array and iterate over it. +Then the function should take the newly created array and iterate over it, and calling the first callback if the array value is divisible by 3. -If the array value is divisible by 3, call `threeCallback`. The return value of the callback should be "Number {NUM} is divisible by 3!". +The function should call the second callback if the array value is divisible by 5. -If the array value is divisible by 5, call `fiveCallback`. The return value of the callback should be "Number {NUM} is divisible by 5!". - -Both functions should be called if the array value is divisible by both 3 and 5. +Both functions should be called if the array value is divisible by both 3 and 5. Here is a starter template: @@ -129,6 +127,7 @@ function threeFive(startIndex, stopIndex, threeCallback, fiveCallback) { threeFive(10, 15, sayThree, sayFive); // Should create an array [10,11,12,13,14,15] +// and call sayFive, sayThree, sayThree, sayFive ``` ## **3. Code along** 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..329cfdba1 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,6 @@ 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 diff --git a/Week3/js-exercises/ex5-LotteryMachine.js b/Week3/js-exercises/ex5-LotteryMachine.js index ad09b963c..4faf2e9c1 100644 --- a/Week3/js-exercises/ex5-LotteryMachine.js +++ b/Week3/js-exercises/ex5-LotteryMachine.js @@ -26,13 +26,25 @@ 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) { +function threeFive(startIndex, stopIndex, threeCallback = 3, fiveCallback = 5) { const numbers = []; - // make array - // start at beginning of array and check if you should call threeCallback or fiveCallback or go on to next + const sayWhat = []; + + for (let i = startIndex; i <= stopIndex; i++) { + numbers.push(i); + } + for (let i = 0; i < numbers.length; i++) { + if (i % threeCallback === 0) { + sayWhat.push("three"); + } + else if (i % fiveCallback === 0) { + sayWhat.push("five"); + } + } + return numbers + "\n" + sayWhat; } -threeFive(10, 15, sayThree, sayFive); +console.log(threeFive(10, 15, threeFive, threeFive)); // 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..7a1ed479e 100644 --- a/Week3/project/index.html +++ b/Week3/project/index.html @@ -4,11 +4,37 @@ + Tip Calculator + -
    +
    +
    +

    Tip Calculator

    +
    +
    +

    How Much Was Your Bill ?

    + $ +

    How Was Your Service ?

    + +

    How Many People Sharing The Table

    + People +
    + +
    +

    tip amount

    +

    $

    +

    Each

    +
    +
    diff --git a/Week3/project/index.js b/Week3/project/index.js index e12fb76ed..a0eb55e89 100644 --- a/Week3/project/index.js +++ b/Week3/project/index.js @@ -1,3 +1,26 @@ -// Your code goes in here -document.querySelector("#app").innerText = "Tip Calculator"; \ No newline at end of file +const person = document.querySelector("#person"); +const btn = document.querySelector("#calc"); +const service = document.getElementById("service"); +const result = document.querySelector("#result"); +const each = document.querySelector("#each"); + +function calculte() { + const billContentS = document.getElementById("bill").value; + let bill = parseInt(billContentS); + const serv = parseInt(service.value); + const eachPerson = parseInt(person.value); + + let percentage = (bill * serv) / 100; + + let dividedOnpeople = Math.floor(percentage / eachPerson); + + result.innerText = "$ " + dividedOnpeople; + result.style.display = "block"; + + if (eachPerson > 1) { + each.style.display = "block"; + } +} + +btn.addEventListener("click", calculte); diff --git a/Week3/project/style.css b/Week3/project/style.css new file mode 100644 index 000000000..71a6c066f --- /dev/null +++ b/Week3/project/style.css @@ -0,0 +1,68 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.fontSize{ + text-align: center; + font-weight: bold; + font-size: large; +} +body { + width: 100%; + height: 100vh; + margin: 0; + padding: 0; + background-color: rgb(85, 30, 20); +} +.container{ + background-color: white; + width: 40%; + margin: 30px auto; + border-radius: 15px; + padding: 5px; +} +.showScreen{ + padding: 20px; +} +.top { + background-color: black; + border-radius: 15px 15px 0px 0px; + text-align: center; + color: white; + width: 100%; + margin: 0 0 5px 0; + height: 40%; + display: flex; + align-items: center; + justify-content: center; +} +select { + width: 50%; + height: 60px; + padding: 15px; +} +#clac { + background-color: rgb(159, 39, 61); + border: none; + border-radius: 10px; + width: 70%; + height: 40px; + margin: 20px 50px; + outline: none; + box-shadow: 0px 5px 10px rgb(51, 50, 50); +} +#calc:hover { + cursor: pointer; + color: rgb(159, 39, 61); + background-color: black; +} + +#result, +#each { + display: none; +} +button { + margin-left: 20px; +} \ No newline at end of file From 1a8a067aee3899c67169a262d1321f65e5ba8b83 Mon Sep 17 00:00:00 2001 From: saifamrani <55050364+saifamrani@users.noreply.github.com> Date: Sun, 24 May 2020 15:57:30 +0200 Subject: [PATCH 3/7] Update ex5-LotteryMachine.js --- Week3/js-exercises/ex5-LotteryMachine.js | 34 +++++++++++++----------- 1 file changed, 19 insertions(+), 15 deletions(-) diff --git a/Week3/js-exercises/ex5-LotteryMachine.js b/Week3/js-exercises/ex5-LotteryMachine.js index 4faf2e9c1..a8ec41b80 100644 --- a/Week3/js-exercises/ex5-LotteryMachine.js +++ b/Week3/js-exercises/ex5-LotteryMachine.js @@ -26,25 +26,29 @@ Don't you just love the thrill of the lottery? What if I told you we can make ou */ -function threeFive(startIndex, stopIndex, threeCallback = 3, fiveCallback = 5) { +function threeFive(startIndex, stopIndex, threeCallback, fiveCallback) { const numbers = []; - const sayWhat = []; - for (let i = startIndex; i <= stopIndex; i++) { - numbers.push(i); + for (let currentIndex = startIndex; currentIndex <= stopIndex; currentIndex++) { + numbers.push(currentIndex); } - for (let i = 0; i < numbers.length; i++) { - if (i % threeCallback === 0) { - sayWhat.push("three"); + 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()); } - else if (i % fiveCallback === 0) { - sayWhat.push("five"); - } - } - return numbers + "\n" + sayWhat; + }); } - -console.log(threeFive(10, 15, threeFive, threeFive)); +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 From d447751f95a9facf12c72c981a0b2f29a3e7e444 Mon Sep 17 00:00:00 2001 From: saifamrani <55050364+saifamrani@users.noreply.github.com> Date: Sun, 24 May 2020 16:08:28 +0200 Subject: [PATCH 4/7] Update ex4-GuessMore.js --- Week3/js-exercises/ex4-GuessMore.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/Week3/js-exercises/ex4-GuessMore.js b/Week3/js-exercises/ex4-GuessMore.js index 329cfdba1..74fad09b8 100644 --- a/Week3/js-exercises/ex4-GuessMore.js +++ b/Week3/js-exercises/ex4-GuessMore.js @@ -29,4 +29,9 @@ function f2(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 . +*/ From 31a4e77e6e08d308c8231035ef119e9b7605283b Mon Sep 17 00:00:00 2001 From: saifamrani <55050364+saifamrani@users.noreply.github.com> Date: Sun, 24 May 2020 18:34:45 +0200 Subject: [PATCH 5/7] Update index.js --- Week3/project/index.js | 54 +++++++++++++++++++++++++++++------------- 1 file changed, 37 insertions(+), 17 deletions(-) diff --git a/Week3/project/index.js b/Week3/project/index.js index a0eb55e89..6b8a9e69d 100644 --- a/Week3/project/index.js +++ b/Week3/project/index.js @@ -1,26 +1,46 @@ +const modelClass = document.querySelector('.model'); +const result = document.getElementById('result'); -const person = document.querySelector("#person"); -const btn = document.querySelector("#calc"); -const service = document.getElementById("service"); -const result = document.querySelector("#result"); -const each = document.querySelector("#each"); +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"; -function calculte() { - const billContentS = document.getElementById("bill").value; - let bill = parseInt(billContentS); - const serv = parseInt(service.value); - const eachPerson = parseInt(person.value); + if (serviceRating == 0) throw "Rate the service"; + serviceRating = Number(serviceRating); - let percentage = (bill * serv) / 100; + 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); - let dividedOnpeople = Math.floor(percentage / eachPerson); + (amountOfPeople === 1) ? document.getElementById("eachPerson").style.display = "none" : document.getElementById("eachPerson").style.display = "block"; - result.innerText = "$ " + dividedOnpeople; - result.style.display = "block"; + document.getElementById("totalTip").style.display = "block"; + document.getElementById("tip").innerHTML = total; - if (eachPerson > 1) { - each.style.display = "block"; + } + catch (errorMessage) { + modelClass.style.display = 'block'; + result.innerHTML = ` +

    Information

    +
    +

    ${errorMessage}

    + `; + setTimeout(function () { modelClass.style.display = 'none'; }, 2000); } } -btn.addEventListener("click", calculte); +document.getElementById("totalTip").style.display = "none"; +document.getElementById("eachPerson").style.display = "none"; + +document.getElementById("calculate").addEventListener('click', function () { + calculateTip() +}); From 8cc7e059f2ccf33685a48547118e3a845e25153e Mon Sep 17 00:00:00 2001 From: saifamrani <55050364+saifamrani@users.noreply.github.com> Date: Sun, 24 May 2020 18:35:45 +0200 Subject: [PATCH 6/7] Update index.html --- Week3/project/index.html | 59 ++++++++++++++++++++++------------------ 1 file changed, 33 insertions(+), 26 deletions(-) diff --git a/Week3/project/index.html b/Week3/project/index.html index 7a1ed479e..e704740e2 100644 --- a/Week3/project/index.html +++ b/Week3/project/index.html @@ -4,38 +4,45 @@ - - Tip Calculator - + tip Calculator + -
    -
    -

    Tip Calculator

    +
    +

    TIP CALCULATOR

    +
    +
    +

    How much was your bill? +

    + $ +

    How was your service? +

    + +

    +

    How many people are sharing the bill?

    + + people +
    -
    -

    How Much Was Your Bill ?

    - $ -

    How Was Your Service ?

    - -

    How Many People Sharing The Table

    - People -
    - -
    -

    tip amount

    -

    $

    -

    Each

    +
    + $0.00 + Each person
    + +
    +
    +
    - \ No newline at end of file + From aea4304c1019164ec438bed4f09521a125ed7e53 Mon Sep 17 00:00:00 2001 From: saifamrani <55050364+saifamrani@users.noreply.github.com> Date: Sun, 24 May 2020 18:37:30 +0200 Subject: [PATCH 7/7] Update style.css --- Week3/project/style.css | 191 ++++++++++++++++++++++++++++------------ 1 file changed, 134 insertions(+), 57 deletions(-) diff --git a/Week3/project/style.css b/Week3/project/style.css index 71a6c066f..54e4eaff6 100644 --- a/Week3/project/style.css +++ b/Week3/project/style.css @@ -1,68 +1,145 @@ -*{ - margin: 0; - padding: 0; - box-sizing: border-box; +body { + font-family: 'Roboto', Helvetica, sans-serif; + background: linear-gradient(to left, rgb(71, 48, 133), rgb(31, 28, 24)); } -.fontSize{ - text-align: center; - font-weight: bold; - font-size: large; +#app { + height: 500px; + width: 370px; + margin: 100px auto; + background: #f7f7f7; + box-shadow: 0 0 3px rgba(86, 115, 138, 0.1); + border-radius: 20px; } -body { - width: 100%; - height: 100vh; + +h1 { + background: rgb(127, 112, 167); + color: rgb(255, 255, 255); margin: 0; - padding: 0; - background-color: rgb(85, 30, 20); + 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; } -.container{ - background-color: white; - width: 40%; + +#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; - border-radius: 15px; - padding: 5px; + background: rgb(173, 19, 58); + border-radius: 5px; + width: 200px; + height: 50px; + font-size: 17px; + color: rgb(255, 255, 255); } -.showScreen{ - padding: 20px; + +button:hover { + background: #4b2726; + border-bottom-color: rgb(17, 17, 17); } -.top { - background-color: black; - border-radius: 15px 15px 0px 0px; + +button:active { + position: relative; + top: 1px; +} + +#totalTip { + font-size: 30px; + margin-top: 5px; text-align: center; - color: white; - width: 100%; - margin: 0 0 5px 0; - height: 40%; - display: flex; - align-items: center; - justify-content: center; } -select { - width: 50%; - height: 60px; - padding: 15px; -} -#clac { - background-color: rgb(159, 39, 61); - border: none; - border-radius: 10px; - width: 70%; - height: 40px; - margin: 20px 50px; - outline: none; - box-shadow: 0px 5px 10px rgb(51, 50, 50); -} -#calc:hover { - cursor: pointer; - color: rgb(159, 39, 61); - background-color: black; -} - -#result, -#each { + +#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; -} -button { - margin-left: 20px; -} \ No newline at end of file + 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); +}