HackYourFuture · robvk · Dec 8, 2021 · Dec 5, 2021 · Dec 7, 2021 · Dec 7, 2021
diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md
@@ -3,7 +3,8 @@
 ## **Todo list**
 
 1. Practice the concepts
-2. Homework exercises
+2. Prep exercises
+3. Homework exercises
 
 ## **1. Practice the concepts**
 
@@ -12,7 +13,13 @@ This week is tough, asynchronous coding is another one of these programming thin
 - [Learn JavaScript: Promises](https://www.codecademy.com/learn/learn-intermediate-javascript/modules/javascript-promises). _Note that the last exercise is not necessary, it is very complicated and something that is rarely used. You will not need to be able to do this. See it as a challenge!_
 - [JavaScript promises, mastering the asynchronous](https://www.codingame.com/playgrounds/347/javascript-promises-mastering-the-asynchronous/what-is-asynchronous-in-javascript)
 
-## **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 `Using API's` 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. Homework exercises**
 
 This week we expect you to do the exercises in the corresponding module/week folder (Using API's / Week 1). Have a look at the [homework guide](https://github.com/HackYourFuture/UsingAPIs/blob/main/homework-handin-guide.md) to see how to hand in your homework.
 

diff --git a/Week1/prep-exercises/1-catwalk-promises/README.md b/Week1/prep-exercises/1-catwalk-promises/README.md
@@ -0,0 +1,12 @@
+# Prep exercise - Cat walk with Promises
+
+In the Browsers module you made an exercise to make a cat walk on the screen until it was halfway, then do a dance for 5 seconds after which it will continue walking until the end of the screen. In this exercise the result should be the same, but this time we want to use `Promise`s to write it in a different way.
+
+Have a look [here](https://github.com/HackYourFuture/Homework/tree/main/2-Browsers/Week1#exercise-5-the-cat-walk) to remind yourself what the goal of the code was and then do the steps written in `index.js`. We have already provided a couple of functions for you.
+
+## Things to think about
+
+- What do you think the advantages are of having the constants in the global scope? Are there any disadvantages?
+- To make the code loop we cannot use a standard JavaScript loop (`for` or `while`). Why is that?
+- Do you feel this version is easier to read than the version you made in the Browsers module?
+- Is this version more efficient or not or does it not matter?
diff --git a/Week1/prep-exercises/1-catwalk-promises/index.html b/Week1/prep-exercises/1-catwalk-promises/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cat Walk</title>
+    <style>
+      img {
+        position: absolute;
+      }
+    </style>
+  </head>
+  <body>
+    <img
+      src="http://www.anniemation.com/clip_art/images/cat-walk.gif"
+      alt="Cat walking"
+    />
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/Week1/prep-exercises/1-catwalk-promises/index.js b/Week1/prep-exercises/1-catwalk-promises/index.js
@@ -0,0 +1,40 @@
+'use strict';
+
+const STEP_SIZE_PX = 10;
+const STEP_INTERVAL_MS = 50;
+const DANCE_TIME_MS = 5000;
+const DANCING_CAT_URL =
+  'https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif';
+
+function walk(img, startPos, stopPos) {
+  return new Promise((resolve) => {
+    // Resolve this promise when the cat (`img`) has walked from `startPos` to
+    // `stopPos`.
+    // Make good use of the `STEP_INTERVAL_PX` and `STEP_INTERVAL_MS`
+    // constants.
+  });
+}
+
+function dance(img) {
+  return new Promise((resolve) => {
+    // Switch the `.src` of the `img` from the walking cat to the dancing cat
+    // and, after a timeout, reset the `img` back to the walking cat. Then
+    // resolve the promise.
+    // Make good use of the `DANCING_CAT_URL` and `DANCE_TIME_MS` constants.
+  });
+}
+
+function catWalk() {
+  const img = document.querySelector('img');
+  const startPos = -img.width;
+  const centerPos = (window.innerWidth - img.width) / 2;
+  const stopPos = window.innerWidth;
+
+  // Use the `walk()` and `dance()` functions to let the cat do the following:
+  // 1. Walk from `startPos` to `centerPos`.
+  // 2. Then dance for 5 secs.
+  // 3. Then walk from `centerPos` to `stopPos`.
+  // 4. Repeat the first three steps indefinitely.
+}
+
+window.addEventListener('load', catWalk);
diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md
@@ -3,10 +3,11 @@
 ## **Todo list**
 
 1. Practice the concepts
-2. Code along
-3. Homework exercises
-4. Interview preparation
-5. Extra: Code along
+2. Prep exercises
+3. Code along
+4. Homework exercises
+5. Interview preparation
+6. Extra: Code along
 
 ## **1. Practice the concepts**
 
@@ -16,23 +17,29 @@ This week's concepts can be challenging, therefore let's get an easy introductio
 
 This part also introduces you to some other concepts `XMLHttpRequest`
 
-## **2. Code along**
+## **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 `Using API's` 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.
+
+## **3. Code along**
 
 In the following "code along" you'll be building a complete Weather App that makes use of the [Darksky API](https://darksky.net).
 
 - [Build a Weather App with Vanilla JavaScript Tutorial](https://www.youtube.com/watch?v=wPElVpR1rwA)
 
-## **3. Homework exercises**
+## **4. Homework exercises**
 
 This week we expect you to do the exercises in the corresponding module/week folder (Using API's / Week 2). Have a look at the [homework guide](https://github.com/HackYourFuture/UsingAPIs/blob/main/homework-handin-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*
 
-## **4. Interview preparation**
+## **5. Interview preparation**
 
 After reading the info on the [‘Interview Preparation’ Repo](https://github.com/HackYourFuture/interviewpreparation), make a copy of [this file](https://docs.google.com/document/u/2/d/114rTGS4eG6tpkrMAyVIdvgTrnpmkRL6ax_smkw1B0HI/copy) and submit your answers to the team [here](https://hackyourfuture.typeform.com/to/s6zYAugm). These answers will help us assess how ready you are for interviews and we will also discuss your answers in the Career Training Session II which will happen this (or next) week. More information about this session will be shared on Slack!
 
-## **5. Extra: Code along**
+## **6. Extra: Code along**
 
 If you are done and want to practice some more, the following code along implements a GitHub profile finder using the GitHub API.
 

diff --git a/Week2/prep-exercises/1-catwalk-async-await/README.md b/Week2/prep-exercises/1-catwalk-async-await/README.md
@@ -0,0 +1,11 @@
+# Prep exercise - Cat walk with async/await
+
+In the previous week we changed the cat walk to an implementation using `Promise`s. Let's now use the new `async/await` syntax to simplify it a little more. Have a look at the `index.js` to see what to do. 
+
+The `dance` and `walk` functions are identical to last week, but our `catWalk` function can now be implemented using a standard `while` loop. Try to implement that and look at the following questions.
+
+## Things to think about
+
+- Do you feel this version is easier to read than the version you made in the previous week?
+- Is this version more efficient or not or is there no difference?
+- Async/await makes the code wait until the Promise is resolved. Does this then also block any other functions from running? Why or why not?
diff --git a/Week2/prep-exercises/1-catwalk-async-await/index.html b/Week2/prep-exercises/1-catwalk-async-await/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cat Walk</title>
+    <style>
+      img {
+        position: absolute;
+      }
+    </style>
+  </head>
+  <body>
+    <img
+      src="http://www.anniemation.com/clip_art/images/cat-walk.gif"
+      alt="Cat walking"
+    />
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/Week2/prep-exercises/1-catwalk-async-await/index.js b/Week2/prep-exercises/1-catwalk-async-await/index.js
@@ -0,0 +1,30 @@
+'use strict';
+
+const STEP_INTERVAL_MS = 50;
+const STEP_SIZE_PX = 10;
+const DANCE_TIME_MS = 5000;
+const DANCING_CAT_URL =
+  'https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif';
+
+function walk(img, startPos, stopPos) {
+  return new Promise((resolve) => {
+    // Copy over the implementation from last week
+  });
+}
+
+function dance(img) {
+  return new Promise((resolve) => {
+    // Copy over the implementation from last week
+  });
+}
+
+async function catWalk() {
+  const img = document.querySelector('img');
+  const startPos = -img.width;
+  const centerPos = (window.innerWidth - img.width) / 2;
+  const stopPos = window.innerWidth;
+
+  // Use async/await syntax to loop the walk and dance functions
+}
+
+window.addEventListener('load', catWalk);
diff --git a/Week2/prep-exercises/2-pokemon-fetch/README.md b/Week2/prep-exercises/2-pokemon-fetch/README.md
@@ -0,0 +1,15 @@
+# Prep exercise - Error handling
+
+Until this week the code you have been working on is mostly your own and is generally very static which means that if it works once it will most likely keep working in the same way. When interacting with external API's over the internet this goes out the window. You have no control over the data the API gives and although usually fine, the internet is always going to be unreliable. This means your code needs to be able to handle it when something goes wrong and inform the user.
+
+In this exercise we'll focus on the fetching and error handling part of working with an API, which you can use to work with any other code where a possible problem can occur. The `index.js` gives you instructions on what to do, there is some code there already, but feel free to alter that if needed.
+
+The expected behaviour is as follows:
+
+- When you press the **Get Data** button with the **Use invalid URL** checkbox **unchecked** the data from the Pokemon API will be fetched and rendered as JSON on the page.
+- When you press the button with the checkbox **checked** an HTTP error message will be rendered on the page.
+## Things to think about
+
+- If you look at the `index.html` you can see our error rendering is put into a regular `div` element, but our pokemon json is put into a `pre` element. Why is that?
+- The comments say to handle the error in the main function. What do you think the advantages are of doing it this way? What about if you would do the error handling in the `fetchJSON` function?
+- Some students ask us why not just put `try/catch` blocks around the main function and have that as the place to catch all errors. Why do you think we do not suggest doing this?
diff --git a/Week2/prep-exercises/2-pokemon-fetch/index.html b/Week2/prep-exercises/2-pokemon-fetch/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <div>
+      <button type="button" id="button">Get Data</button>
+      <input type="checkbox" id="option" name="option" />
+      <label for="option">Use invalid URL</label>
+    </div>
+    <div id="container">
+      <pre id="json"></pre>
+      <div id="error"></div>
+    </div>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/Week2/prep-exercises/2-pokemon-fetch/index.js b/Week2/prep-exercises/2-pokemon-fetch/index.js
@@ -0,0 +1,62 @@
+'use strict';
+/*------------------------------------------------------------------------------
+ * In this exercise you will practice fetching data from a web API, using
+ * `fetch`, promises, async/await and try/catch.
+ *
+ * Your solution should both work for the "happy" path (using VALID_URL) as
+ * well handle the error in the "unhappy" path (when selecting INVALID_URL).
+ *
+ * You will need to decide which functions need to be made `async` and where
+ * `try/catch` blocks should be added.
+ *
+ * The HTML file already contains the necessary HTML elements.
+ *----------------------------------------------------------------------------*/
+
+const VALID_URL = 'https://pokeapi.co/api/v2/pokemon/?limit=5';
+const INVALID_URL = 'https://pokeapi.co/api/v2/pokemons/?limit=5';
+
+async function fetchJSON(url) {
+  // TODO
+
+  // Fetch the JSON data from the web API that responds to the `url` parameter
+  // and return a promise that resolves to a corresponding JavaScript object.
+  // Make sure to check for HTTP errors.
+}
+
+function renderResults(pokemons) {
+  // 1. Clear the text content of the HTML element with id `error`.
+  const errorElement = document.querySelector('#error');
+  errorElement.innerText = '';
+
+  // 2. Set the text content of the HTML element with id `json` to JSON text
+  //    from the `pokemons` argument, formatted in a human readable form (i.e.,
+  //    with indentation and line breaks).
+  const pokemonsElement = document.querySelector('#json');
+  pokemonsElement.innerText = JSON.stringify(pokemons, null, 2);
+}
+
+function renderError(err) {
+  // 1. Clear the text content of the HTML element with id `json`.
+  const pokemonsElement = document.querySelector('#json');
+  pokemonsElement.innerText = '';
+
+  // 2. Set the text content of the HTML element with id `error` to the
+  //    `.message` property of the `err` parameter.
+  const errorElement = document.querySelector('#error');
+  errorElement.innerText = err;
+}
+
+function main() {
+  const button = document.querySelector('#button');
+  button.addEventListener('click', () => {
+    const option = document.querySelector('#option');
+    const url = option.checked ? INVALID_URL : VALID_URL;
+
+    // TODO
+    // Use `fetchJSON()` to fetch data from the selected url.
+    // If successful, render the data by calling function `renderResults()`.
+    // On failure, render the error by calling function `renderError()`.
+  });
+}
+
+window.addEventListener('load', main);
diff --git a/Week3/project.md → hackyourrepo-app/project.md b/Week3/project.md → hackyourrepo-app/project.md