diff --git a/.vscode/settings.json b/.vscode/settings.json index e14914b2e..183110862 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -12,5 +12,6 @@ "remarcmij", "tabindex", "whiteframe" - ] + ], + "deno.enable": false } diff --git a/README.md b/README.md index 34103e174..55310b364 100644 --- a/README.md +++ b/README.md @@ -1,80 +1,123 @@ -> Please help us improve and share your feedback! If you find better tutorials -> or links, please share them by [opening a pull request](https://github.com/HackYourFuture/JavaScript3/pulls). +# DEPRECATED - JavaScript 3 +This module has been replace with the Using API's module, find it [here](https://github.com/HackYourFuture/UsingAPIs) -# Module #4 - JavaScript 3: Object-Oriented Programming and working with APIs (Frontend) +```Welcome to JavaScript3! Congratulations on making it this far. You're well on your way to the top! -![JavaScript3](./assets/javascript3.png) +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! -Welcome to JavaScript3! Congratulations on making it this far. You're well on your way to the top! +On top of that you'll also learn how to think differently about _how_ you write your programs. Like in any field, once you've mastered a particular way of doing things you start thinking about how it could be done in a smarter, different way. In programming we call these `paradigms` and in this module you'll learn one such paradigm: Object-Oriented Programming! -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! +## Before you start + +In the following weeks we will be using a "style guide" to help you write _"clean code"_. Because code is not only meant to be run by computers, but also to be read by humans (your colleagues, and the future version of you), it's best to make your code good. If your code is readable and nicely formatted, you're doing your colleages (and future you) a great service. The idea of a "style guide" comes from visual design, where companies often have a "visual style". For example, watch the following video to get an idea of this: + +### Setup Style Guide + +Similar to how designers have style guides for their design work, programmers often have "programming style guides". This is set of rules to follow when writing/formatting your code. The styleguide we'll be using is the one from Airbnb: + +- [Front-end Style Guides](https://fronteers.nl/congres/2015/sessions/front-end-style-guides-anna-debenham) + +The style guide we'll be using is the one from Airbnb: + +- [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript) + +While you do not need to read this guide in detail, it is recommended that you look at sections 1-8, 12-13, 15-21 and 23. + +We also have tools that can automatically check whether your code is correctly formatted according to a style guide. These tools are called "linters". We will be using the JavaScript linter called "ESLint". The following packages are already added to this repository's `package.json`: + +The required packages you need to install before you write code according to the style guide are the following: + +`json +"eslint" +"eslint-config-airbnb-base" +"eslint-config-prettier" +"eslint-plugin-import" +"eslint-plugin-prettier" +"prettier" +` -On top of that you'll also learn how to think differently about how you write your programs. Like in any field, once you've mastered a particular way of doing things you start thinking about how it could be done differently. In programming we call these `paradigms` and in this module you'll learn one such paradigm: Object-Oriented Programming! +They are already in this repository's `package.json` so all you have to do now to prepare is to execute the following command at the root of this module directory: + +`md +npm install +` + +### Forking the right repository + +Before you start with the homework, make sure you've made a fork of the right repository: [HackYourHomework/JavaScript3](https://www.github.com/hackyourhomework/javascript3)). Once you've cloned it to your computer you can proceed by making GIT branches for each week. Start at the `master` branch and execute the following (note that they're 3 different commands): + +`bash +foo@bar:~$ git branch week1-YOURNAME +foo@bar:~$ git branch week2-YOURNAME +foo@bar:~$ git branch week3-YOURNAME +` + +Then execute `git checkout week1-YOURNAME` and you can get started! + +If you have any questions or if something is not entirely clear ¯\_(ツ)\_/¯, please ask/comment on Slack! ## Learning goals In order to successfully complete this module you will need to master the following: -- Learn what an API is -- Catch up on the history of JavaScript -- Understand how to write more readable asynchronous JavaScript -- Connect with different public APIs -- Build a Single Page Application (SPA) +- Learn what an `Application Programming Interface` (API) is +- Catch up on the `history of JavaScript` +- Understand how to write more readable `asynchronous JavaScript` +- Connect with different `public APIs` +- Build a `Single Page Application` (SPA) - Work with pre-existing code -- Learn about Object-Oriented Programming +- Learn about `Object-Oriented Programming` ## How to use this repository -This repository consists of 3 essential parts: +### Repository content -1. `Reading materials`: this document contains all the required theory you need to know _**while**_ you're coding. It's meant as both study material and as a reference to understand what you're doing. -2. `Homework`: this document contains the instructions for each week's homework. -3. `Lesson Plans`: this part is meant for teachers as a reference. However, as a student don't be shy to take a look at it as well! - -After your first class you should start off with checking the `reading materials` for that week. At the beginning that would be the [Week 1 Reading](/Week1/README.md). Study all the concepts and try to get the gist of everything. After, you can get started with the `homework` for that week. +This repository consists of 3 essential parts: -If you have any questions or if something is not entirely clear ¯\\\_(ツ)\_/¯, please ask/comment on Slack! +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. +3. `LESSONPLAN`: this document is meant for teachers as a reference. However, as a student don't be shy to take a look at it as well! -## Before you start +### How to study -In the following weeks we will be using a `styleguide` to help you write _"clean code"_. What is a styleguide? Simply put, it's a set of design standards put in one collection. Companies create and use them to define their public identity (their "brand"). Watch the following to get a better idea: +Let's say you are just starting out with the JavaScript3 module. This is what you do... -- [Creating Your Company's Style Guide](https://www.youtube.com/watch?v=gv_wrrY70E0) +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 `JavaScript3`, 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 `JavaScript3`, that would be [Week1 Homework](/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 +9. Start the new week by going back to point 1! -A styleguide is made by designers. In the case of website design, this styleguide is then handed over to developers to use when styling the frontend. +In summary: -The styleguide we'll be using is the one from Airbnb: +![Weekflow](assets/weekflow.png) -- [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript) +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! -While you do not need to read this guide in detail, it is recommended that you look at sections 1-8, 12-13, 15-21 and 23. +### Video lectures -The required packages you need to install in order to write code according to the styleguide are the following: +For each module HackYourFuture provides you with video lectures. These are made by experienced software developers who know what they're talking about. The main teacher for this module will be [Stasel Seldin](https://hackyourfuture.slack.com/team/UQJGC1MSL): senior iOS developer! -```json -"eslint" -"eslint-config-airbnb-base" -"eslint-config-prettier" -"eslint-plugin-import" -"eslint-plugin-prettier" -"prettier" -``` +You can find out more about him here: -They are already in this repository's `package.json` so all you have to do now to prepare is to execute the following command in your command line: +- [GitHub](https://github.com/Stasel) +- [@Stasel on Slack](https://hackyourfuture.slack.com/team/UQJGC1MSL) -```md -npm install -``` +Learn from Stasel in the following playlist of videos he has made for you! (Click on the image to open the link) -With this out of the way we can get started! +HYF Video ## Planning | Week | Topic | Reading Materials | Homework | Lesson Plan | | ---- | ------------------------------------------------------------------------------------------- | ------------------------------ | ------------------------------- | -------------------------------------- | | 1. | Application Programming Interface (API), AJAX, Modules & Libraries | [Reading W1](/Week1/README.md) | [Homework W1](/Week1/MAKEME.md) | [Lesson Plan W1](/Week1/LESSONPLAN.md) | -| 2. | Promises, Fetch API, JavaScript Versions, 'this' keyword, Arrow functions | [Reading W2](/Week2/README.md) | [Homework W2](/Week2/MAKEME.md) | [Lesson Plan W1](/Week1/LESSONPLAN.md) | -| 3. | Object-Oriented Programming (OOP), ES6 Classes, Async/await, Thinking like a programmer III | [Reading W3](/Week3/README.md) | [Homework W3](/Week3/MAKEME.md) | [Lesson Plan W1](/Week1/LESSONPLAN.md) | +| 2. | Promises, Fetch API, JavaScript Versions, 'this' keyword, Arrow functions | [Reading W2](/Week2/README.md) | [Homework W2](/Week2/MAKEME.md) | [Lesson Plan W1](/Week2/LESSONPLAN.md) | +| 3. | Object-Oriented Programming (OOP), ES6 Classes, Async/await, Thinking like a programmer III | [Reading W3](/Week3/README.md) | [Homework W3](/Week3/MAKEME.md) | [Lesson Plan W1](/Week3/LESSONPLAN.md) | | 4. | Final JavaScript Test | [Details](test.md) | - | - | ## Finished? @@ -85,4 +128,4 @@ If you feel ready for the next challenge, click [here](https://www.github.com/Ha _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 :)_ -Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. +Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License.``` diff --git a/Week1/LESSONPLAN.md b/Week1/LESSONPLAN.md index e69de29bb..a0d1c8f0e 100644 --- a/Week1/LESSONPLAN.md +++ b/Week1/LESSONPLAN.md @@ -0,0 +1,141 @@ +# Lesson Plan JavaScript3 Week 1 + +## Agenda + +The purpose of this class is to introduce to the student: + +- What are `APIs` and how to interact with them +- What is `AJAX` and how to apply it (`XMLHttpRequest`) +- How to use libraries (`axios`) + +## Core concepts + +FIRST HALF (12.00 - 13.30) + +## 1. What are APIs and how to interact with them + +### Explanation +- APIs are created by providers and used by consumers (BE provider, FE consumer) +- Part of an application that can be communicated with from an outside source +- Connect to it using "endpoints" +- Software well-known APIs (Fb APIs, Twitter APIs, Maps APIs, weather APIs); +- API doesn't care which language or technology is used in the consumer or the provider + +#### Types of APIs: +- Private: for employees only under a company network for internal use. +- Semi-private: for clients who paid for the API. +- Public: for everyone on the web. + +#### Architecture styles of API: +- Single purpose: API that gives a direct and specific service. +- Aggregated API: one API as a wrapper for multiple APIs. +- Web services API: punch of APIs working together to forma whole app. + +#### Basic structure of REST API + +- Endpoint: https://api.example.com +- Endpoint with version: https://api.example.com/v1 +- Resources: +* https://api.example.com/v1/users +* https://api.example.com/v1/users/create +* https://api.example.com/v1/users/1 +* https://api.example.com/v1/users/1/edit +- Query params: +* https://api.example.com/v1/users?limit=10 +### Example +- Give real life example like (Devices like TV, any machine + electricity power socket interface which provides power to any external device) + +### Excercise + +### Essence +- Mostly used to request data from some service +- Communication between software and user needs UI interface but software and software needs API as an interface. + +## 2. What is `AJAX` and how to apply it (`XMLHttpRequest`) + +### Explanation +- Before AJAX all page reload for all requests, via refreshing the url in the address bar with the new resource. +- It's a technique, not a technology +- `AJAX` stands for Asynchronous JavaScript and XML +- Nowadays we use `JSON` instead of `XML` +- Fetch data without reloading the page +- The XMLHttpRequest API is defined in the browser (window.XMLHttpRequest) +### Example +Example using the XMLHttpRequest + +```javascript +const oReq = new XMLHttpRequest(); +oReq.open('GET', `https://api.openweathermap.org/data/2.5/weather?q=${cityName}`); +oReq.send(); +oReq.addEventListener('load', function (event) { + const data = JSON.parse(this.response); + if (data.cod >= 400) { + // error + console.log(data.message); + } else { + //success + console.log(data.coord.lat); + } +}); + +// or another way of getting data +oReq.load = function (event) { + // use oReq.response or this.response + const data = JSON.parse(this.response); + if (data.cod >= 400) { + // error + console.log(data.message); + } else { + //success + console.log(data.coord.lat); + } +}; + +``` + +### Excercise + +Steps of doing the following example:- +** Install the live server plugin in VS (go to plugins -> live server -> install) +1. Create self-invoked function to wrap your code +2. Create an object instance of `XMLHttpRequest` +3. Call the `open` function to fill it with the Request URL and the request Method +4. Call the `send` function to make the request +5. Add event listener with a callback for the sucess event `load` + +### Essence + +SECOND HALF (14.00 - 16.00) + +## 3. How to use libraries (`axios`) + +### Explanation +- A library is a code solution a developer (or a team) has written to a common problem +- Usually open-source +- Helps to solve a problem within an application +- Read the documentation on how to use it +### Example +Same example but using axios +```javascript +axios + .get(`https://api.openweathermap.org/data/2.5/weather?q=${cityName}`) + .then(function (response) { + // handle success + console.log(response.data); + }).catch(function (error) { + // handle error + console.log(error); + }).finally(function () { + // always be executed + console.log('I am always here') + }); +``` + +> Note: Give example at the end with binding/showing these data in a DOM element like a
or a list instead of only showing them on the console using console.log. + +### Excercise +### Essence + + + + diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index b14adadd4..6f040f6bc 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -15,47 +15,49 @@ This week's concepts can be challenging, therefore let's get an easy introductio ## **2. JavaScript exercises** -> Inside of your `JavaScript3` fork and inside of the `Week1` folder, create a folder called `homework`. Inside of that folder, create a folder called `js-exercises`. For all the following exercises create a new `.js` file in that folder (3 files in total). Make sure the name of each file reflects its content: for example, the filename for exercise one could be placeKitten.js. +> Inside of your `JavaScript3` fork and inside of the `Week1` folder, create a folder called `homework`. Inside of that folder, create a folder called `js-exercises`. For all the following exercises create a new `.js` file in that folder (3 files in total). Make sure the name of each file reflects its content: for example, the filename for exercise one could be `getRandomUser.js`. -**Exercise 1: Place the kitten** +**Exercise 1: Who do we have here?** -Who doesn't love kittens on their screen? +Wouldn't it cool to make a new friend with just the click of a button? -Write an function that makes an API call to https://wwww.placekitten.com/api +Write a function that makes a HTTP Request to `https://www.randomuser.me/api` -- Inside the same file write two programs: one with `XMLHttpRequest`, and the other with `axios` -- Each function should make an API call to the given endpoint: `https://wwww.placekitten.com/api` +- Inside the JavaScript file write two functions: one with `XMLHttpRequest`, and the other with `axios` +- Each function should make a HTTP Request to the given endpoint: `https://www.randomuser.me/api` - Log the received data to the console -- Incorporate error handling +- Incorporate error handling: log to the console the error message -**Exercise 2: Who do we have here?** +**Exercise 2: Programmer humor** -Wouldn't it cool to make a new friend with just the click of a button? +Who knew programmers could be funny? -Write a function that makes an API call to https://www.randomuser.me/api +Write a function that makes a HTTP Request to `https://xkcd.now.sh/?comic=latest` -- Inside the same file write two functions: one with `XMLHttpRequest`, and the other with `axios` -- Each function should make an API call to the given endpoint: `https://www.randomuser.me/api` +- Inside the same file write two programs: one with `XMLHttpRequest`, and the other with `axios` +- Each function should make a HTTP Request to the given endpoint: `https://xkcd.now.sh/?comic=latest` - Log the received data to the console -- Incorporate error handling +- Render the `img` property into an `` tag in the DOM +- Incorporate error handling: log to the console the error message -**Exercise 3: Photo gallery** +**Exercise 3: Dog photo gallery** -Let's make a randomized photo gallery! +Let's make a randomized dog photo gallery! -Write a function that makes an API call to https://picsum.photos/400 +Write a function that makes a HTTP Request to `https://dog.ceo/api/breeds/image/random`. It should trigger after clicking a button in your webpage. Every time the button is clicked it should append a new dog image to the DOM. - Create an `index.html` file that will display your random image -- Write two programs: one with `XMLHttpRequest`, and the other with `axios` -- Each function should make an API call to the given endpoint: `https://picsum.photos/400` -- After receiving the data, render it to the page in a `` -- Incorporate error handling +- Add 2 `