|
5 | 5 | 1. Practice the concepts |
6 | 6 | 2. JavaScript exercises |
7 | 7 | 3. Code along |
8 | | -4. PROJECT: |
| 8 | +4. PROJECT: The Pomodoro Clock |
9 | 9 |
|
10 | 10 | ## **1. Practice the concepts** |
11 | 11 |
|
12 | | -## **2. JavaScript exercises** |
| 12 | +Before we head into the exercises, it might be nice to do some interactive exercises first! In the following resource you'll find some exercises that'll teach you all about callbacks and array functions! |
| 13 | + |
| 14 | +- [Learn JavaScript: Iterators](https://www.codecademy.com/learn/introduction-to-javascript/modules/learn-javascript-iterators) |
13 | 15 |
|
14 | | -Step 1: More map, filter and |
| 16 | +## **2. JavaScript exercises** |
15 | 17 |
|
16 | | -_Deadline Wednesday_ |
| 18 | +> 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`. |
17 | 19 |
|
18 | | -**1.1** Say you would like to write a program that doubles the odd numbers in an array and throws away the even numbers. |
| 20 | +**Exercise 1: The odd ones out** |
19 | 21 |
|
20 | | -Your solution could be something like this: |
| 22 | +Look at the following code snippet: |
21 | 23 |
|
22 | 24 | ```js |
23 | | -function doubleOddNumbers(numbers) { |
| 25 | +function doubleEvenNumbers(numbers) { |
24 | 26 | const newNumbers = []; |
25 | 27 | for (let i = 0; i < numbers.length; i++) { |
26 | | - if (numbers[i] % 2 !== 0) { |
| 28 | + if (numbers[i] % 2 === 0) { |
27 | 29 | newNumbers.push(numbers[i] * 2); |
28 | 30 | } |
29 | 31 | } |
30 | 32 | return newNumbers; |
31 | 33 | } |
32 | 34 |
|
33 | 35 | const myNumbers = [1, 2, 3, 4]; |
34 | | -console.log(doubleOddNumbers(myNumbers)); // ==> [2, 6] |
| 36 | +console.log(doubleEvenNumbers(myNumbers)); // Logs "[4, 8]" to the console |
35 | 37 | ``` |
36 | 38 |
|
37 | | -Rewrite the above `doubleOddNumbers` function using `map` and `filter`; don't forget to use `=>`. |
| 39 | +The `doubleEvenNumbers` function returns only the even numbers in the array `myNumbers` and doubles them. Like you've learned in the [README](README.md), this block of code isn't easy to decipher. |
| 40 | + |
| 41 | +Let's rewrite it. Using the `map` and `filter` functions, rewrite the `doubleEvenNumbers` function. |
38 | 42 |
|
39 | | ---- |
| 43 | +**Exercise 2: What's your Monday worth?** |
40 | 44 |
|
41 | | -**1.2** Underneath you see a very interesting small insight in Maartje's work: |
| 45 | +When you're a developer at a big company your Monday could look something like this: |
42 | 46 |
|
43 | 47 | ```js |
44 | | -const monday = [ |
| 48 | +const mondayTasks = [ |
45 | 49 | { |
46 | | - name: 'Write a summary HTML/CSS', |
47 | | - duration: 180, |
| 50 | + name: 'Daily standup', |
| 51 | + duration: 30, // specified in minutes |
48 | 52 | }, |
49 | 53 | { |
50 | | - name: 'Some web development', |
| 54 | + name: 'Feature discussion', |
51 | 55 | duration: 120, |
52 | 56 | }, |
53 | 57 | { |
54 | | - name: 'Fix homework for class10', |
55 | | - duration: 20, |
56 | | - }, |
57 | | - { |
58 | | - name: 'Talk to a lot of people', |
59 | | - duration: 200, |
60 | | - }, |
61 | | -]; |
62 | | - |
63 | | -const tuesday = [ |
64 | | - { |
65 | | - name: 'Keep writing summary', |
| 58 | + name: 'Development time', |
66 | 59 | duration: 240, |
67 | 60 | }, |
68 | 61 | { |
69 | | - name: 'Some more web development', |
70 | | - duration: 180, |
71 | | - }, |
72 | | - { |
73 | | - name: 'Staring out the window', |
74 | | - duration: 10, |
75 | | - }, |
76 | | - { |
77 | | - name: 'Talk to a lot of people', |
78 | | - duration: 200, |
79 | | - }, |
80 | | - { |
81 | | - name: 'Look at application assignments new students', |
82 | | - duration: 40, |
| 62 | + name: 'Talk to different members from the product team', |
| 63 | + duration: 60, |
83 | 64 | }, |
84 | 65 | ]; |
85 | 66 | ``` |
86 | 67 |
|
87 | | -_Note: the durations are specified in minutes._ |
| 68 | +Write a program that computes how much Maartje has earned by completing these tasks, using `map` and `filter`. |
88 | 69 |
|
89 | | -Write a program that computes how much Maartje has earned by completing these tasks, using `map` and `filter`. For the 'summing part' you can try your luck with `reduce`; alternatively, you may use `forEach` or a `for` loop. |
| 70 | +For the 'summing part' you can try your luck with `reduce`; alternatively, you may use `forEach` or a `for` loop. |
90 | 71 |
|
91 | 72 | Follow these steps. Each step should build on the result of the previous step. |
92 | 73 |
|
93 | 74 | - Map the tasks to durations in hours. |
94 | 75 | - Filter out everything that took less than two hours (i.e., remove from the collection) |
95 | 76 | - Multiply the each duration by a per-hour rate for billing (use €20/hour) and sum it all up. |
96 | 77 | - Output a formatted Euro amount, rounded to Euro cents, e.g: `€11.34`. |
97 | | -- Choose variable and parameters names that most accurately describe their contents or purpose. When naming an array, use a plural form, e.g. `durations`. For a single item, use a singular form, e.g. `duration`. For details, see [Naming Conventions](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/naming_conventions.md). |
98 | | -- Don't forget to use `=>`. |
| 78 | +- Choose variable and parameters names that most accurately describe their contents or purpose. When naming an array, use a plural form, e.g. `durations`. For a single item, use a singular form, e.g. `duration`. |
| 79 | + |
| 80 | +**Exercise 3** |
| 81 | + |
| 82 | +**Exercise 4** |
| 83 | + |
| 84 | +**Exercise 5 ** |
99 | 85 |
|
100 | 86 | ## **3. Code along** |
101 | 87 |
|
| 88 | +Programming can be used to not only make websites, but also games! In the following tutorial you're going to apply your DOM manipulation skills in order to make a classic game: Rock, Paper, Scissors! Enjoy! |
| 89 | + |
102 | 90 | - [Build a Rock, Paper, Scissors Game](https://www.youtube.com/watch?v=WR_pWXJZiRY) |
103 | 91 |
|
104 | | -## **4. PROJECT: ** |
| 92 | +## **4. PROJECT: The Pomodoro Clock** |
| 93 | + |
| 94 | +> 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. |
| 95 | +
|
| 96 | +> Before you start, create a new folder called `project` that includes the files for the following app you'll be building. |
| 97 | +
|
| 98 | +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. |
| 99 | + |
| 100 | +It should look like this: |
| 101 | + |
| 102 | + |
| 103 | + |
| 104 | +Here are the requirements: |
| 105 | + |
| 106 | +- If the timer is running, the user can't change the session length anymore |
| 107 | +- Use at least 3 functions |
| 108 | +- Display minutes and seconds |
| 109 | +- If the timer finishes the timer should be replaced by the message: `Time's up!` |
| 110 | + |
| 111 | +Good luck! |
105 | 112 |
|
106 | 113 | ## **SUBMIT YOUR HOMEWORK!** |
107 | 114 |
|
108 | 115 | After you've finished your todo list it's time to show us what you got! The homework that needs to be submitted is the following: |
109 | 116 |
|
110 | 117 | 1. JavaScript exercises |
111 | | -2. PROJECT: |
| 118 | +2. PROJECT: The Pomodoro Clock |
112 | 119 |
|
113 | 120 | Upload both to your forked JavaScript2 repository in GitHub. Make a pull request to the original repository. |
114 | 121 |
|
|
0 commit comments