From 9774436513caffb283b4125a36b5c3e6d3a548a4 Mon Sep 17 00:00:00 2001 From: robvk Date: Sun, 5 Dec 2021 15:17:06 +0100 Subject: [PATCH 1/5] cat-walk exercises for week1 and week2 --- .../1-catwalk-promises/README.md | 12 ++++++ .../1-catwalk-promises/index.html | 20 ++++++++++ .../1-catwalk-promises/index.js | 40 +++++++++++++++++++ .../1-catwalk-async-await/README.md | 11 +++++ .../1-catwalk-async-await/index.html | 20 ++++++++++ .../1-catwalk-async-await/index.js | 30 ++++++++++++++ 6 files changed, 133 insertions(+) create mode 100644 Week1/prep-exercises/1-catwalk-promises/README.md create mode 100644 Week1/prep-exercises/1-catwalk-promises/index.html create mode 100644 Week1/prep-exercises/1-catwalk-promises/index.js create mode 100644 Week2/prep-exercises/1-catwalk-async-await/README.md create mode 100644 Week2/prep-exercises/1-catwalk-async-await/index.html create mode 100644 Week2/prep-exercises/1-catwalk-async-await/index.js diff --git a/Week1/prep-exercises/1-catwalk-promises/README.md b/Week1/prep-exercises/1-catwalk-promises/README.md new file mode 100644 index 00000000..cb3063c2 --- /dev/null +++ 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? \ No newline at end of file diff --git a/Week1/prep-exercises/1-catwalk-promises/index.html b/Week1/prep-exercises/1-catwalk-promises/index.html new file mode 100644 index 00000000..d748fe52 --- /dev/null +++ b/Week1/prep-exercises/1-catwalk-promises/index.html @@ -0,0 +1,20 @@ + + + + + + Cat Walk + + + + Cat walking + + + \ No newline at end of file diff --git a/Week1/prep-exercises/1-catwalk-promises/index.js b/Week1/prep-exercises/1-catwalk-promises/index.js new file mode 100644 index 00000000..afb81df3 --- /dev/null +++ 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 use 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); \ No newline at end of file diff --git a/Week2/prep-exercises/1-catwalk-async-await/README.md b/Week2/prep-exercises/1-catwalk-async-await/README.md new file mode 100644 index 00000000..6d947af3 --- /dev/null +++ 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? \ No newline at end of file diff --git a/Week2/prep-exercises/1-catwalk-async-await/index.html b/Week2/prep-exercises/1-catwalk-async-await/index.html new file mode 100644 index 00000000..d748fe52 --- /dev/null +++ b/Week2/prep-exercises/1-catwalk-async-await/index.html @@ -0,0 +1,20 @@ + + + + + + Cat Walk + + + + Cat walking + + + \ No newline at end of file diff --git a/Week2/prep-exercises/1-catwalk-async-await/index.js b/Week2/prep-exercises/1-catwalk-async-await/index.js new file mode 100644 index 00000000..9fd9f774 --- /dev/null +++ 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); \ No newline at end of file From facd23f340ee677a8083dfe8cbc9bf67426e68df Mon Sep 17 00:00:00 2001 From: robvk Date: Tue, 7 Dec 2021 13:43:58 +0100 Subject: [PATCH 2/5] Added pokemon exercise --- .../prep-exercises/2-pokemon-fetch/README.md | 11 ++++ .../prep-exercises/2-pokemon-fetch/index.html | 21 +++++++ Week2/prep-exercises/2-pokemon-fetch/index.js | 62 +++++++++++++++++++ {Week3 => hackyourrepo-app}/project.md | 0 4 files changed, 94 insertions(+) create mode 100644 Week2/prep-exercises/2-pokemon-fetch/README.md create mode 100644 Week2/prep-exercises/2-pokemon-fetch/index.html create mode 100644 Week2/prep-exercises/2-pokemon-fetch/index.js rename {Week3 => hackyourrepo-app}/project.md (100%) diff --git a/Week2/prep-exercises/2-pokemon-fetch/README.md b/Week2/prep-exercises/2-pokemon-fetch/README.md new file mode 100644 index 00000000..75808bf6 --- /dev/null +++ b/Week2/prep-exercises/2-pokemon-fetch/README.md @@ -0,0 +1,11 @@ +# 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. + +## 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? \ No newline at end of file diff --git a/Week2/prep-exercises/2-pokemon-fetch/index.html b/Week2/prep-exercises/2-pokemon-fetch/index.html new file mode 100644 index 00000000..4dfb8b33 --- /dev/null +++ b/Week2/prep-exercises/2-pokemon-fetch/index.html @@ -0,0 +1,21 @@ + + + + + + + Document + + +
+ + + +
+
+ 

+      

+    

+    
+  
+
\ No newline at end of file
diff --git a/Week2/prep-exercises/2-pokemon-fetch/index.js b/Week2/prep-exercises/2-pokemon-fetch/index.js
new file mode 100644
index 00000000..f6be006c
--- /dev/null
+++ 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);
\ No newline at end of file
diff --git a/Week3/project.md b/hackyourrepo-app/project.md
similarity index 100%
rename from Week3/project.md
rename to hackyourrepo-app/project.md

From f8c7874ce49cfe0f2b5c8e843138f0cdd607f8d0 Mon Sep 17 00:00:00 2001
From: robvk 
Date: Tue, 7 Dec 2021 19:14:27 +0100
Subject: [PATCH 3/5] Add text in MAKEME for prep exercises

---
 Week1/MAKEME.md | 11 +++++++++--
 Week2/MAKEME.md | 16 +++++++++++-----
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md
index fbf7b46f..cf1093ce 100644
--- 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/introduction-to-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/Week2/MAKEME.md b/Week2/MAKEME.md
index bc77909e..4e763666 100644
--- a/Week2/MAKEME.md
+++ b/Week2/MAKEME.md
@@ -3,6 +3,7 @@
 ## **Todo list**
 
 1. Practice the concepts
+2. Prep exercises
 2. Code along
 3. Homework exercises
 4. Interview preparation
@@ -16,22 +17,27 @@ 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.
 
-## **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.
 

From 3dccef43ea53472c032e0b9b7938f04c457d0223 Mon Sep 17 00:00:00 2001
From: robvk 
Date: Wed, 8 Dec 2021 17:02:52 +0100
Subject: [PATCH 4/5] Update Week1/prep-exercises/1-catwalk-promises/index.js

Co-authored-by: Jim Cramer 
---
 Week1/prep-exercises/1-catwalk-promises/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Week1/prep-exercises/1-catwalk-promises/index.js b/Week1/prep-exercises/1-catwalk-promises/index.js
index afb81df3..dc07a9fe 100644
--- a/Week1/prep-exercises/1-catwalk-promises/index.js
+++ b/Week1/prep-exercises/1-catwalk-promises/index.js
@@ -10,7 +10,7 @@ function walk(img, startPos, stopPos) {
   return new Promise((resolve) => {
     // Resolve this promise when the cat (`img`) has walked from `startPos` to
     // `stopPos`.
-    // Make use good use of the `STEP_INTERVAL_PX` and `STEP_INTERVAL_MS`
+    // Make good use of the `STEP_INTERVAL_PX` and `STEP_INTERVAL_MS`
     // constants.
   });
 }

From 7663cc9b766e7d91001c199fce10981eed6160ef Mon Sep 17 00:00:00 2001
From: robvk 
Date: Wed, 8 Dec 2021 17:03:03 +0100
Subject: [PATCH 5/5] Update Week2/prep-exercises/2-pokemon-fetch/README.md

Co-authored-by: Jim Cramer 
---
 Week2/prep-exercises/2-pokemon-fetch/README.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/Week2/prep-exercises/2-pokemon-fetch/README.md b/Week2/prep-exercises/2-pokemon-fetch/README.md
index 75808bf6..ec728249 100644
--- a/Week2/prep-exercises/2-pokemon-fetch/README.md
+++ b/Week2/prep-exercises/2-pokemon-fetch/README.md
@@ -4,6 +4,10 @@ Until this week the code you have been working on is mostly your own and is gene
 
 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?