From 91f46866760c3852a72daffea424ac9b2e4fe991 Mon Sep 17 00:00:00 2001 From: Andrej Date: Sat, 14 Dec 2019 10:25:10 +0100 Subject: [PATCH 01/25] Update README.md --- Week1/README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/Week1/README.md b/Week1/README.md index 659fdabda..b23e92069 100644 --- a/Week1/README.md +++ b/Week1/README.md @@ -23,7 +23,7 @@ A web browser is software that allows you to access websites. ### How a browser works -In your journey into becomeing a web developer it's important to know the tools you'll be using intimately. One such is the browser, which will be used to display your websites. In the following resources you'll learn about the many parts any web browser consists of and what their use is: +In your journey into becoming a web developer it's important to know the tools you'll be using intimately. One such is the browser, which will be used to display your websites. In the following resources you'll learn about the many parts any web browser consists of and what their use is: - [How a web browser functions](https://www.youtube.com/watch?v=z0HN-fG6oT4) - [How do web browsers work?](https://medium.com/@monica1109/how-does-web-browsers-work-c95ad628a509) @@ -110,13 +110,13 @@ body.appendChild(newParagraph); In this example we're executing the following steps: -1. We're first selecting the body: this is always necessary, as we can only add or remove elements from the body of the document -2. Secondly, we're creating a new DOM element: a

element -3. Thirdly, we're injecting content into the element -4. Fourthly, we give our element a background color -5. Finally, we add the

element in the body +1. Selecting the body: this is always necessary, as we can only add or remove elements from the body of the document +2. Creating a new DOM element: a paragraph i.e. a `

` element +3. Injecting content into the newly create paragraph element +4. Setting the background color for the newly create paragraph element +5. Adding the newly create paragraph element element to the body -Test this code out by copying and pasting it in the Developer Console of your browser. After you've pressed the Enter/Return key you will find your new

at the end of the page! +Test this code out by copying and pasting it in the Developer Console of your browser. After you've pressed the Enter/Return key you will find your new `

` at the end of the page! Learning how to write JavaScript that targets the DOM is an essential part of being a web developer. In the following resources you'll more about how to do that: From 96612e4e0b53b3af397974f0d255a3bd29d090dc Mon Sep 17 00:00:00 2001 From: gajduk-mansystems Date: Sat, 29 Feb 2020 15:57:54 +0100 Subject: [PATCH 02/25] week2 - demo for project --- Week2/MAKEME.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index 0e30a020c..0ad6a8ed3 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -152,6 +152,8 @@ Here are the requirements: - Display minutes and seconds - If the timer finishes the timer should be replaced by the message: `Time's up!` +If you are having trouble understanding the functionality check this [demo](https://pomodoroclock-sandbox.mxapps.io). + Good luck! ## **SUBMIT YOUR HOMEWORK!** From 6a0512c2acafcea6e90e345651178d343721bd17 Mon Sep 17 00:00:00 2001 From: gajduk-mansystems Date: Sun, 1 Mar 2020 12:58:50 +0100 Subject: [PATCH 03/25] week2 structure --- Week2/MAKEME.md | 4 +- Week2/js-exercises/ex1-oddOnesOut.js | 21 ++++++++++ .../js-exercises/ex2-whatsYourMondayWorth.js | 38 +++++++++++++++++++ Week2/js-exercises/ex3-lemonAllergy.js | 21 ++++++++++ Week2/js-exercises/ex4-collectiveAge.js | 33 ++++++++++++++++ Week2/js-exercises/ex5-myFavoriteHobbies.html | 5 +++ Week2/js-exercises/ex5-myFavoriteHobbies.js | 21 ++++++++++ Week2/project/index.html | 17 +++++++++ Week2/project/index.js | 10 +++++ 9 files changed, 168 insertions(+), 2 deletions(-) create mode 100644 Week2/js-exercises/ex1-oddOnesOut.js create mode 100644 Week2/js-exercises/ex2-whatsYourMondayWorth.js create mode 100644 Week2/js-exercises/ex3-lemonAllergy.js create mode 100644 Week2/js-exercises/ex4-collectiveAge.js create mode 100644 Week2/js-exercises/ex5-myFavoriteHobbies.html create mode 100644 Week2/js-exercises/ex5-myFavoriteHobbies.js create mode 100644 Week2/project/index.html create mode 100644 Week2/project/index.js diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index 0e30a020c..69d70c18b 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -15,7 +15,7 @@ Before we head into the exercises, it might be nice to do some interactive exerc ## **2. JavaScript exercises** -> Inside of your `JavaScript2` fork, create a folder called `week2`. Inside of that folder, create a folder called `js-exercises`. For all the following exercises create a new `.js` file in that folder (5 files in total). Make sure the name of each file reflects its content: for example, the filename for exercise one could be `oddOnesOut.js`. +> Inside of your `JavaScript2` fork, find the folder called `Week2`. Inside of that folder, find the folder called `js-exercises`. In this folder you will find five `.js` files, one for each exercise where you need to write your code. Please use the correct file for the respective exercise. **Exercise 1: The odd ones out** @@ -137,7 +137,7 @@ Programming can be used to not only make websites, but also games! In the follow > Every week ends with a project you have to build on your own. Instead of getting clear-cut instructions, you'll get a list of criteria that your project needs to measure up to. -> Before you start, create a new folder called `project` that includes the files for the following app you'll be building. +> Write the project code in the folder `Week3 \ project`. 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. diff --git a/Week2/js-exercises/ex1-oddOnesOut.js b/Week2/js-exercises/ex1-oddOnesOut.js new file mode 100644 index 000000000..4f42050ac --- /dev/null +++ b/Week2/js-exercises/ex1-oddOnesOut.js @@ -0,0 +1,21 @@ +/** + + ** Exercise 1: The odd ones out ** + + Rewrite the following function using map and filter. + Avoid using for loop or forEach. + 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 \ No newline at end of file diff --git a/Week2/js-exercises/ex2-whatsYourMondayWorth.js b/Week2/js-exercises/ex2-whatsYourMondayWorth.js new file mode 100644 index 000000000..47cea70ba --- /dev/null +++ b/Week2/js-exercises/ex2-whatsYourMondayWorth.js @@ -0,0 +1,38 @@ +/** + + ** Exercise 2: What 's your Monday worth? ** + + Write a function that finds out what your hourly rate on a Monday would be + Use the map array function to take out the duration time for each task. + Avoid using for loop or forEach. + Multiply each duration by a per - hour rate for billing and sum it all up. + Output a formatted Euro amount, rounded to Euro cents, e.g: €11.34. + Make sure the function can be used on any array of objects that contain a duration property with a number value + + */ + + +function dayWorth(tasks, hourlyRate) { + // put your code in here, the function does returns a euro formatted string +} + +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, + }, +]; + +console.log(dayWorth(mondayTasks, 25)) +console.log(dayWorth(mondayTasks, 13.37)) \ No newline at end of file diff --git a/Week2/js-exercises/ex3-lemonAllergy.js b/Week2/js-exercises/ex3-lemonAllergy.js new file mode 100644 index 000000000..54ac8da04 --- /dev/null +++ b/Week2/js-exercises/ex3-lemonAllergy.js @@ -0,0 +1,21 @@ +/** + + ** Exercise 3: Lemon allergy ** + + Your mom bought you a basket of fruit, because you 're doing so well in HackYourFuture. How sweet of her! + However, she forgot that you are allergic to lemons!Let 's quickly dispose of them before you get an attack. + + Write a function that uses the filter array function to take out the lemons. + Avoid using for loop or forEach. + Output a string that says: "My mom bought me a fruit basket, containing [array of fruits] !" + + */ + + +function takeOutLemons(basket) { + // your code goes in here. The output is a string +} + +const fruitBasket = ['Apple', 'Lemon', 'Grapefruit', 'Lemon', 'Banana', 'Watermelon', 'Lemon']; + +console.log(takeOutLemons(fruitBasket)); \ No newline at end of file diff --git a/Week2/js-exercises/ex4-collectiveAge.js b/Week2/js-exercises/ex4-collectiveAge.js new file mode 100644 index 000000000..d17275cdc --- /dev/null +++ b/Week2/js-exercises/ex4-collectiveAge.js @@ -0,0 +1,33 @@ +/** + + ** Exercise 4: Collective age ** + + Have you ever wondered how old the HackYourFuture team members are ? Or better yet : what the collective age is ? Let 's find out! + + Write a function that calculates the combined age of every member + Avoid using for loop or forEach. + */ + +function collectiveAge(people) { + // return the sum of age for all the people +} + +const hackYourFutureMembers = [{ + 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 diff --git a/Week2/js-exercises/ex5-myFavoriteHobbies.html b/Week2/js-exercises/ex5-myFavoriteHobbies.html new file mode 100644 index 000000000..06ab17d45 --- /dev/null +++ b/Week2/js-exercises/ex5-myFavoriteHobbies.html @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/Week2/js-exercises/ex5-myFavoriteHobbies.js b/Week2/js-exercises/ex5-myFavoriteHobbies.js new file mode 100644 index 000000000..289c68380 --- /dev/null +++ b/Week2/js-exercises/ex5-myFavoriteHobbies.js @@ -0,0 +1,21 @@ +/** + + ** Exercise 5: My favorite hobbies ** + + Write a program that outputs each of these inside an HTML file + Create an HTML and JavaScript file, link them together + 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 myHobbies = [ + 'Meditation', + 'Reading', + 'Programming', + 'Hanging out with friends', + 'Going to the gym', +]; \ No newline at end of file diff --git a/Week2/project/index.html b/Week2/project/index.html new file mode 100644 index 000000000..664b242d3 --- /dev/null +++ b/Week2/project/index.html @@ -0,0 +1,17 @@ + + + + + + + Pomodoro Clock + + + +

+ +
+ + + + \ No newline at end of file diff --git a/Week2/project/index.js b/Week2/project/index.js new file mode 100644 index 000000000..5b306f0f2 --- /dev/null +++ b/Week2/project/index.js @@ -0,0 +1,10 @@ +/** + 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 From 68d25e869e7536643c5b80f5340b4a6a4a6df259 Mon Sep 17 00:00:00 2001 From: gajduk-mansystems Date: Sun, 1 Mar 2020 13:28:59 +0100 Subject: [PATCH 04/25] week1-homework-structure --- Week1/MAKEME.md | 28 ++++++++-------- Week1/js-exercises/ex1-bookList.html | 17 ++++++++++ Week1/js-exercises/ex1-bookList.js | 42 ++++++++++++++++++++++++ Week1/js-exercises/ex2-aboutMe.html | 24 ++++++++++++++ Week1/js-exercises/ex2-aboutMe.js | 11 +++++++ Week1/js-exercises/ex3-hijackLogo.js | 19 +++++++++++ Week1/js-exercises/ex4-whatsTheTime.html | 4 +++ Week1/js-exercises/ex4-whatsTheTime.js | 18 ++++++++++ Week1/js-exercises/ex5-catWalk.html | 15 +++++++++ Week1/js-exercises/ex5-catWalk.js | 13 ++++++++ Week1/project/index.css | 0 Week1/project/index.html | 1 + Week1/project/index.js | 1 + 13 files changed, 178 insertions(+), 15 deletions(-) create mode 100644 Week1/js-exercises/ex1-bookList.html create mode 100644 Week1/js-exercises/ex1-bookList.js create mode 100644 Week1/js-exercises/ex2-aboutMe.html create mode 100644 Week1/js-exercises/ex2-aboutMe.js create mode 100644 Week1/js-exercises/ex3-hijackLogo.js create mode 100644 Week1/js-exercises/ex4-whatsTheTime.html create mode 100644 Week1/js-exercises/ex4-whatsTheTime.js create mode 100644 Week1/js-exercises/ex5-catWalk.html create mode 100644 Week1/js-exercises/ex5-catWalk.js create mode 100644 Week1/project/index.css create mode 100644 Week1/project/index.html create mode 100644 Week1/project/index.js diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index 97fcb029f..9f6846072 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -15,7 +15,7 @@ Before we head into the exercises, it might be nice to do some interactive exerc ## **2. JavaScript exercises** -> Inside of your `JavaScript2` fork, create a folder called `week1`. Inside of that folder, create a folder called `js-exercises`. For all the following exercises create a new `.js` file in that folder (5 files in total). Make sure the name of each file reflects its content: for example, the filename for exercise one could be `bookList.js`. +> Inside of your `JavaScript2` fork, find the folder called `Week1`. Inside of that folder, find the folder called `js-exercises`. In this folder you will find five `.js` files (sometimes with a matching `.html` file), one for each exercise where you need to write your code. Please use the correct file for the respective exercise. **Exercise 1: The book list** @@ -52,7 +52,7 @@ https://hyf-js2-week1-makeme-ex1-demo.herokuapp.com/ **Exercise 2: About me** -Start with this HTML and save it as "about_me.html": +Given this HTML: ```html @@ -86,16 +86,15 @@ No homepage is safe from the logo bandit! Everytime he sees a Google Logo he rep In this exercise you're expected to write a JavaScript function that can be executed in the console of the [Google website](https://www.google.com). -1. Inside a JavaScript file, called `hijackGoogleLogo.js`, create a function called hijackGoogleLogo -2. Find out how to select the element that contains the Google logo, and store it in a variable -3. Modify the source and sourceset of the logo so that it's replaced by the HackYourFuture logo instead +1. Find out how to select the element that contains the Google logo, and store it in a variable +2. Modify the source and sourceset of the logo so that it's replaced by the HackYourFuture logo instead **Exercise 4: What's the time?** Why wear a watch when you can check the time, live in your webpage? -1. Create an empty HTML file, called `time.html` -2. Create a JavaScript file called `showCurrentTime.js` and include it in the HTML file +1. Create a basic HTML file +2. Include a script tag and link the JavaScript file 3. Inside the JS file, write a function that adds the current time to the webpage. Make sure it's written in the HH:MM:SS notation (hour, minute, second). Hint: use `setInterval()` to make sure the time stays current 4. Have the function execute when it's loading in the browser @@ -116,13 +115,12 @@ Start with this webpage, which has a single img tag of an animated GIF of a cat ``` -1. Add a script tag at the bottom of the page, where you'll put all your code. -2. Create a variable to store a reference to the img. -3. Change the style of the img to have a "left" of "0px", so that it starts at the left hand of the screens. -4. Create a function called catWalk() that moves the cat 10 pixels to the right of where it started, by changing the "left" style property. -5. Call that function every 50 milliseconds. Your cat should now be moving across the screen from left to right. Hurrah! -6. 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. -7. 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. +1. Create a variable to store a reference to the img. +2. Change the style of the img to have a "left" of "0px", so that it starts at the left hand of the screens. +3. Create a function called catWalk() that moves the cat 10 pixels to the right of where it started, by changing the "left" style property. +4. Call that function every 50 milliseconds. Your cat should now be moving across the screen from left to right. Hurrah! +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. ## **3. Code along** @@ -136,7 +134,7 @@ Enjoy! > Every week ends with a project you have to build on your own. Instead of getting clear-cut instructions, you'll get a list of criteria that your project needs to measure up to. -> Before you start, create a new folder called `project` that includes the files for the following app you'll be building. +> Write the project code in the folder `Week1 \ project`. In this week's project you'll be making a Random Quote Generator! It includes a text box and a simple button that, when clicked, take a random quote out of a set amount of quotes and show it in the page. Here's how it should look: diff --git a/Week1/js-exercises/ex1-bookList.html b/Week1/js-exercises/ex1-bookList.html new file mode 100644 index 000000000..b3864ac18 --- /dev/null +++ b/Week1/js-exercises/ex1-bookList.html @@ -0,0 +1,17 @@ + + + + + + + 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 new file mode 100644 index 000000000..2db54ba5e --- /dev/null +++ b/Week1/js-exercises/ex1-bookList.js @@ -0,0 +1,42 @@ +/** + + ** Exercise 1: The book list ** + + I 'd like to display my three favorite books inside a nice webpage! + + 1. Iterate through the array of books. + 2. For each book, create a `

` + element with the book title and author and append it to the page. + 3. Use a `