Pokemon fetch

README.md

@@ -24,21 +24,21 @@ In order to successfully complete this module you will need to master the follow
 
 This repository consists of 2 essential parts per week:
 
-1. `README`: this document contains all the required theory you need to understand **while** working on the homework. It contains not only the right resources to learn about the concepts, but also lectures done by HackYourFuture teachers. This is the **first thing** you should start with every week
-2. `MAKEME`: this document contains the instructions for each week's homework. Start with the exercises rather quickly, so that you can ground the concepts you read about earlier.
+1. `README`: this document contains all the required theory you need to understand **while** working on the assignments. It contains not only the right resources to learn about the concepts, but also lectures done by HackYourFuture teachers. This is the **first thing** you should start with every week
+2. `MAKEME`: this document contains the instructions for each week's assignments. Start with the exercises rather quickly, so that you can ground the concepts you read about earlier.
 
 ### How to study
 
 Let's say you are just starting out with the Using API's module. This is what you do...
 
 1. The week always starts on **Wednesday**. First thing you'll do is open the `README.md` for that week. For the first week of `Using API's`, that would be [Week1 Reading](/Week1/README.md)
-2. You spend **Wednesday** and **Thursday** going over the resources and try to get a basic understanding of the concepts. In the meanwhile, you'll also implement any feedback you got on last week's homework (from the JavaScript2 module)
-3. On **Friday** you start with the homework, found in the `MAKEME.md`. For the first week of `Using API's`, that would be [Week1 Homework](/Week1/MAKEME.md)
+2. You spend **Wednesday** and **Thursday** going over the resources and try to get a basic understanding of the concepts. In the meanwhile, you'll also implement any feedback you got on last week's assignments (from the JavaScript2 module)
+3. On **Friday** you start with the assignments, found in the `MAKEME.md`. For the first week of `Using API's`, that would be [Week1 Assignments](/Week1/MAKEME.md)
 4. You spend **Friday** and **Saturday** playing around with the exercises and write down any questions you might have
 5. **DEADLINE 1**: You'll submit any questions you might have before **Saturday 23.59**, in the class channel
 6. On **Sunday** you'll attend class. It'll be of the Q&A format, meaning that there will be no new material. Instead your questions shall be discussed and you can learn from others
-7. You spend **Monday** and **Tuesday** finalizing your homework
-8. **DEADLINE 2**: You submit your homework to the right channels (GitHub) before **Tuesday 23.59**. If you can't make it on time, please communicate it with your mentor
+7. You spend **Monday** and **Tuesday** finalizing your assignments
+8. **DEADLINE 2**: You submit your assignments to the right channels (GitHub) before **Tuesday 23.59**. If you can't make it on time, please communicate it with your mentor
 9. Start the new week by going back to point 1!
 
 In summary:
@@ -49,10 +49,10 @@ To have a more detailed overview of the guidelines, please read [this document](
 
 ## Planning
 
-| Week | Topic | Reading Materials | Homework |
+| Week | Topic | Reading Materials | Assignments |
 | ---- | ----- | ----------------- | -------- |
-| 1.   | Synchronous vs asynchronous, Callbacks, Promises, The Event Loop                | [Reading W1](/Week1/README.md) | [Homework W1](/Week1/MAKEME.md) |
-| 2.   | Application Programming Interface (API), Fetch, Async/await                     | [Reading W2](/Week2/README.md) | [Homework W2](/Week2/MAKEME.md) |
+| 1.   | Synchronous vs asynchronous, Callbacks, Promises, The Event Loop                | [Reading W1](/Week1/README.md) | [Assignments W1](/Week1/MAKEME.md) |
+| 2.   | Application Programming Interface (API), Fetch, Async/await                     | [Reading W2](/Week2/README.md) | [Assignments W2](/Week2/MAKEME.md) |
 | 3.   | Individual project + Interview as test                                          | [Project](/Week3/README.md)    |
 
 ## Finished?

Week1/MAKEME.md

@@ -1,16 +1,18 @@
-# Homework Using API's Week 1
+# Assignments Using API's Week 1
 
 ## **Todo list**
 
 1. Practice the concepts
 2. Prep exercises
-3. Homework exercises
+3. Assignments exercises
+4. Career Training 1 (If not completed yet)
 
 ## **1. Practice the concepts**
 
 This week is tough, asynchronous coding is another one of these programming things that takes awhile to get your head around. Let's start this week off with some interactive exercises! Visit the following link to get started:
 
-- [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!_
+- [Visualising Asynchronicity](https://www.jsv9000.app/). _Note that you do not need to actually solve anything here, but you can use this visualizer to see how asynchronicity works under the hood. Very cool!_
+- [Learn JavaScript: Promises](https://www.codecademy.com/courses/learn-intermediate-javascript/lessons/promises/exercises/constructing-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. Prep exercises**
@@ -19,11 +21,18 @@ This week is tough, asynchronous coding is another one of these programming thin
 
 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**
+## **3. Assignments 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.
+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 [assignments guide](https://github.com/HackYourFuture/UsingAPIs/blob/main/hand-in-assignments-guide.md) to see how to hand in your assignments.
 
-*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 assignments will be a part of the PR*
+
+## **4. Career Training 1 (If not completed yet)**
+
+Remember that the Career Training 1 session is coming up (check your class channel on slack for the exact date). Before the session make sure you have:
+
+- Read the whole [personal brand repository](https://github.com/HackYourFuture/yourpersonalbrand).
+- Done the [assignments](https://github.com/HackYourFuture/yourpersonalbrand/blob/main/yourcurriculum.md#4-submitting-your-cv-to-the-hyf-team) for the repository.
 
 ## Done early?
 

Week1/README.md

@@ -14,8 +14,6 @@ These are the topics for week 1:
    - Chaining
    - Benefits
 3. [The Event Loop](https://study.hackyourfuture.net/#/the-internet/event-loop)
-4. [Career Training II (Interview preparation)](https://github.com/HackYourFuture/interviewpreparation)
-
 
 ## Week goals
 
@@ -25,9 +23,6 @@ In this module we are going to learn how to connect our applications with data s
 
 Lastly, as we now know everything about asynchronicity, we can look at the browser's [Event Loop](https://study.hackyourfuture.net/#/the-internet/event-loop) which every browser implements. This will help you understand how and when your code gets executed in the browser. This will help you decide where to link up your code with the DOM so that it does what you expect.
 
-## Career training II (Interview preparation)
-Finally it is time to continue with developing your soft skills to ace those job interviews. For that, have a look at the [interview preparation repo](https://github.com/HackYourFuture/interviewpreparation). It is a lot to get through, so you may need some time next week as well. There is no homework for this week, but there is some homework for the career training next week, you can already have a look at it if you find these things difficult.
-
 ## Finished?
 
 Are you finished with going through the materials? High five! If you feel ready to get practical, click [here](./MAKEME.md).

Week1/prep-exercises/1-catwalk-promises/README.md

@@ -2,7 +2,7 @@
 
 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.
+Have a look [here](https://github.com/HackYourFuture/Assignments/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
 

Week1/prep-exercises/1-catwalk-promises/index.js

@@ -3,38 +3,56 @@
 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';
+const WALKING_CAT_URL = 'http://www.anniemation.com/clip_art/images/cat-walk.gif';
+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.
+    let currentPos = startPos;
+    img.style.left = `${currentPos}px`;
+    img.src = WALKING_CAT_URL;
+
+    const intervalId = setInterval(() => {
+      currentPos += STEP_SIZE_PX;
+      img.style.left = `${currentPos}px`;
+
+      if (currentPos >= stopPos) {
+        clearInterval(intervalId);
+        resolve();
+      }
+    }, STEP_INTERVAL_MS);
   });
 }
 
 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.
+    img.src = DANCING_CAT_URL;
+    setTimeout(() => {
+      img.src = WALKING_CAT_URL;
+      resolve();
+    }, DANCE_TIME_MS);
   });
 }
 
 function catWalk() {
   const img = document.querySelector('img');
+  if (!img) {
+    return;
+  }
+
   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.
+
+  function performCatWalk() {
+    walk(img, startPos, centerPos)
+      .then(() => dance(img))
+      .then(() => walk(img, centerPos, stopPos))
+      .then(() => performCatWalk());
+  }
+
+  performCatWalk();
 }
 
-window.addEventListener('load', catWalk);
+window.addEventListener('load', catWalk);

Week2/MAKEME.md

@@ -1,11 +1,11 @@
-# Homework Using API's Week 2
+# Assignments Using API's Week 2
 
 ## **Todo list**
 
 1. Practice the concepts
 2. Prep exercises
 3. Code along
-4. Homework exercises
+4. Assignments exercises
 5. Interview preparation
 6. Extra: Code along
 
@@ -25,19 +25,22 @@ Inside your `Using API's` fork, go to the folder `Week2`. Inside of that folder,
 
 ## **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).
+In the following "code along" you'll be building a complete Weather App that makes use of the [Darksky API](https://darksky.net). Darksky has stopped supporting signups, so you can use an alternative [openweathermap API](https://openweathermap.org). For the icons you can use the url `http://openweathermap.org/img/wn/${icon}@2x.png` where ${icon} is where you need to put the data.
 
 - [Build a Weather App with Vanilla JavaScript Tutorial](https://www.youtube.com/watch?v=wPElVpR1rwA)
 
-## **4. Homework exercises**
+## **4. Assignments 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.
+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 [assignments guide](https://github.com/HackYourFuture/UsingAPIs/blob/main/hand-in-assignments-guide.md) to see how to hand in your assignments.
 
-*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 assignments will be a part of the PR*
 
-## **5. Interview preparation**
+## **5. Career Training 1 (If not completed yet)**
 
-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!
+Remember that the Career Training 1 session is coming up (check your class channel on slack for the exact date). Before the session make sure you have:
+
+- Read the whole [personal brand repository](https://github.com/HackYourFuture/yourpersonalbrand).
+- Done the [assignments](https://github.com/HackYourFuture/yourpersonalbrand/blob/main/yourcurriculum.md#4-submitting-your-cv-to-the-hyf-team) for the repository.
 
 ## **6. Extra: Code along**
 
@@ -51,4 +54,4 @@ He uses some things that will be new for you:
 
 ## Done early?
 
-Have a look at the project for next week and start thinking of ideas. You can even start a bit already if you wish, just remember to make sure all your homework is done beforehand!
+Have a look at the project for next week and start thinking of ideas. You can even start a bit already if you wish, just remember to make sure all your assignments is done beforehand!

Week2/README.md

@@ -7,10 +7,11 @@ These are the topics for week 2:
 1. [Application Programming Interface (API)](https://study.hackyourfuture.net/#/the-internet/api)
    - Public/private APIs
    - Connecting with APIs
-2. [Fetch API](https://study.hackyourfuture.net/#/the-internet/fetch)
-3. [Async/Await](https://study.hackyourfuture.net/#/javascript/modern-js)
+2. [Fetch API](https://study.hackyourfuture.net/#/the-internet/fetch) 
+3.  [CORS](https://study.hackyourfuture.net/#/the-internet/cors)
+4. [Async/Await](https://study.hackyourfuture.net/#/javascript/modern-js)
    - Catching errors with try/catch
-4. [Interview preparation](https://github.com/HackYourFuture/interviewpreparation)
+5. [Career Training I](https://github.com/HackYourFuture/yourpersonalbrand): Not all at once!
 
 ## Week goals
 
@@ -22,11 +23,14 @@ There are many ways to request data from an API, initially everything was done u
 
 Last week we learned about Promises and with the increased use of promises, modern JavaScript introduced some new syntax that can be used with those promises. Have a look at the section on Async/await in the modern JavaScript page of your study book [here]((https://study.hackyourfuture.net/#/javascript/modern-js)) now that you know what promises are so that you know what it does.
 
-You will probably ask yourself now which way is best to handle asynchronous code and the answer is that there is no best way. Generally callbacks are great for simple applications, but get into callback hell if stuff gets too complicated. Promises with `.then` chains are great for more complex situations where the chaining can be very powerful, but can be a little hard to follow for people who do not have much experience with them. Using async/await makes the code look a little more synchronous again and that can make it easier to follow. It does, however, make it a little more complex to handle errors or situations where something absolutely needs to be done (a `finally` is invaluable in these situations). So, it is up to you to decide based on the situation what to use. 
+You will probably ask yourself now which way is best to handle asynchronous code and the answer is that there is no best way. Generally callbacks are great for simple applications, but get into callback hell if stuff gets too complicated. Promises with `.then` chains are great for more complex situations where the chaining can be very powerful, but can be a little hard to follow for people who do not have much experience with them. Using async/await makes the code look a little more synchronous again and that can make it easier to follow. It does, however, make it a little more complex to handle errors or situations where something absolutely needs to be done (a `finally` is invaluable in these situations). So, it is up to you to decide based on the situation what to use.
 
-## Career training II (Interview preparation)
-If you haven't finished all the material yet, then continue with it this week.
+## Career Training I (Your personal brand)
 
-## Finished?
+Since you completed Browsers, you now have a first project to write down on your CV! You will add many more in the future, as you progress in your abilities. It is therefore time to start thinking about all of the steps required to start the job search and to get accepted to your first programming job. The first step will be handled in the Career Training I: _your personal brand_. We will cover how to present your CV, GitHub, LinkedIn, etc. to that they stand out. These are the first things employers will look at, so they convey a first impression of you and has to be great! We have compiled a big list of information about how to go about creating your personal brand in [this repo](https://github.com/HackYourFuture/yourpersonalbrand).
 
-Are you finished with going through the materials? High five! If you feel ready to get practical, click [here](./MAKEME.md).
+### Career Training I: Planning
+
+You don't have to do all of this immediately. Somewhere this week you will receive a message in your cohort channel from Giuseppina to plan the Career Training I. *Before* that session, make sure to have:
+- Read the whole [personal brand repository](https://github.com/HackYourFuture/yourpersonalbrand).
+- Done the [assignment](https://github.com/HackYourFuture/yourpersonalbrand/blob/main/yourcurriculum.md#4-submitting-your-cv-to-the-hyf-team) for the repository.