HackYourFuture · robvk · Jan 16, 2022 · Jan 16, 2022
diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md
@@ -2,11 +2,21 @@
 
 ## **Todo list**
 
-1. Practice the concepts
+1. JS Tutor
+2. Prep exercises
+3. Practice the concepts
+
+## **1. JS Tutor**
 
 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.
 
-## 1. Practice the concepts
+## **2. Prep exercises**
+
+> 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.
+
+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.
+
+## **3. Practice the concepts**
 
 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.
 
@@ -17,6 +27,7 @@ In the following exercises you'll learn how to use different JavaScript concepts
 - [jshero.net](https://www.jshero.net/en/success.html). Do the first 5 exercises.
 
 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:
+
 - [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.
 - 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!
 
@@ -27,4 +38,3 @@ For the first 2 weeks of JavaScript there is no homework to hand in as the exerc
 ## Done early?
 
 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!
-
diff --git a/Week1/prep-exercises/1-objects-and-arrays/README.md b/Week1/prep-exercises/1-objects-and-arrays/README.md
@@ -0,0 +1,24 @@
+# Prep exercise - Objects and Arrays
+
+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!
+
+## Traffic light
+
+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:
+
+- In the first version we create an object with a state property. Why do you think we do this? Why not just a variable?
+- In the second version we add extra information (the `possibleStates` property). What do you think the advantage is of that?
+- In the second version the `stateIndex` property is a number, why do you think that is?
+
+## HackYourFuture program
+
+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:
+
+- Why do you think we have a `name` and `displayName` property for the `modules`?
+- Do you think `active` and `start`/`graduationDate` are both needed in the `classes` array? Why or why not?
+
+## Things to think about
+
+Next to the questions specific to each representation, also have a think about the following:
+
+- 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?
diff --git a/Week1/prep-exercises/1-objects-and-arrays/hyf.js b/Week1/prep-exercises/1-objects-and-arrays/hyf.js
@@ -0,0 +1,84 @@
+export const modules = [
+  { name: "html-css", displayName: "HTML/CSS" },
+  { name: "javascript", displayName: "JavaScript" },
+  { name: "browsers", displayName: "Browsers" },
+  { name: "using-apis", displayName: "Using APIs" },
+  { name: "node", displayName: "Node.js" },
+  { name: "databases", displayName: "Databases" },
+  { name: "react", displayName: "React" },
+  { name: "project", displayName: "Project" },
+];
+
+export const classes = [
+  {
+    name: "class32",
+    startDate: "23-3-2021",
+    active: false,
+    graduationDate: "7-11-2021",
+  },
+  {
+    name: "class33",
+    startDate: "28-5-2021",
+    active: false,
+    graduationDate: "7-11-2021",
+  },
+  {
+    name: "class34",
+    startDate: "2-9-2021",
+    active: true,
+    currentModule: "react",
+  },
+  {
+    name: "class35",
+    startDate: "14-11-2021",
+    active: true,
+    currentModule: "using-apis",
+  },
+  {
+    name: "class36",
+    startDate: "5-1-2022",
+    active: true,
+    currentModule: "javascript",
+  },
+];
+
+export const students = [
+  { name: "Fede", class: "class33", gitHubName: "fedefu", graduated: false },
+  { name: "Tjebbe", class: "class32", gitHubName: "Tjebbee", graduated: true },
+  { name: "Rob", class: "class34", gitHubName: "robvk", graduated: false },
+  {
+    name: "Wouter",
+    class: "class35",
+    gitHubName: "wouterkleijn",
+    graduated: false,
+  },
+];
+
+export const mentors = [
+  {
+    name: "Stas",
+    canTeach: ["javascript", "browsers", "using-apis"],
+    nowTeaching: "javascript",
+  },
+  {
+    name: "Andrej",
+    canTeach: ["using-apis", "node"],
+  },
+  {
+    name: "Shriyans",
+    canTeach: ["react"],
+    nowTeaching: "react",
+  },
+  {
+    name: "Yash",
+    canTeach: ["javascript", "using-apis"],
+  },
+  {
+    name: "Rohan",
+    canTeach: ["html/css/git", "javascript", "node"],
+  },
+  {
+    name: "Collin",
+    canTeach: ["browsers", "using-apis", "node"],
+  },
+];
diff --git a/Week1/prep-exercises/1-objects-and-arrays/traffic-light-1.js b/Week1/prep-exercises/1-objects-and-arrays/traffic-light-1.js
@@ -0,0 +1,10 @@
+"use strict";
+/**
+ * The `state` property says what the traffic light's state (i.e. colour) is at
+ * that moment.
+ */
+const trafficLight = {
+  state: "red",
+};
+
+const currentState = trafficLight.state;
diff --git a/Week1/prep-exercises/1-objects-and-arrays/traffic-light-2.js b/Week1/prep-exercises/1-objects-and-arrays/traffic-light-2.js
@@ -0,0 +1,12 @@
+"use strict";
+/**
+ * The `possibleStates` property define the states (in this case: colours)
+ * in which the traffic light can be.
+ * The `stateIndex` property indicates which of the possible states is current.
+ */
+const trafficLight = {
+  possibleStates: ["green", "orange", "red"],
+  stateIndex: 0,
+};
+
+const currentState = trafficLight.possibleStates[trafficLight.stateIndex];
diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md
@@ -2,14 +2,25 @@
 
 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.
 
-## Practice the concepts
+## **Todo list **
+
+1. Practice the concepts
+2. Prep exercises
+
+## **1. Practice the concepts**
 
 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.
 
 - Do all parts of [Codecademy: Arrays](https://www.codecademy.com/courses/introduction-to-javascript/lessons/arrays) (Signup required!)
 - Do 5 exercises of [FreeCodeCamp: Basic data structures](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-data-structures)
 - 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!
 
+## **2. Prep exercises**
+
+> 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.
+
+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.
+
 ## No homework to hand in (for now)
 
 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.

diff --git a/Week2/prep-exercises/1-traffic-light/README.md b/Week2/prep-exercises/1-traffic-light/README.md
@@ -0,0 +1,9 @@
+# Prep exercise - traffic light
+
+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.
+
+## Things to think about
+
+- Which way of representing the traffic light did you find better? Why?
+- What happens if you change the loop to a `do-while` loop instead of a `while` loop? Why?
+- 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?
diff --git a/Week2/prep-exercises/1-traffic-light/traffic-light-1.js b/Week2/prep-exercises/1-traffic-light/traffic-light-1.js
@@ -0,0 +1,31 @@
+"use strict";
+/**
+ * The `state` property says what the traffic light's state (i.e. colour) is at
+ * that moment.
+ */
+const trafficLight = {
+  state: "green",
+};
+
+let rotations = 0;
+while (rotations < 2) {
+  const currentState = trafficLight.state;
+  console.log("The traffic light is on", currentState);
+
+  // TODO
+  // if the color is green, turn it orange
+  // if the color is orange, turn it red
+  // if the color is red, add 1 to rotations and turn it green
+}
+
+/**
+ * The output should be:
+
+The traffic light is on green
+The traffic light is on orange
+The traffic light is on red
+The traffic light is on green
+The traffic light is on orange
+The traffic light is on red
+
+*/
diff --git a/Week2/prep-exercises/1-traffic-light/traffic-light-2.js b/Week2/prep-exercises/1-traffic-light/traffic-light-2.js
@@ -0,0 +1,33 @@
+"use strict";
+/**
+ * The `possibleStates` property define the states (in this case: colours)
+ * in which the traffic light can be.
+ * The `stateIndex` property indicates which of the possible states is current.
+ */
+const trafficLight = {
+  possibleStates: ["green", "orange", "red"],
+  stateIndex: 0,
+};
+
+let cycle = 0;
+while (cycle < 2) {
+  const currentState = trafficLight.possibleStates[trafficLight.stateIndex];
+  console.log("The traffic light is on", currentState);
+
+  // TODO
+  // if the color is green, turn it orange
+  // if the color is orange, turn it red
+  // if the color is red, add 1 to cycles and turn it green
+}
+
+/**
+ * The output should be:
+
+The traffic light is on green
+The traffic light is on orange
+The traffic light is on red
+The traffic light is on green
+The traffic light is on orange
+The traffic light is on red
+
+*/
diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md
@@ -5,22 +5,29 @@ This will be the first week you are expected to hand in some homework when we co
 ## **Todo list**
 
 1. Practice the concepts
-2. Homework exercises
-3. Your personal brand
+2. Prep exercises
+3. Homework exercises
+4. Your personal brand
 
 ## **1. Practice the concepts**
 
 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.
 
 - [Codecademy: Functions ](https://www.codecademy.com/courses/introduction-to-javascript/lessons/functions)
 
-## **2. Homework exercises**
+## **2. Prep exercises**
+
+> 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.
+
+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.
+
+## **3. Homework exercises**
 
 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.
 
-*NOTE: Make sure to read and apply all of the README in the homework repository to set up the extensions in Visual Studio Code!*. 
+_NOTE: Make sure to read and apply all of the README in the homework repository to set up the extensions in Visual Studio Code!_.
 
-## **3. Your personal brand**
+## **4. Your personal brand**
 
 Remember that next week you have to hand in your CV! If you haven’t started yet, this is the last reminder :)
 

diff --git a/Week3/prep-exercises/1-traffic-light/README.md b/Week3/prep-exercises/1-traffic-light/README.md
@@ -0,0 +1,9 @@
+# Prep exercise - Traffic light
+
+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.
+
+## Things to think about
+
+- This time the loop was changed to a for loop that will run the code 6 times. Why was that needed?
+- Why was the trafficLight added to the `main` function and not left at the top of the file?
+- What do you think is the advantage of having the `getCurrentTrafficLightState` and `getNextStateIndex` functions?
diff --git a/Week3/prep-exercises/1-traffic-light/traffic-light.js b/Week3/prep-exercises/1-traffic-light/traffic-light.js
@@ -0,0 +1,60 @@
+"use strict";
+/**
+ * The `trafficLight` object is now no longer a global variable. Instead,
+ * it is defined in function `main()` and passed as a parameter to other
+ * functions, as and when needed.
+ */
+
+function getCurrentState(trafficLight) {
+  // TODO
+  // Should return the current state (i.e. colour) of the `trafficLight`
+  // object passed as a parameter.
+}
+
+function getNextStateIndex(trafficLight) {
+  // TODO
+  // Return the index of the next state of the `trafficLight` such that:
+  // - if the color is green, it will turn to orange
+  // - if the color is orange, it will turn to red
+  // - if the color is red, it will turn to green
+}
+
+// This function loops for the number of seconds specified by the `secs`
+// parameter and then returns.
+// IMPORTANT: This is not the recommended way to implement 'waiting' in
+// JavaScript. You will learn better ways of doing this when you learn about
+// asynchronous code.
+function waitSync(secs) {
+  const start = Date.now();
+  while (Date.now() - start < secs * 1000) {
+    // nothing do to here
+  }
+}
+
+function main() {
+  const trafficLight = {
+    possibleStates: ["green", "orange", "red"],
+    stateIndex: 0,
+  };
+
+  for (let cycle = 0; cycle < 6; cycle++) {
+    const currentState = getCurrentState(trafficLight);
+    console.log(cycle, "The traffic light is now", currentState);
+
+    waitSync(1); // Wait a second before going to the next state
+    trafficLight.stateIndex = getNextStateIndex(trafficLight);
+  }
+}
+
+main();
+/**
+ * The output should be:
+
+0 The traffic light is now green
+1 The traffic light is now orange
+2 The traffic light is now red
+3 The traffic light is now green
+4 The traffic light is now orange
+5 The traffic light is now red
+
+*/
diff --git a/Week3/prep-exercises/2-experiments/README.md b/Week3/prep-exercises/2-experiments/README.md
@@ -0,0 +1,8 @@
+# Prep exercises - Dice experimentation
+
+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.
+
+## Things to think about
+
+- 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?
+- What do you think about the code division? Would you add another function or maybe remove one? Why?