diff --git a/README.md b/README.md index beb0707f..15240d02 100644 --- a/README.md +++ b/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? diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index 4a1a1611..cb8cac16 100644 --- a/Week1/MAKEME.md +++ b/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? diff --git a/Week1/README.md b/Week1/README.md index b504e55b..4a45c1f5 100644 --- a/Week1/README.md +++ b/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). diff --git a/Week1/prep-exercises/1-catwalk-promises/README.md b/Week1/prep-exercises/1-catwalk-promises/README.md index cb3063c2..ffc2b8c8 100644 --- a/Week1/prep-exercises/1-catwalk-promises/README.md +++ b/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 diff --git a/Week1/prep-exercises/1-catwalk-promises/index.js b/Week1/prep-exercises/1-catwalk-promises/index.js index dc07a9fe..58713500 100644 --- a/Week1/prep-exercises/1-catwalk-promises/index.js +++ b/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); \ No newline at end of file +window.addEventListener('load', catWalk); diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index d11ca9f6..b5222824 100644 --- a/Week2/MAKEME.md +++ b/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! diff --git a/Week2/README.md b/Week2/README.md index 5c54dfaf..a05fd1c4 100644 --- a/Week2/README.md +++ b/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. diff --git a/Week2/prep-exercises/1-catwalk-async-await/index.js b/Week2/prep-exercises/1-catwalk-async-await/index.js index 9fd9f774..51298c01 100644 --- a/Week2/prep-exercises/1-catwalk-async-await/index.js +++ b/Week2/prep-exercises/1-catwalk-async-await/index.js @@ -3,18 +3,36 @@ const STEP_INTERVAL_MS = 50; const STEP_SIZE_PX = 10; const DANCE_TIME_MS = 5000; +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) => { - // Copy over the implementation from last week + 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) => { - // Copy over the implementation from last week + img.src = DANCING_CAT_URL; + setTimeout(() => { + img.src = WALKING_CAT_URL; + resolve(); + }, DANCE_TIME_MS); }); } @@ -23,8 +41,11 @@ async function catWalk() { 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 + + while (true) { + await walk(img, startPos, centerPos); + await dance(img); + await walk(img, centerPos, stopPos); + } } - window.addEventListener('load', catWalk); \ 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 index f6be006c..d600aeb6 100644 --- a/Week2/prep-exercises/2-pokemon-fetch/index.js +++ b/Week2/prep-exercises/2-pokemon-fetch/index.js @@ -16,11 +16,13 @@ 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. + + const response = await fetch(url); + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + return response.json(); } function renderResults(pokemons) { @@ -48,15 +50,17 @@ function renderError(err) { function main() { const button = document.querySelector('#button'); - button.addEventListener('click', () => { + button.addEventListener('click', async () => { 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()`. + try { + const pokemons = await fetchJSON(url); + renderResults(pokemons); + } catch (err) { + renderError(err); + } }); } -window.addEventListener('load', main); \ No newline at end of file +window.addEventListener('load', main); diff --git a/Week3/README.md b/Week3/README.md index 356fcf3a..43b63a04 100644 --- a/Week3/README.md +++ b/Week3/README.md @@ -2,24 +2,27 @@ 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. -This is quite a big undertaking, so during the project one of the mentors for this module will be assigned to you. 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 :). +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 :). ## Project requirements 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: -- The app needs to be a single page application. That means only one `index.html` file and JavaScript needs to update the html using DOM manipulation. +- The app needs to be responsive. +- 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. - The app needs to interact with an API to grab data. -- The app needs to have loading/error handling for the interaction with the API. +- 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`. - 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. -- Follow the [guidelines for technical assignments](https://github.com/HackYourFuture/ta_guidelines). This will 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. +- You are *not* allowed to do a code-along or tutorial for this project, the goal is for you to build something yourself! +- 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. ## Ideas 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: - [publicapi.dev](https://publicapi.dev) -- [public api repo](https://github.com/public-apis/public-apis) +- [public API repo](https://github.com/public-apis/public-apis) - [API list](https://apilist.fun/) -- [Public APIs](https://public-apis.io/) +- [Public APIs](https://publicapis.io/) +- [RapidAPI](https://rapidapi.com/hub) When looking to see if an API is suitable for you there are a couple of questions to check: 1. Is the API rated, and if so how? @@ -38,11 +41,14 @@ For more information about CORS have a look at the [MDN article](https://develop 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. +## Tip: Get a JSON viewer extension for Chrome +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. + ## Final product -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. +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. ## Planning and deadlines -There are only 2 deadlines in the project, how you divide your time for the rest is up to you. +There are only two deadlines for the project; how you divide your time for the rest is up to you. ### Deadline 1: Project definition 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. @@ -66,6 +72,6 @@ _Note: following the technical assignment guidelines will also be a part of the - Make sure you have read the [technical assignment guidelines](https://github.com/HackYourFuture/ta_guidelines) and that your code and README follows these guidelines ## Final remarks -Enjoy the project! - +As you are all working on the projects this week there will not be a Q&A session on Sunday. +Enjoy getting practical! diff --git a/assets/usingapis.png b/assets/usingapis.png index 7fc585c5..ff8bb1ad 100644 Binary files a/assets/usingapis.png and b/assets/usingapis.png differ diff --git a/hand-in-assignments-guide.md b/hand-in-assignments-guide.md new file mode 100644 index 00000000..45b251df --- /dev/null +++ b/hand-in-assignments-guide.md @@ -0,0 +1,35 @@ +# How to hand in assignments + +In this module you'll submit your assignments only using GIT and GitHub. + +1. [GitHub](https://www.github.com/HackYourFuture/UsingAPIs) + +## 1. GitHub assignments guide + +HYF Video + +Watch the video (by clicking the image) or go through the following walk-through to learn how to submit your assignments: + +ONE TIME ONLY (START OF EVERY MODULE) + +This module is slightly different as you have already done the one time setup for the assignments repo in the previous module. We will be using the same fork as we used there (`https://www.github.com/HackYourAssignment/Assignments-classXX`). + +EVERY WEEK + +1. Do a `git pull` on your main branch to get the latest version. +2. Create a new branch for each week you have assignments. For example, for the week 1 assignments for Using API's create a branch called `YOUR_NAME-w1-UsingAPIs`. Don't forget to checkout this branch after creating it. +3. Make your assignments! +4. Once you're finished, add your assignments to a commit. There will be some test and config files added by the test runner, this is expected and should be added! +5. Create the commit (`git commit`). Make the commit message meaningful, for example `finished project for assignments week1`. +6. Push the branch to your forked repository +7. On the GitHub page of your forked repository, click on the `create pull request` button. Make sure the `base repository` is your teacher's repository, on branch master +8. Give the pull request a title in the following format: + +```markdown +Assignments week 1 +``` + +9. Submit the pull request from your forked repository branch into the `main` branch + +If you have any questions or if something is not entirely clear ¯\\\_(ツ)\_/¯, please ask/comment on Slack! + diff --git a/homework-handin-guide.md b/homework-handin-guide.md deleted file mode 100644 index 95f83868..00000000 --- a/homework-handin-guide.md +++ /dev/null @@ -1,35 +0,0 @@ -# How to hand in homework - -In this module you'll submit your homework only using GIT and GitHub. - -1. [GitHub](https://www.github.com/HackYourFuture/UsingAPIs) - -## 1. GitHub homework guide - -HYF Video - -Watch the video (by clicking the image) or go through the following walk-through to learn how to submit your homework: - -ONE TIME ONLY (START OF EVERY MODULE) - -This module is slightly different as you have already done the one time setup for the homework repo in the previous module. We will be using the same fork as we used there (`https://www.github.com/HackYourHomework/Homework-classXX`). - -EVERY WEEK - -1. Do a `git pull` on your main branch to get the latest version. -2. Create a new branch for each week you have homework. For example, for the week 1 homework for Using API's create a branch called `YOUR_NAME-w1-UsingAPIs`. Don't forget to checkout this branch after creating it. -3. Make your homework! -4. Once you're finished, add your homework to a commit. There will be some test and config files added by the test runner, this is expected and should be added! -5. Create the commit (`git commit`). Make the commit message meaningful, for example `finished project for homework week1`. -6. Push the branch to your forked repository -7. On the GitHub page of your forked repository, click on the `create pull request` button. Make sure the `base repository` is your teacher's repository, on branch master -8. Give the pull request a title in the following format: - -```markdown -Homework week 1 -``` - -9. Submit the pull request from your forked repository branch into the `main` branch - -If you have any questions or if something is not entirely clear ¯\\\_(ツ)\_/¯, please ask/comment on Slack! - diff --git a/package.json b/package.json index 685329c3..bad9aaf5 100755 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "description": "Course content for the JavaScript3 module", "repository": "https://github.com/HackYourFuture/JavaScript3.git", "scripts": { - "lint": "eslint homework", + "lint": "eslint assignments", "test": "npm run lint" }, "author": "HackYourFuture",