diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index a2b7231..3ef29f5 100644 --- 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 new file mode 100644 index 0000000..f049e0b --- /dev/null +++ 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 new file mode 100644 index 0000000..c06c02c --- /dev/null +++ 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 new file mode 100644 index 0000000..8db87fe --- /dev/null +++ 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 new file mode 100644 index 0000000..a893800 --- /dev/null +++ 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 index 7d1d48c..85e6d68 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -2,7 +2,12 @@ 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. @@ -10,6 +15,12 @@ In this section you will be doing interactive exercises, that will allow you to - 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 new file mode 100644 index 0000000..ce86d93 --- /dev/null +++ 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 new file mode 100644 index 0000000..f1d9169 --- /dev/null +++ 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 new file mode 100644 index 0000000..8c6ba95 --- /dev/null +++ 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 index a543d78..931ccbc 100644 --- a/Week3/MAKEME.md +++ b/Week3/MAKEME.md @@ -5,8 +5,9 @@ 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** @@ -14,13 +15,19 @@ In this section you will be doing interactive exercises that will allow you to p - [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 new file mode 100644 index 0000000..cabe682 --- /dev/null +++ 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 new file mode 100644 index 0000000..f4a5c1a --- /dev/null +++ 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 new file mode 100644 index 0000000..c7e4c2b --- /dev/null +++ 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? diff --git a/Week3/prep-exercises/2-experiments/index.js b/Week3/prep-exercises/2-experiments/index.js new file mode 100644 index 0000000..7e5aa92 --- /dev/null +++ b/Week3/prep-exercises/2-experiments/index.js @@ -0,0 +1,46 @@ +"use strict"; + +function runExperiment(sampleSize) { + const valueCounts = [0, 0, 0, 0, 0, 0]; + + // TODO + // Write a for loop that iterates `sampleSize` times (sampleSize is a number). + // In each loop iteration: + // + // 1. Generate a random integer between 1 and 6 (as if throwing a six-sided die). + // 2. Add `1` to the element of the `valueCount` that corresponds to the random + // value from the previous step. Use the first element of `valueCounts` + // for keeping a count how many times the value 1 is thrown, the second + // element for value 2, etc. + + const results = []; + + // TODO + // Write a for..of loop for the `valueCounts` array created in the previous + // loop. In each loop iteration: + // 1. For each possible value of the die (1-6), compute the percentage of how + // many times that value was thrown. Remember that the first value of + // `valueCounts` represent the die value of 1, etc. + // 2. Convert the computed percentage to a number string with a precision of + // two decimals, e.g. '14.60'. + // 3. Then push that string onto the `results` array. + + return results; +} + +function main() { + const sampleSizes = [100, 1000, 1000000]; + + // TODO + // Write a for..of loop that calls the `runExperiment()` function for each + // value of the `sampleSizes` array. + // Log the results of each experiment as well as the experiment size to the + // console. + // The expected output could look like this: + // + // [ '26.00', '17.00', '10.00', '19.00', '16.00', '12.00' ] 100 + // [ '14.60', '17.10', '19.30', '15.50', '16.70', '16.80' ] 1000 + // [ '16.71', '16.68', '16.69', '16.66', '16.67', '16.59' ] 1000000 +} + +main(); diff --git a/Week4/MAKEME.md b/Week4/MAKEME.md index 23a5db5..22c761c 100644 --- a/Week4/MAKEME.md +++ b/Week4/MAKEME.md @@ -3,9 +3,10 @@ ## **Todo list** 1. Practice the concepts -2. Homework exercises -3. Your personal brand -4. Extra: Challenges (Optional) +2. Prep exercises +3. Homework exercises +4. Your personal brand +5. Extra: Challenges (Optional) ## **1. Practice the concepts** @@ -13,17 +14,23 @@ Before we head into the homework exercises, it might be nice to do some interact - [Learn JavaScript: Iterators](https://www.codecademy.com/learn/introduction-to-javascript/modules/learn-javascript-iterators) -## **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 `Week4`. 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** This week we expect you to do the exercises in the corresponding module/week folder (JavaScript / Week 4). 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: do NOT forget to checkout the main branch before creating the branch for this week. Otherwise your previous homework will be a part of the PR* +_NOTE: do NOT forget to checkout the main branch before creating the branch for this week. Otherwise your previous homework will be a part of the PR_ -## **3. Your personal brand** +## **4. Your personal brand** This week is the deadline to submit your CV with links to your updated GitHub and LinkedIn profiles. To submit your CV, be sure to follow the guidelines given [here](https://github.com/HackYourFuture/yourpersonalbrand/blob/main/yourcurriculum.md#4-submitting-your-cv-to-the-hyf-team). We strongly suggest you make use of the provided templates! They have all the important sections and together with the info in the repo, they will help you end up with a great personal brand, crucial to find an internship or job as a developer. -## **4. Extra: Challenges (Optional)** +## **5. Extra: Challenges (Optional)** Have a look at the challenges folder in this repository to try some harder problems. We expect these to be hard, so take your time to try and solve them yourself. If you really can't figure it out then have a look at the solutions, but it usually sticks better if you find the solution yourself. @@ -34,5 +41,4 @@ So you think you are a JavaScript superstar now huh? :wink: Once you have finished the homework there are a couple of things you can keep doing to improve your JavaScript and problem solving skills. Have a look at the following and come back to them later in the curriculum, it is never bad to do these exercises! - [Project Euler](https://projecteuler.net/) -Project Euler defines problems that you can use your new JavaScript knowledge to find solutions for. These start off doable with the knowledge you have now and will get more and more difficult. You can come back to it later if you get stuck, or ask your classmates! Whenever you have some time or want to practice problem solving this is a good place to go. - + Project Euler defines problems that you can use your new JavaScript knowledge to find solutions for. These start off doable with the knowledge you have now and will get more and more difficult. You can come back to it later if you get stuck, or ask your classmates! Whenever you have some time or want to practice problem solving this is a good place to go. diff --git a/Week4/challenges/4-bank-account.js b/Week4/challenges/4-bank-account.js new file mode 100644 index 0000000..8f0f035 --- /dev/null +++ b/Week4/challenges/4-bank-account.js @@ -0,0 +1,93 @@ +/** + * It is time to write some bigger code! You have a bankAccount that is modeled as given. + * + * Finish the two functions that will donate money (donateMoney) and pay rent (payRent). + * If you do not have enough funds, call the onFail function given and don't change the bankAccount. + * If you do have the funds, update the bankAccount accordingly. + * + * TIP: have a look at the test code to get more information on what needs to happen + * TIP: a lot of the things the functions do are the same, you may want to create one or more other functions to not duplicate code + */ + +const bankAccount = { + // The currentBalance is how much money you have in your bankAccount. + currentBalance: 250, + // The transactions are a list of changes so that you can keep track. + transactions: [ + /** + * The prevAmount is what your balance was before the transaction, + * the newAmount is what your balance was after the transaction + * and the reason is what the transaction was about + */ + { + prevAmount: 350, + newAmount: 250, + reason: "Donation", + }, + ], +}; + +const donateMoney = (amount, onSuccess, onFail) => { + // TODO complete this function +}; +const payRent = (amount, onSuccess, onFail) => { + // TODO complete this function +}; + +/** + * TEST CODE. DO NOT EDIT + */ + +const onSuccessEnglish = () => { + console.log("Payment successful! Thank you!"); +}; +const onFailEnglish = () => { + console.log("You do not have enough money to make this payment."); +}; + +const onSuccessDutch = () => { + console.log("Betaling geslaagd! Dank u!"); +}; +const onFailDutch = () => { + console.log("U heeft niet voldoende saldo om deze betaling te doen."); +}; + +donateMoney(100, onSuccessEnglish, onFailEnglish); +console.log(bankAccount); + +payRent(100, onSuccessEnglish, onFailEnglish); +console.log(bankAccount); + +donateMoney(100, onSuccessDutch, onFailDutch); +console.log(bankAccount); + +/** +* The console should print out the following: +Payment successful! Thank you! +{ +currentBalance: 150, +transactions: [ + { prevAmount: 350, newAmount: 250, reason: 'Donation' }, + { prevAmount: 250, newAmount: 150, reason: 'Donation' } +] +} +Payment successful! Thank you! +{ +currentBalance: 50, +transactions: [ + { prevAmount: 350, newAmount: 250, reason: 'Donation' }, + { prevAmount: 250, newAmount: 150, reason: 'Donation' }, + { prevAmount: 150, newAmount: 50, reason: 'Rent' } +] +} +U heeft niet voldoende saldo om deze betaling te doen. +{ +currentBalance: 50, +transactions: [ + { prevAmount: 350, newAmount: 250, reason: 'Donation' }, + { prevAmount: 250, newAmount: 150, reason: 'Donation' }, + { prevAmount: 150, newAmount: 50, reason: 'Rent' } +] +} +* +*/ diff --git a/Week4/challenges/solutions/4-bank-account.js b/Week4/challenges/solutions/4-bank-account.js new file mode 100644 index 0000000..e4eca97 --- /dev/null +++ b/Week4/challenges/solutions/4-bank-account.js @@ -0,0 +1,114 @@ +/** + * It is time to write some bigger code! You have a bankAccount that is modeled as given. + * + * Finish the two functions that will donate money (donateMoney) and pay rent (payRent). + * If you do not have enough funds, call the onFail function given and don't change the bankAccount. + * If you do have the funds, update the bankAccount accordingly. + * + * TIP: have a look at the test code to get more information on what needs to happen + * TIP: a lot of the things the functions do are the same, you may want to create one or more other functions to not duplicate code + */ + +const bankAccount = { + // The currentBalance is how much money you have in your bankAccount. + currentBalance: 250, + // The transactions are a list of changes so that you can keep track. + transactions: [ + /** + * The prevAmount is what your balance was before the transaction, + * the newAmount is what your balance was after the transaction + * and the reason is what the transaction was about + */ + { + prevAmount: 350, + newAmount: 250, + reason: "Donation", + }, + ], +}; + +/** + * The donateMoney and payRent do a lot of the same thing, so created a separate function + */ +const createPayment = (amount, onSuccess, onFail, reason) => { + const newAmount = bankAccount.currentBalance - amount; + + if (newAmount < 0) { + onFail(); + + return; + } + + bankAccount.transactions.push({ + prevAmount: bankAccount.currentBalance, + newAmount, + reason, + }); + bankAccount.currentBalance = newAmount; + + onSuccess(); +}; +const donateMoney = (amount, onSuccess, onFail) => { + createPayment(amount, onSuccess, onFail, "Donation"); +}; +const payRent = (amount, onSuccess, onFail) => { + createPayment(amount, onSuccess, onFail, "Rent"); +}; + +/** + * TEST CODE. DO NOT EDIT + */ + +const onSuccessEnglish = () => { + console.log("Payment successful! Thank you!"); +}; +const onFailEnglish = () => { + console.log("You do not have enough money to make this payment."); +}; + +const onSuccessDutch = () => { + console.log("Betaling geslaagd! Dank u!"); +}; +const onFailDutch = () => { + console.log("U heeft niet voldoende saldo om deze betaling te doen."); +}; + +donateMoney(100, onSuccessEnglish, onFailEnglish); +console.log(bankAccount); + +payRent(100, onSuccessEnglish, onFailEnglish); +console.log(bankAccount); + +donateMoney(100, onSuccessDutch, onFailDutch); +console.log(bankAccount); + +/** +* The console should print out the following: +Payment successful! Thank you! +{ +currentBalance: 150, +transactions: [ + { prevAmount: 350, newAmount: 250, reason: 'Donation' }, + { prevAmount: 250, newAmount: 150, reason: 'Donation' } +] +} +Payment successful! Thank you! +{ +currentBalance: 50, +transactions: [ + { prevAmount: 350, newAmount: 250, reason: 'Donation' }, + { prevAmount: 250, newAmount: 150, reason: 'Donation' }, + { prevAmount: 150, newAmount: 50, reason: 'Rent' } +] +} +U heeft niet voldoende saldo om deze betaling te doen. +{ +currentBalance: 50, +transactions: [ + { prevAmount: 350, newAmount: 250, reason: 'Donation' }, + { prevAmount: 250, newAmount: 150, reason: 'Donation' }, + { prevAmount: 150, newAmount: 50, reason: 'Rent' } +] +} +* +*/ diff --git a/Week4/prep-exercises/1-hyf-program/1-find-mentors.js b/Week4/prep-exercises/1-hyf-program/1-find-mentors.js new file mode 100644 index 0000000..b35d46d --- /dev/null +++ b/Week4/prep-exercises/1-hyf-program/1-find-mentors.js @@ -0,0 +1,31 @@ +import { + modules, + students, + mentors, + classes, +} from "../../../Week1/prep-exercises/1-objects-and-arrays/hyf"; + +/** + * Tjebbe would like help to get a list of possible mentors for a module. + * Fill in this function that finds all the mentors that can teach the given module. + * + * It should return an array of names. So something like: + * ['John', 'Mary'] + */ +const possibleMentorsForModule = (moduleName) => { + // TODO complete this function +}; +// You can uncomment out this line to try your function +// console.log(possibleMentorsForModule('using-apis')); + +/** + * Tjebbe wants to make it even easier for himself. + * Fill in this function that chooses a random mentor to teach the given module. + * + * It should return a single name. + */ +const findMentorForModule = (moduleName) => { + // TODO complete this function +}; +// You can uncomment out this line to try your function +// console.log(findMentorForModule('javascript')); diff --git a/Week4/prep-exercises/1-hyf-program/2-class-list.js b/Week4/prep-exercises/1-hyf-program/2-class-list.js new file mode 100644 index 0000000..adc46f8 --- /dev/null +++ b/Week4/prep-exercises/1-hyf-program/2-class-list.js @@ -0,0 +1,41 @@ +import { + modules, + students, + mentors, + classes, +} from "../../../Week1/prep-exercises/1-objects-and-arrays/hyf"; + +/** + * We would like to have a list of everyone that is currently participating in a class. + * This means the students, but also the mentors that are currently teaching the class. + * The students should be self explanatory, but to find the mentors you will need to follow these steps: + * - Check what the `currentModule` of the class is + * - Find the mentor(s) that are `nowTeaching` that module + * + * Should return the list of names and their roles. So something like: + * + * [{ name: 'John', role: 'student' }, { name: 'Mary', role: 'mentor' }] + */ +const getPeopleOfClass = (className) => { + // TODO complete this function +}; +// You can uncomment out this line to try your function +// console.log(getPeopleOfClass('class34')); + +/** + * We would like to have a complete overview of the current active classes. + * First find the active classes, then for each get the people of that class. + * + * Should return an object with the class names as properties. + * Each class name property contains an array identical to the return from `getPeopleFromClass`. So something like: + * + * { + * class34: [{ name: 'John', role: 'student' }, { name: 'Mary', role: 'mentor' }], + * class35: [{ name: 'Jane', role: 'student' }, { name: 'Steve', role: 'mentor' }] + * } + */ +const getActiveClasses = () => { + // TODO complete this function +}; +// You can uncomment out this line to try your function +// console.log(getActiveClasses()); diff --git a/Week4/prep-exercises/1-hyf-program/README.md b/Week4/prep-exercises/1-hyf-program/README.md new file mode 100644 index 0000000..3f82e28 --- /dev/null +++ b/Week4/prep-exercises/1-hyf-program/README.md @@ -0,0 +1,10 @@ +# Prep exercise - HackYourFuture program + +This week is all about combining everything we know and learning how to solve problems. To help with that, we're going to do some exercises using the data structure of the HackYourFuture program we made in week 1. As it is a prep exercise, it is something you can do together to get to the solution! Have a look at the `index.js` file for the instructions. + +## Things to think about + +After completing the exercise, have a think about the following things: + +- We split the functions into multiple files. Why do you think we do that? +- Note how some functions can be used by others to solve its problem. A lot of times when we are stuck in programming it is because we are trying to solve everything at once. It then helps to split the problem up into steps!