Skip to content

Commit e1f0e22

Browse files
michellesdev3michellesdev3
committed
Recreate the prep exercises
1 parent 17bee0b commit e1f0e22

File tree

20 files changed

+667
-18
lines changed

20 files changed

+667
-18
lines changed

‎Week1/MAKEME.md

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,21 @@
22

33
## **Todo list**
44

5-
1. Practice the concepts
5+
1. JS Tutor
6+
2. Prep exercises
7+
3. Practice the concepts
8+
9+
## **1. JS Tutor**
610

711
Practice, practice, practice. This week you are not handing in any homework, but are going to practice as much javascript as you can. Play around with the exercises mentioned below, remember that you can copy the code into [JS Tutor](http://pythontutor.com/javascript.html#mode=edit) to step through the code. Or look at it in the debugger in the browser/vscode.
812

9-
## 1. Practice the concepts
13+
## **2. Prep exercises**
14+
15+
> Prep exercises are exercises that you should work on _before_ the session on Sunday. These are a little more difficult or show an important concept and as such are a great exercise to talk about with your class and your Q&A mentor. Have a solution ready by Sunday as you may be asked to show what you did.
16+
17+
Inside your `JavaScript` fork, go to the folder `Week1`. Inside of that folder, navigate to `/prep-exercises`. For each exercise, you will find a separate folder. The `README` explains what needs to be done. There will also be some questions at the bottom to think about. Go through them _before_ the session on Sunday as it will be covered then.
18+
19+
## **3. Practice the concepts**
1020

1121
Before we learn how to build actual applications, we first need to gain experience using JavaScript in a computational way. This teaches us how to think like a programmer, and gives us more experience with the language itself.
1222

@@ -17,6 +27,7 @@ In the following exercises you'll learn how to use different JavaScript concepts
1727
- [jshero.net](https://www.jshero.net/en/success.html). Do the first 5 exercises.
1828

1929
The above should give you a nice basis. If you have extra time and are still a little unsure, have a look at the following:
30+
2031
- [FreeCodeCamp: Introduction to JavaScript](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript). Do at least 20 exercises, you can choose whichever ones you feel are challenging enough.
2132
- There is a practice-exercises folder in this week's repository that is filled with exercises to try out. The solutions are in a separate folder so you can check if you did it correctly. Clone this repository to your computer and have a go!
2233

@@ -27,4 +38,3 @@ For the first 2 weeks of JavaScript there is no homework to hand in as the exerc
2738
## Done early?
2839

2940
Try to do more exercises in the links above. The first weeks of the JavaScript modules are very important as understanding the basics will make the rest of the curriculum that much easier to follow. So keep reading and writing code! If you are done early, go on to week 2!
30-

‎Week1/prep-exercises/1-objects-and-arrays/README.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Prep exercise - Objects and Arrays
2+
3+
Objects and Arrays form the basis of pretty much all data structures in JavaScript and allow us to represent the state of the world to be manipulated. This exercise is all about how to represent objects in the real world in an 'IT' way. By thinking about the data structure you can make it easier to implement certain functionality which will help code stay simple and readable!
4+
5+
## Traffic light
6+
7+
In the `traffic-light-1.js` and `traffic-light-2.js` files we give two different ways of representing a traffic light. Have a look at the files and think about the following:
8+
9+
- In the first version we create an object with a state property. Why do you think we do this? Why not just a variable?
10+
- In the second version we add extra information (the `possibleStates` property). What do you think the advantage is of that?
11+
- In the second version the `stateIndex` property is a number, why do you think that is?
12+
13+
## HackYourFuture program
14+
15+
In the `hyf.js` file we have a more complex representation of the hyf program. We have divided the hyf world into 4 what we call `entities`: `modules`, `classes`, `students`, `mentors`. The `export` statements are for week 4, you can ignore those for now! Have a look and think about the following:
16+
17+
- Why do you think we have a `name` and `displayName` property for the `modules`?
18+
- Do you think `active` and `start`/`graduationDate` are both needed in the `classes` array? Why or why not?
19+
20+
## Things to think about
21+
22+
Next to the questions specific to each representation, also have a think about the following:
23+
24+
- In all of the examples, you will see that objects and arrays are mostly defined using a `const` statement rather than a `let` even if we change the value of the object or array, why do you think this is the case?

‎Week1/prep-exercises/1-objects-and-arrays/hyf.js

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
export const modules = [
2+
{ name: "html-css", displayName: "HTML/CSS" },
3+
{ name: "javascript", displayName: "JavaScript" },
4+
{ name: "browsers", displayName: "Browsers" },
5+
{ name: "using-apis", displayName: "Using APIs" },
6+
{ name: "node", displayName: "Node.js" },
7+
{ name: "databases", displayName: "Databases" },
8+
{ name: "react", displayName: "React" },
9+
{ name: "project", displayName: "Project" },
10+
];
11+
12+
export const classes = [
13+
{
14+
name: "class32",
15+
startDate: "23-3-2021",
16+
active: false,
17+
graduationDate: "7-11-2021",
18+
},
19+
{
20+
name: "class33",
21+
startDate: "28-5-2021",
22+
active: false,
23+
graduationDate: "7-11-2021",
24+
},
25+
{
26+
name: "class34",
27+
startDate: "2-9-2021",
28+
active: true,
29+
currentModule: "react",
30+
},
31+
{
32+
name: "class35",
33+
startDate: "14-11-2021",
34+
active: true,
35+
currentModule: "using-apis",
36+
},
37+
{
38+
name: "class36",
39+
startDate: "5-1-2022",
40+
active: true,
41+
currentModule: "javascript",
42+
},
43+
];
44+
45+
export const students = [
46+
{ name: "Fede", class: "class33", gitHubName: "fedefu", graduated: false },
47+
{ name: "Tjebbe", class: "class32", gitHubName: "Tjebbee", graduated: true },
48+
{ name: "Rob", class: "class34", gitHubName: "robvk", graduated: false },
49+
{
50+
name: "Wouter",
51+
class: "class35",
52+
gitHubName: "wouterkleijn",
53+
graduated: false,
54+
},
55+
];
56+
57+
export const mentors = [
58+
{
59+
name: "Stas",
60+
canTeach: ["javascript", "browsers", "using-apis"],
61+
nowTeaching: "javascript",
62+
},
63+
{
64+
name: "Andrej",
65+
canTeach: ["using-apis", "node"],
66+
},
67+
{
68+
name: "Shriyans",
69+
canTeach: ["react"],
70+
nowTeaching: "react",
71+
},
72+
{
73+
name: "Yash",
74+
canTeach: ["javascript", "using-apis"],
75+
},
76+
{
77+
name: "Rohan",
78+
canTeach: ["html/css/git", "javascript", "node"],
79+
},
80+
{
81+
name: "Collin",
82+
canTeach: ["browsers", "using-apis", "node"],
83+
},
84+
];

‎Week1/prep-exercises/1-objects-and-arrays/traffic-light-1.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
"use strict";
2+
/**
3+
* The `state` property says what the traffic light's state (i.e. colour) is at
4+
* that moment.
5+
*/
6+
const trafficLight = {
7+
state: "red",
8+
};
9+
10+
const currentState = trafficLight.state;

‎Week1/prep-exercises/1-objects-and-arrays/traffic-light-2.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
"use strict";
2+
/**
3+
* The `possibleStates` property define the states (in this case: colours)
4+
* in which the traffic light can be.
5+
* The `stateIndex` property indicates which of the possible states is current.
6+
*/
7+
const trafficLight = {
8+
possibleStates: ["green", "orange", "red"],
9+
stateIndex: 0,
10+
};
11+
12+
const currentState = trafficLight.possibleStates[trafficLight.stateIndex];

‎Week2/MAKEME.md

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,25 @@
22

33
Practice, practice, practice. Same as week 1, you are not handing in any homework, but are going to practice as much javascript as you can. Play around with the exercises mentioned below, remember that you can copy the code into [jsTutor](http://pythontutor.com/javascript.html#mode=edit) to step through the code, or look at it in the debugger in the browser/vscode.
44

5-
## Practice the concepts
5+
## **Todo list **
6+
7+
1. Practice the concepts
8+
2. Prep exercises
9+
10+
## **1. Practice the concepts**
611

712
In this section you will be doing interactive exercises, that will allow you to practice with the concepts you've learned about this week! Do as many as you need to feel comfortable with the concepts.
813

914
- Do all parts of [Codecademy: Arrays](https://www.codecademy.com/courses/introduction-to-javascript/lessons/arrays) (Signup required!)
1015
- Do 5 exercises of [FreeCodeCamp: Basic data structures](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-data-structures)
1116
- There is a practice-exercises folder in this week's repository that is filled with exercises to try out. The solutions are in a separate folder so you can check if you did it correctly. Clone this repository to your computer and have a go!
1217

18+
## **2. Prep exercises**
19+
20+
> Prep exercises are exercises that you should work on _before_ the session on Sunday. These are a little more difficult or show an important concept and as such are a great exercise to talk about with your class and your Q&A mentor. Have a solution ready by Sunday as you may be asked to show what you did.
21+
22+
Inside your `JavaScript` fork, go to the folder `Week2`. Inside of that folder, navigate to `/prep-exercises`. For each exercise, you will find a separate folder. The `README` explains what needs to be done. There will also be some questions at the bottom to think about. Go through them _before_ the session on Sunday as it will be covered then.
23+
1324
## No homework to hand in (for now)
1425

1526
For the first 2 weeks of JavaScript there is no homework to hand in as the exercises already give you all the feedback you need. Go through the first 3 weeks at your own pace, and feel free to ask questions about any of the 3 weeks for the Q&A sessions.

‎Week2/prep-exercises/1-traffic-light/README.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Prep exercise - traffic light
2+
3+
Let's have a deeper look at the working of traffic lights this week so that we can practice logic and loops. In the previous week we went into some different ways of representing a traffic light, now let's make the traffic light work. In `traffic-light-1.js` and `traffic-light-2.js` you will find the same requirements but with different ways of representing the traffic light. Have a look through the files and solve them.
4+
5+
## Things to think about
6+
7+
- Which way of representing the traffic light did you find better? Why?
8+
- What happens if you change the loop to a `do-while` loop instead of a `while` loop? Why?
9+
- We could have also used a `for` loop to make the traffic light do 2 full rotations. Do you think that would be better? Why or why not?

‎Week2/prep-exercises/1-traffic-light/traffic-light-1.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
"use strict";
2+
/**
3+
* The `state` property says what the traffic light's state (i.e. colour) is at
4+
* that moment.
5+
*/
6+
const trafficLight = {
7+
state: "green",
8+
};
9+
10+
let rotations = 0;
11+
while (rotations < 2) {
12+
const currentState = trafficLight.state;
13+
console.log("The traffic light is on", currentState);
14+
15+
// TODO
16+
// if the color is green, turn it orange
17+
// if the color is orange, turn it red
18+
// if the color is red, add 1 to rotations and turn it green
19+
}
20+
21+
/**
22+
* The output should be:
23+
24+
The traffic light is on green
25+
The traffic light is on orange
26+
The traffic light is on red
27+
The traffic light is on green
28+
The traffic light is on orange
29+
The traffic light is on red
30+
31+
*/

‎Week2/prep-exercises/1-traffic-light/traffic-light-2.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
"use strict";
2+
/**
3+
* The `possibleStates` property define the states (in this case: colours)
4+
* in which the traffic light can be.
5+
* The `stateIndex` property indicates which of the possible states is current.
6+
*/
7+
const trafficLight = {
8+
possibleStates: ["green", "orange", "red"],
9+
stateIndex: 0,
10+
};
11+
12+
let cycle = 0;
13+
while (cycle < 2) {
14+
const currentState = trafficLight.possibleStates[trafficLight.stateIndex];
15+
console.log("The traffic light is on", currentState);
16+
17+
// TODO
18+
// if the color is green, turn it orange
19+
// if the color is orange, turn it red
20+
// if the color is red, add 1 to cycles and turn it green
21+
}
22+
23+
/**
24+
* The output should be:
25+
26+
The traffic light is on green
27+
The traffic light is on orange
28+
The traffic light is on red
29+
The traffic light is on green
30+
The traffic light is on orange
31+
The traffic light is on red
32+
33+
*/

‎Week3/MAKEME.md

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,29 @@ This will be the first week you are expected to hand in some homework when we co
55
## **Todo list**
66

77
1. Practice the concepts
8-
2. Homework exercises
9-
3. Your personal brand
8+
2. Prep exercises
9+
3. Homework exercises
10+
4. Your personal brand
1011

1112
## **1. Practice the concepts**
1213

1314
In this section you will be doing interactive exercises that will allow you to practice with the concepts you've learned about this week. In the first course you'll learn about functions, the structure and how they're used. They are a fundamental part of understanding programming and you should become very familiar with them! Do as many of the things in the following list to feel comfortable with the concepts.
1415

1516
- [Codecademy: Functions ](https://www.codecademy.com/courses/introduction-to-javascript/lessons/functions)
1617

17-
## **2. Homework exercises**
18+
## **2. Prep exercises**
19+
20+
> Prep exercises are exercises that you should work on _before_ the session on Sunday. These are a little more difficult or show an important concept and as such are a great exercise to talk about with your class and your Q&A mentor. Have a solution ready by Sunday as you may be asked to show what you did.
21+
22+
Inside your `JavaScript` fork, go to the folder `Week3`. Inside of that folder, navigate to `/prep-exercises`. For each exercise, you will find a separate folder. The `README` explains what needs to be done. There will also be some questions at the bottom to think about. Go through them _before_ the session on Sunday as it will be covered then.
23+
24+
## **3. Homework exercises**
1825

1926
It is time to combine everything we have learned the past couple of weeks and get some feedback from experienced developers. This will be the first week you are working with the [homework repository](https://github.com/HackYourFuture/Homework/blob/main/README.md) so reserve some time to set it up. This week we expect you to do the exercises in the corresponding module/week folder (JavaScript / Week 3). Have a look at the [homework guide](https://github.com/HackYourFuture/JavaScript/blob/main/hand-in-homework-guide.md) to see how to hand in your homework.
2027

21-
*NOTE: Make sure to read and apply all of the README in the homework repository to set up the extensions in Visual Studio Code!*.
28+
_NOTE: Make sure to read and apply all of the README in the homework repository to set up the extensions in Visual Studio Code!_.
2229

23-
## **3. Your personal brand**
30+
## **4. Your personal brand**
2431

2532
Remember that next week you have to hand in your CV! If you haven’t started yet, this is the last reminder :)
2633

‎Week3/prep-exercises/1-traffic-light/README.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Prep exercise - Traffic light
2+
3+
In the previous week we continued with our traffic light. Now that we also know what a function is we have one last look at the workings of a traffic light in a different way. Take a look at the `traffic-light.js` file and implement the same requirements as last week again, but then with another different way of organising.
4+
5+
## Things to think about
6+
7+
- This time the loop was changed to a for loop that will run the code 6 times. Why was that needed?
8+
- Why was the trafficLight added to the `main` function and not left at the top of the file?
9+
- What do you think is the advantage of having the `getCurrentTrafficLightState` and `getNextStateIndex` functions?

‎Week3/prep-exercises/1-traffic-light/traffic-light.js

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
"use strict";
2+
/**
3+
* The `trafficLight` object is now no longer a global variable. Instead,
4+
* it is defined in function `main()` and passed as a parameter to other
5+
* functions, as and when needed.
6+
*/
7+
8+
function getCurrentState(trafficLight) {
9+
// TODO
10+
// Should return the current state (i.e. colour) of the `trafficLight`
11+
// object passed as a parameter.
12+
}
13+
14+
function getNextStateIndex(trafficLight) {
15+
// TODO
16+
// Return the index of the next state of the `trafficLight` such that:
17+
// - if the color is green, it will turn to orange
18+
// - if the color is orange, it will turn to red
19+
// - if the color is red, it will turn to green
20+
}
21+
22+
// This function loops for the number of seconds specified by the `secs`
23+
// parameter and then returns.
24+
// IMPORTANT: This is not the recommended way to implement 'waiting' in
25+
// JavaScript. You will learn better ways of doing this when you learn about
26+
// asynchronous code.
27+
function waitSync(secs) {
28+
const start = Date.now();
29+
while (Date.now() - start < secs * 1000) {
30+
// nothing do to here
31+
}
32+
}
33+
34+
function main() {
35+
const trafficLight = {
36+
possibleStates: ["green", "orange", "red"],
37+
stateIndex: 0,
38+
};
39+
40+
for (let cycle = 0; cycle < 6; cycle++) {
41+
const currentState = getCurrentState(trafficLight);
42+
console.log(cycle, "The traffic light is now", currentState);
43+
44+
waitSync(1); // Wait a second before going to the next state
45+
trafficLight.stateIndex = getNextStateIndex(trafficLight);
46+
}
47+
}
48+
49+
main();
50+
/**
51+
* The output should be:
52+
53+
0 The traffic light is now green
54+
1 The traffic light is now orange
55+
2 The traffic light is now red
56+
3 The traffic light is now green
57+
4 The traffic light is now orange
58+
5 The traffic light is now red
59+
60+
*/

‎Week3/prep-exercises/2-experiments/README.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# Prep exercises - Dice experimentation
2+
3+
Let's do some experiments! One thing computers are great at is doing the same thing over and over and over again, so let's use that to see how random the random function in JavaScript is. In the `index.js` there is an explanation of what to implement. In essence we want to simulate the rolling of a die a lot of times and then track how many times a certain value was rolled.
4+
5+
## Things to think about
6+
7+
- The `valueCounts` is implemented as an array. Do you think there is another way to store this? Why do you think the decision was made to go with an array?
8+
- What do you think about the code division? Would you add another function or maybe remove one? Why?

0 commit comments

Comments
 (0)