├── LICENSE ├── README.md ├── Week1 ├── MAKEME.md ├── README.md └── prep-exercises │ └── 1-catwalk-promises │ ├── README.md │ ├── index.html │ └── index.js ├── Week2 ├── MAKEME.md ├── README.md └── prep-exercises │ ├── 1-catwalk-async-await │ ├── README.md │ ├── index.html │ └── index.js │ └── 2-pokemon-fetch │ ├── README.md │ ├── index.html │ └── index.js ├── Week3 ├── README.md └── assets │ ├── hyf-github-error.png │ ├── hyf-github.png │ └── week2.png ├── assets ├── API.png ├── OOP.png ├── homework-submission.png ├── pokemon-app.gif ├── stasel.png ├── submit-homework.png ├── trivia-app.gif ├── usingapis.png └── weekflow.png ├── hackyourrepo-app ├── hyf.png ├── index.html ├── project.md ├── script.js └── style.css ├── hand-in-assignments-guide.md ├── package-lock.json ├── package.json └── prettier.config.js /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 HackYourFuture 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | > Please help us improve and share your feedback! If you find better tutorials 2 | > or links, please share them by [opening a pull request](https://github.com/HackYourFuture/UsingAPIs/pulls). 3 | 4 | # Module #4 - Using APIs (Frontend) 5 | 6 | ![Using APIs](./assets/usingapis.png) 7 | 8 | Welcome to Using API's! Congratulations on making it this far. You're well on your way to the top! 9 | 10 | A big part of being a programmer means moving data from one place to another. It also means working with other people's software. In this module you'll be learning about one of the core things of what makes a web developer: working with APIs! 11 | 12 | ## Learning goals 13 | 14 | In order to successfully complete this module you will need to master the following: 15 | 16 | - Learn what an `Application Programming Interface` (API) is 17 | - Understand how to write more readable `asynchronous JavaScript` 18 | - Connect with different `public APIs` 19 | - Build a `Single Page Application` (SPA) 20 | 21 | ## How to use this repository 22 | 23 | ### Repository content 24 | 25 | This repository consists of 2 essential parts per week: 26 | 27 | 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 28 | 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. 29 | 30 | ### How to study 31 | 32 | Let's say you are just starting out with the Using API's module. This is what you do... 33 | 34 | 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) 35 | 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) 36 | 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) 37 | 4. You spend **Friday** and **Saturday** playing around with the exercises and write down any questions you might have 38 | 5. **DEADLINE 1**: You'll submit any questions you might have before **Saturday 23.59**, in the class channel 39 | 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 40 | 7. You spend **Monday** and **Tuesday** finalizing your assignments 41 | 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 42 | 9. Start the new week by going back to point 1! 43 | 44 | In summary: 45 | 46 | ![Weekflow](assets/weekflow.png) 47 | 48 | To have a more detailed overview of the guidelines, please read [this document](https://docs.google.com/document/d/1JUaEbxMQTyljAPFsWIbbLwwvvIXZ0VCHmCCN8RaeVIc/edit?usp=sharing) or ask your mentor/class on Slack! 49 | 50 | ## Planning 51 | 52 | | Week | Topic | Reading Materials | Assignments | 53 | | ---- | ----- | ----------------- | -------- | 54 | | 1. | Synchronous vs asynchronous, Callbacks, Promises, The Event Loop | [Reading W1](/Week1/README.md) | [Assignments W1](/Week1/MAKEME.md) | 55 | | 2. | Application Programming Interface (API), Fetch, Async/await | [Reading W2](/Week2/README.md) | [Assignments W2](/Week2/MAKEME.md) | 56 | | 3. | Individual project + Interview as test | [Project](/Week3/README.md) | 57 | 58 | ## Finished? 59 | 60 | Did you finish the module? High five! 61 | 62 | If you feel ready for the next challenge, click [here](https://www.github.com/HackYourFuture/Node.js) to go to Node.js! 63 | 64 | _The HackYourFuture curriculum is subject to CC BY copyright. This means you can freely use our materials, but just make sure to give us credit for it :)_ 65 | 66 | Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. 67 | -------------------------------------------------------------------------------- /Week1/MAKEME.md: -------------------------------------------------------------------------------- 1 | # Assignments Using API's Week 1 2 | 3 | ## **Todo list** 4 | 5 | 1. Practice the concepts 6 | 2. Prep exercises 7 | 3. Assignments exercises 8 | 4. Career Training 1 (If not completed yet) 9 | 10 | ## **1. Practice the concepts** 11 | 12 | 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: 13 | 14 | - [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!_ 15 | - [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!_ 16 | - [JavaScript promises, mastering the asynchronous](https://www.codingame.com/playgrounds/347/javascript-promises-mastering-the-asynchronous/what-is-asynchronous-in-javascript) 17 | 18 | ## **2. Prep exercises** 19 | 20 | > 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. 21 | 22 | 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. 23 | 24 | ## **3. Assignments exercises** 25 | 26 | 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. 27 | 28 | *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* 29 | 30 | ## **4. Career Training 1 (If not completed yet)** 31 | 32 | 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: 33 | 34 | - Read the whole [personal brand repository](https://github.com/HackYourFuture/yourpersonalbrand). 35 | - Done the [assignments](https://github.com/HackYourFuture/yourpersonalbrand/blob/main/yourcurriculum.md#4-submitting-your-cv-to-the-hyf-team) for the repository. 36 | 37 | ## Done early? 38 | 39 | Have a look at the material for next week! 40 | 41 | -------------------------------------------------------------------------------- /Week1/README.md: -------------------------------------------------------------------------------- 1 | # Reading Material Using API's Week 1 2 | 3 | ## Agenda 4 | 5 | These are the topics for week 1: 6 | 7 | 1. [Synchronous vs. asynchronous](https://study.hackyourfuture.net/#/javascript/asynchronous) 8 | - Synchronous 9 | - Asynchronous 10 | - Introducing asynchronicity using callbacks 11 | 2. [Promises](https://study.hackyourfuture.net/#/javascript/promises) 12 | - Callback Hell 13 | - Promise States 14 | - Chaining 15 | - Benefits 16 | 3. [The Event Loop](https://study.hackyourfuture.net/#/the-internet/event-loop) 17 | 18 | ## Week goals 19 | 20 | All of the detailed information about every concept is in your study book. The following goal explanation will link you to the correct place to get studying. Read through the goal description once to get an idea of what you will be learning, then go through the different links (either from the agenda or this goal list). 21 | 22 | In this module we are going to learn how to connect our applications with data sources from the internet, via what's called APIs. But before we get into that we need to learn about asynchronous code. Until now you've built everything in a synchronous way as all your code runs only locally and superfast. As soon as you start requesting data from other sources we get into the problem of having to wait. This means we will need to start writing what is called [asynchronous code](https://study.hackyourfuture.net/#/javascript/asynchronous). We will then go into the concept of [Promises](https://study.hackyourfuture.net/#/javascript/promises), which is a syntax the JavaScript language offers us to work with asynchronous problems. 23 | 24 | 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. 25 | 26 | ## Finished? 27 | 28 | Are you finished with going through the materials? High five! If you feel ready to get practical, click [here](./MAKEME.md). 29 | -------------------------------------------------------------------------------- /Week1/prep-exercises/1-catwalk-promises/README.md: -------------------------------------------------------------------------------- 1 | # Prep exercise - Cat walk with Promises 2 | 3 | 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. 4 | 5 | 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. 6 | 7 | ## Things to think about 8 | 9 | - What do you think the advantages are of having the constants in the global scope? Are there any disadvantages? 10 | - To make the code loop we cannot use a standard JavaScript loop (`for` or `while`). Why is that? 11 | - Do you feel this version is easier to read than the version you made in the Browsers module? 12 | - Is this version more efficient or not or does it not matter? -------------------------------------------------------------------------------- /Week1/prep-exercises/1-catwalk-promises/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Cat Walk 7 | 12 | 13 | 14 | Cat walking 18 | 19 | 20 | -------------------------------------------------------------------------------- /Week1/prep-exercises/1-catwalk-promises/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const STEP_SIZE_PX = 10; 4 | const STEP_INTERVAL_MS = 50; 5 | const DANCE_TIME_MS = 5000; 6 | const DANCING_CAT_URL = 7 | 'https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif'; 8 | 9 | function walk(img, startPos, stopPos) { 10 | return new Promise((resolve) => { 11 | // Resolve this promise when the cat (`img`) has walked from `startPos` to 12 | // `stopPos`. 13 | // Make good use of the `STEP_INTERVAL_PX` and `STEP_INTERVAL_MS` 14 | // constants. 15 | }); 16 | } 17 | 18 | function dance(img) { 19 | return new Promise((resolve) => { 20 | // Switch the `.src` of the `img` from the walking cat to the dancing cat 21 | // and, after a timeout, reset the `img` back to the walking cat. Then 22 | // resolve the promise. 23 | // Make good use of the `DANCING_CAT_URL` and `DANCE_TIME_MS` constants. 24 | }); 25 | } 26 | 27 | function catWalk() { 28 | const img = document.querySelector('img'); 29 | const startPos = -img.width; 30 | const centerPos = (window.innerWidth - img.width) / 2; 31 | const stopPos = window.innerWidth; 32 | 33 | // Use the `walk()` and `dance()` functions to let the cat do the following: 34 | // 1. Walk from `startPos` to `centerPos`. 35 | // 2. Then dance for 5 secs. 36 | // 3. Then walk from `centerPos` to `stopPos`. 37 | // 4. Repeat the first three steps indefinitely. 38 | } 39 | 40 | window.addEventListener('load', catWalk); -------------------------------------------------------------------------------- /Week2/MAKEME.md: -------------------------------------------------------------------------------- 1 | # Assignments Using API's Week 2 2 | 3 | ## **Todo list** 4 | 5 | 1. Practice the concepts 6 | 2. Prep exercises 7 | 3. Code along 8 | 4. Assignments exercises 9 | 5. Interview preparation 10 | 6. Extra: Code along 11 | 12 | ## **1. Practice the concepts** 13 | 14 | This week's concepts can be challenging, therefore let's get an easy introduction using some interactive exercises! Check the following resources out and start practicing: 15 | 16 | - [Learn JavaScript: Requests I and II](https://www.codecademy.com/learn/learn-intermediate-javascript/modules/intermediate-javascript-requests) (only the two lessons, not the articles/project and quiz) 17 | 18 | This part also introduces you to some other concepts `XMLHttpRequest` 19 | 20 | ## **2. Prep exercises** 21 | 22 | > 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. 23 | 24 | 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. 25 | 26 | ## **3. Code along** 27 | 28 | 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. 29 | 30 | - [Build a Weather App with Vanilla JavaScript Tutorial](https://www.youtube.com/watch?v=wPElVpR1rwA) 31 | 32 | ## **4. Assignments exercises** 33 | 34 | 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. 35 | 36 | *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* 37 | 38 | ## **5. Career Training 1 (If not completed yet)** 39 | 40 | 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: 41 | 42 | - Read the whole [personal brand repository](https://github.com/HackYourFuture/yourpersonalbrand). 43 | - Done the [assignments](https://github.com/HackYourFuture/yourpersonalbrand/blob/main/yourcurriculum.md#4-submitting-your-cv-to-the-hyf-team) for the repository. 44 | 45 | ## **6. Extra: Code along** 46 | 47 | If you are done and want to practice some more, the following code along implements a GitHub profile finder using the GitHub API. 48 | 49 | - [Using APIs in JavaScript - Create a Github Profile Finder Application](https://www.youtube.com/watch?v=sJspH620ZsU) 50 | 51 | He uses some things that will be new for you: 52 | - `scss` - This is what is called a css precompiler that adds some functionality to your css. `sass` is another version of this. Some projects use these, some do not. It is not necessary to know what this does specifically. 53 | - `package.json` commands with the `live server` extension. This is a way to set up a project, don't worry too much about understanding exactly how it works 54 | 55 | ## Done early? 56 | 57 | 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! 58 | -------------------------------------------------------------------------------- /Week2/README.md: -------------------------------------------------------------------------------- 1 | # Reading Material Using API's Week 2 2 | 3 | ## Agenda 4 | 5 | These are the topics for week 2: 6 | 7 | 1. [Application Programming Interface (API)](https://study.hackyourfuture.net/#/the-internet/api) 8 | - Public/private APIs 9 | - Connecting with APIs 10 | 2. [Fetch API](https://study.hackyourfuture.net/#/the-internet/fetch) 11 | 3. [CORS](https://study.hackyourfuture.net/#/the-internet/cors) 12 | 4. [Async/Await](https://study.hackyourfuture.net/#/javascript/modern-js) 13 | - Catching errors with try/catch 14 | 5. [Career Training I](https://github.com/HackYourFuture/yourpersonalbrand): Not all at once! 15 | 16 | ## Week goals 17 | 18 | All of the detailed information about every concept is in your study book. The following goal explanation will link you to the correct place to get studying. Read through the goal description once to get an idea of what you will be learning, then go through the different links (either from the agenda or this goal list). 19 | 20 | This week we finally get to learn what an API is although you will probably already have an idea. Read through the thorough explanation [here](https://study.hackyourfuture.net/#/the-internet/api). Now that we know what we are doing, let's learn how to do it! 21 | 22 | There are many ways to request data from an API, initially everything was done using [XMLHttpRequest](https://developer.mozilla.org/nl/docs/Web/API/XMLHttpRequest), but that is now hardly used anymore. It's good to know it exists and you will see it in some videos but it is not something to focus on. Then libraries like [Axios](https://github.com/axios/axios) were created to make it easier to use. These days all modern browsers, however, have a [Fetch API](https://study.hackyourfuture.net/#/the-internet/fetch) built in that makes it even easier to connect to API's from your frontend application. So for our curriculum we are only going to focus on the Fetch API and just mention the other ways so that you know what people are talking about when you hear that term. 23 | 24 | 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. 25 | 26 | 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. 27 | 28 | ## Career Training I (Your personal brand) 29 | 30 | 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). 31 | 32 | ### Career Training I: Planning 33 | 34 | 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: 35 | - Read the whole [personal brand repository](https://github.com/HackYourFuture/yourpersonalbrand). 36 | - Done the [assignment](https://github.com/HackYourFuture/yourpersonalbrand/blob/main/yourcurriculum.md#4-submitting-your-cv-to-the-hyf-team) for the repository. 37 | -------------------------------------------------------------------------------- /Week2/prep-exercises/1-catwalk-async-await/README.md: -------------------------------------------------------------------------------- 1 | # Prep exercise - Cat walk with async/await 2 | 3 | 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. 4 | 5 | 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. 6 | 7 | ## Things to think about 8 | 9 | - Do you feel this version is easier to read than the version you made in the previous week? 10 | - Is this version more efficient or not or is there no difference? 11 | - 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? -------------------------------------------------------------------------------- /Week2/prep-exercises/1-catwalk-async-await/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Cat Walk 7 | 12 | 13 | 14 | Cat walking 18 | 19 | 20 | -------------------------------------------------------------------------------- /Week2/prep-exercises/1-catwalk-async-await/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const STEP_INTERVAL_MS = 50; 4 | const STEP_SIZE_PX = 10; 5 | const DANCE_TIME_MS = 5000; 6 | const DANCING_CAT_URL = 7 | 'https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif'; 8 | 9 | function walk(img, startPos, stopPos) { 10 | return new Promise((resolve) => { 11 | // Copy over the implementation from last week 12 | }); 13 | } 14 | 15 | function dance(img) { 16 | return new Promise((resolve) => { 17 | // Copy over the implementation from last week 18 | }); 19 | } 20 | 21 | async function catWalk() { 22 | const img = document.querySelector('img'); 23 | const startPos = -img.width; 24 | const centerPos = (window.innerWidth - img.width) / 2; 25 | const stopPos = window.innerWidth; 26 | 27 | // Use async/await syntax to loop the walk and dance functions 28 | } 29 | 30 | window.addEventListener('load', catWalk); -------------------------------------------------------------------------------- /Week2/prep-exercises/2-pokemon-fetch/README.md: -------------------------------------------------------------------------------- 1 | # Prep exercise - Error handling 2 | 3 | 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. 4 | 5 | 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. 6 | 7 | The expected behaviour is as follows: 8 | 9 | - 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. 10 | - When you press the button with the checkbox **checked** an HTTP error message will be rendered on the page. 11 | ## Things to think about 12 | 13 | - 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? 14 | - 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? 15 | - 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? -------------------------------------------------------------------------------- /Week2/prep-exercises/2-pokemon-fetch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | 12 | 13 | 14 |
15 |
16 | 

17 |       

18 |     

19 |     
20 |   
21 | 


--------------------------------------------------------------------------------
/Week2/prep-exercises/2-pokemon-fetch/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | /*------------------------------------------------------------------------------
 3 |  * In this exercise you will practice fetching data from a web API, using
 4 |  * `fetch`, promises, async/await and try/catch.
 5 |  *
 6 |  * Your solution should both work for the "happy" path (using VALID_URL) as
 7 |  * well handle the error in the "unhappy" path (when selecting INVALID_URL).
 8 |  *
 9 |  * You will need to decide which functions need to be made `async` and where
10 |  * `try/catch` blocks should be added.
11 |  *
12 |  * The HTML file already contains the necessary HTML elements.
13 |  *----------------------------------------------------------------------------*/
14 | 
15 | const VALID_URL = 'https://pokeapi.co/api/v2/pokemon/?limit=5';
16 | const INVALID_URL = 'https://pokeapi.co/api/v2/pokemons/?limit=5';
17 | 
18 | async function fetchJSON(url) {
19 |   // TODO
20 | 
21 |   // Fetch the JSON data from the web API that responds to the `url` parameter
22 |   // and return a promise that resolves to a corresponding JavaScript object.
23 |   // Make sure to check for HTTP errors.
24 | }
25 | 
26 | function renderResults(pokemons) {
27 |   // 1. Clear the text content of the HTML element with id `error`.
28 |   const errorElement = document.querySelector('#error');
29 |   errorElement.innerText = '';
30 | 
31 |   // 2. Set the text content of the HTML element with id `json` to JSON text
32 |   //    from the `pokemons` argument, formatted in a human readable form (i.e.,
33 |   //    with indentation and line breaks).
34 |   const pokemonsElement = document.querySelector('#json');
35 |   pokemonsElement.innerText = JSON.stringify(pokemons, null, 2);
36 | }
37 | 
38 | function renderError(err) {
39 |   // 1. Clear the text content of the HTML element with id `json`.
40 |   const pokemonsElement = document.querySelector('#json');
41 |   pokemonsElement.innerText = '';
42 | 
43 |   // 2. Set the text content of the HTML element with id `error` to the
44 |   //    `.message` property of the `err` parameter.
45 |   const errorElement = document.querySelector('#error');
46 |   errorElement.innerText = err;
47 | }
48 | 
49 | function main() {
50 |   const button = document.querySelector('#button');
51 |   button.addEventListener('click', () => {
52 |     const option = document.querySelector('#option');
53 |     const url = option.checked ? INVALID_URL : VALID_URL;
54 | 
55 |     // TODO
56 |     // Use `fetchJSON()` to fetch data from the selected url.
57 |     // If successful, render the data by calling function `renderResults()`.
58 |     // On failure, render the error by calling function `renderError()`.
59 |   });
60 | }
61 | 
62 | window.addEventListener('load', main);


--------------------------------------------------------------------------------
/Week3/README.md:
--------------------------------------------------------------------------------
 1 | # Week 3
 2 | 
 3 | In the final week of the Using API's module you will put everything you have learned to good use and build your own single page application that is connected to an API! What you build is totally up to you. Maybe you already had an idea in your head for a while, or maybe you will get inspired by all the open API's that are available.
 4 | 
 5 | This is quite a big undertaking, so you will have a mentor assigned to you to assist you in the project. Feel free to ask them for help if you are stuck or unsure, but they have been instructed to not write any code for you :).
 6 | 
 7 | ## Project requirements
 8 | We want you to get excited and be free to build something you are passionate about, but there are some things that we need to see you have mastered. This means there are a few requirements:
 9 | 
10 | - The app needs to be responsive.
11 | - The app needs to be a single page application. That means there should be only one `index.html` file and JavaScript needs to update the HTML using DOM manipulation.
12 | - The app needs to interact with an API to grab data.
13 | - The app needs to have loading/error handling for the interaction with the API and needs to show this to the user, not just a `console.log`.
14 | - The app needs some user interaction such that you need to grab different data from the API. So you cannot just grab everything from the API and store it locally with one fetch.
15 | - You are *not* allowed to do a code-along or tutorial for this project, the goal is for you to build something yourself!
16 | - Follow the [guidelines for technical assignments](https://github.com/HackYourFuture/ta_guidelines) to already practice making these for later. This will also help you not get stuck or end up with only half an application and make sure that what you have at the end is something presentable.
17 | 
18 | ## Ideas
19 | There are many APIs that are open to get data from, have a look at the following lists to see if there is a topic that interests you:
20 | 
21 | - [publicapi.dev](https://publicapi.dev)
22 | - [public API repo](https://github.com/public-apis/public-apis)
23 | - [API list](https://apilist.fun/)
24 | - [Public APIs](https://publicapis.io/)
25 | - [RapidAPI](https://rapidapi.com/hub)
26 | 
27 | When looking to see if an API is suitable for you there are a couple of questions to check:
28 | 1. Is the API rated, and if so how?
29 | 
30 | `Rated` in an API context means how many requests you can do. It could be rated in time (how many requests you can make per second), or in total requests. Avoid those that have a total requests rate. Generally these apps will not make many requests a second so that is not a problem. If you don't need an API key then you are generally safe.
31 | If you are unsure, contact your project mentor.
32 | 
33 | 2. Is the data available that I want?
34 | 
35 | Have a look through the end points (there is documentation for every API) and check how the endpoints are structured. What data is available and will you be able to get what you need? You can even already query it a bit with `Postman` to try some things out.
36 | 
37 | 3. Does the API support CORS?
38 | 
39 | CORS stands for Cross-Origin Resource Sharing and can be a problem when interacting with an API. In some of the lists above you can see or filter on if it is supported and you should be fine. The best way to check this is to try to do a request of the API via a fetch command in the browser as you have learned last week. Then you know for sure it works as expected!
40 | For more information about CORS have a look at the [MDN article](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)
41 | 
42 | If you really are stuck and have no inspiration, have a chat with your project mentor and talk it through together to come up with something.
43 | 
44 | ## Tip: Get a JSON viewer extension for Chrome
45 | Something like [this extension](https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh) will make it easier to work with an API. If your request returns JSON, which the API's do, it will format it nicely in your browsers so that you can easily navigate what the API is giving you.
46 | 
47 | ## Final product
48 | The final product (the repository is the product, not just the application) should be something that you can show off on your CV. So have a look at our technical assignment guidelines [here](https://github.com/HackYourFuture/ta_guidelines) and our design guidelines [here](https://github.com/HackYourFuture/design_guidelines) to see what it entails. By following those guidelines your app _and_ your code will look great, making it a great thing to show off to employers. You will also get into the habit of doing this with all the technical assignments you will get during your job search.
49 | 
50 | ## Planning and deadlines
51 | There are only two deadlines for the project; how you divide your time for the rest is up to you.
52 | 
53 | ### Deadline 1: Project definition
54 | By *Thursday 18:00PM CET* (but the earlier the better) you should send a short description of what your app will be as well as the name of the company whose brand/colour palette you will be mimicking to your project mentor.
55 | 
56 | The description should make it clear that your application will adhere to the requirements. It is best to divide it into `must have` parts (that fulfil the requirements and will be built first) and `nice to have` parts (features you can add on later to make your app cooler). The reason to make this division is to make sure that you will also prioritise your work correctly. You will probably run into time issues at the end, and it is possible to cut out extra features, but not the `must have`'s. A week is not a lot for building an application and in the end we will only be able to evaluate based on what is working.
57 | 
58 | The company brand/colour palette will help you design something that looks good, as explained in our [design guidelines](https://github.com/HackYourFuture/design_guidelines).
59 | 
60 | ### Deadline 2: Application
61 | By *Tuesday 23:59PM CET* you should send a link to your github project to the Education Director. Make sure that everything works for them! The best way to test this is to clone your repository to a new directory on your computer and try to run it there.
62 | 
63 | ## Grading
64 | After finishing the project you will get another technical interview about your own project to determine if you can go on to the next module. This technical interview is similar to what you had in the [Browsers module](https://github.com/HackYourFuture/Browsers/blob/main/PROJECT.md#the-interview), except that instead of explaining how to implement a feature you will be given some JavaScript code and asked some questions about it. Keep an eye on your class channel to see when these will be.
65 | 
66 | _Note: The difficulty of the application affects the grading in two ways:_
67 | - You get extra points for creating a difficult application (things like multiple pages, using multiple data sources, having many features, etc)
68 | - We will expect simpler applications to have better structured code and will be more lenient on more complex applications
69 | 
70 | _Note: following the technical assignment guidelines will also be a part of the grading_
71 | - Make sure you have read the [design guidelines](https://github.com/HackYourFuture/design_guidelines) and that your app design follows these guidelines
72 | - Make sure you have read the [technical assignment guidelines](https://github.com/HackYourFuture/ta_guidelines) and that your code and README follows these guidelines
73 | 
74 | ## Final remarks
75 | As you are all working on the projects this week there will not be a Q&A session on Sunday.
76 | 
77 | Enjoy getting practical!
78 | 


--------------------------------------------------------------------------------
/Week3/assets/hyf-github-error.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HackYourFuture/UsingAPIs/decde37d0beacc7a12cb1484cf4e0da6022763d1/Week3/assets/hyf-github-error.png


--------------------------------------------------------------------------------
/Week3/assets/hyf-github.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HackYourFuture/UsingAPIs/decde37d0beacc7a12cb1484cf4e0da6022763d1/Week3/assets/hyf-github.png


--------------------------------------------------------------------------------
/Week3/assets/week2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HackYourFuture/UsingAPIs/decde37d0beacc7a12cb1484cf4e0da6022763d1/Week3/assets/week2.png


--------------------------------------------------------------------------------
/assets/API.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HackYourFuture/UsingAPIs/decde37d0beacc7a12cb1484cf4e0da6022763d1/assets/API.png


--------------------------------------------------------------------------------
/assets/OOP.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HackYourFuture/UsingAPIs/decde37d0beacc7a12cb1484cf4e0da6022763d1/assets/OOP.png


--------------------------------------------------------------------------------
/assets/homework-submission.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HackYourFuture/UsingAPIs/decde37d0beacc7a12cb1484cf4e0da6022763d1/assets/homework-submission.png


--------------------------------------------------------------------------------
/assets/pokemon-app.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HackYourFuture/UsingAPIs/decde37d0beacc7a12cb1484cf4e0da6022763d1/assets/pokemon-app.gif


--------------------------------------------------------------------------------
/assets/stasel.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HackYourFuture/UsingAPIs/decde37d0beacc7a12cb1484cf4e0da6022763d1/assets/stasel.png


--------------------------------------------------------------------------------
/assets/submit-homework.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HackYourFuture/UsingAPIs/decde37d0beacc7a12cb1484cf4e0da6022763d1/assets/submit-homework.png


--------------------------------------------------------------------------------
/assets/trivia-app.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HackYourFuture/UsingAPIs/decde37d0beacc7a12cb1484cf4e0da6022763d1/assets/trivia-app.gif


--------------------------------------------------------------------------------
/assets/usingapis.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HackYourFuture/UsingAPIs/decde37d0beacc7a12cb1484cf4e0da6022763d1/assets/usingapis.png


--------------------------------------------------------------------------------
/assets/weekflow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HackYourFuture/UsingAPIs/decde37d0beacc7a12cb1484cf4e0da6022763d1/assets/weekflow.png


--------------------------------------------------------------------------------
/hackyourrepo-app/hyf.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HackYourFuture/UsingAPIs/decde37d0beacc7a12cb1484cf4e0da6022763d1/hackyourrepo-app/hyf.png


--------------------------------------------------------------------------------
/hackyourrepo-app/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |     
 5 |     
 9 |     
10 |     
11 |     
12 |     
13 |     
14 |     
15 |     HackYourRepo
16 |     
20 |     
21 |   
22 |   
23 |     
24 |   
25 | 
26 | 


--------------------------------------------------------------------------------
/hackyourrepo-app/project.md:
--------------------------------------------------------------------------------
  1 | # Project
  2 | 
  3 | build a portfolio using the GitHub API and host it as your home page with GitHub Pages, you will need to create a repo called `your-user-name.github.io`
  4 | 
  5 | ---
  6 | 
  7 | > copied from Be async module, there is less detail in the BE prompt than the AMS because students have already learned to plan and structure their projects so it's expected they will come up with their own plan
  8 | 
  9 | You've made it this far, time to show off a bit! Build yourself a sick portfolio to showcase all of your work so far. Using the [GitHub API](https://docs.github.com/en/free-pro-team@latest/rest) gather stats, links and collaborators to showcase your best work. Here is a [helpful tutorial](https://www.youtube.com/watch?v=5QlE6o-iYcE) to get you rolling (hint: avoid pushing your GitHub auth token!).
 10 | 
 11 | ### Checklist
 12 | 
 13 | ```md
 14 | - [ ] [repo](https://github.com/_/_.github.io) (with a complete README)
 15 | - [ ] [live demo](https://_.github.io)
 16 | - Project Planning
 17 |   - [ ] [Backlog](https://github.com/_/_/tree/master/project-planning/backlog.md)
 18 |   - [ ] [Development Strategy](https://github.com/_/_/tree/master/project-planning/development-strategy.md)
 19 |   - [ ] [Project board](https://github.com/_/_/projects/_)
 20 | - Implementation
 21 |   - [ ] ES Modules (`import`/`export`)
 22 |   - [ ] at least one `class`
 23 |   - [ ] at least one call to the GitHub API
 24 |   - [ ] Logs of each user interaction
 25 | ```
 26 | 
 27 | Looking for an extra challenge? Try to implement these concepts:
 28 | 
 29 | - [learn-component-architecture](https://github.com/oliverjam/learn-component-architecture)
 30 | - [client-side-routing](https://github.com/oliverjam/learn-client-side-routing)
 31 | 
 32 | ---
 33 | 
 34 | > from AMS JS3 module
 35 | 
 36 | ## **4. PROJECT: Hack Your Repo I**
 37 | 
 38 | In the following three weeks you are going to write an application that makes use of the [GitHub API](https://developer.github.com/v3/guides/getting-started/). Each week builds on top of the other, just like a real-world application!
 39 | 
 40 | [![UI Example](./assets/hyf-github.png)](https://js3-spa.herokuapp.com/)
 41 | Click on the image to open up the demo of the application!
 42 | 
 43 | This application, HackYourRepo, does 2 things:
 44 | 
 45 | 1. It makes connection to the GitHub API and retrieves all the repositories found in the [HackYourFuture account](https://www.github.com/hackyourfuture).
 46 | 2. It displays those repositories in an alphabetically-ordered list. When a user clicks on any of the repository names it will show more details about it.
 47 | 
 48 | In the course of the next 3 weeks you'll be writing the necessary code to make all of this work!
 49 | 
 50 | ### 4.1 Requirements
 51 | 
 52 | To get started, make sure you're in the right GIT branch: `week1-[YOURNAME]`. Then, navigate to the `hackyourrepo-app` folder and become familiar with the files there.
 53 | 
 54 | This week you're required to (1) setup the HTML structure of the application. In addition, you are expected to (2) style the application to make it user-friendly.
 55 | 
 56 | Here are the requirements for the HTML:
 57 | 
 58 | - Include 3 `
` tags
 59 | - Include a `