From cb42b037fa74e1718079a9c23a16f6dec361ed3a Mon Sep 17 00:00:00 2001 From: Noer Paanakker Date: Thu, 4 Jun 2020 16:53:37 +0200 Subject: [PATCH 1/7] updated links/readings week 1 --- README.md | 41 +++++++++------ Week1/MAKEME.md | 26 +++++----- Week1/README.md | 89 +++++++++++++++++++++++---------- Week2/README.md | 28 +++++------ assets/API.png | Bin 0 -> 42325 bytes assets/homework-submission.png | Bin 0 -> 1058691 bytes hand-in-homework-guide.md | 4 +- test.md | 4 +- 8 files changed, 120 insertions(+), 72 deletions(-) create mode 100644 assets/API.png create mode 100644 assets/homework-submission.png diff --git a/README.md b/README.md index 536101727..98be18cdf 100644 --- a/README.md +++ b/README.md @@ -9,19 +9,19 @@ Welcome to JavaScript3! Congratulations on making it this far. You're well on yo 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! -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! +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! ## 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 @@ -37,19 +37,19 @@ If you have any questions or if something is not entirely clear ¯\\\_(ツ)\_/¯ ## Before you start -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: +### Setup Style Guide -- [Creating Your Company's Style Guide](https://www.youtube.com/watch?v=gv_wrrY70E0) +In the following weeks we will be using a front-end `style guide` to help you write _"clean code"_. What is a style guide? Simply put, it's a set of coding standards put into one collection. -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. +- [Front-end Style Guides](https://fronteers.nl/congres/2015/sessions/front-end-style-guides-anna-debenham) -The styleguide we'll be using is the one from Airbnb: +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. -The required packages you need to install in order to write code according to the styleguide are the following: +The required packages you need to install before you write code according to the style guide are the following: ```json "eslint" @@ -60,13 +60,26 @@ The required packages you need to install in order to write code according to th "prettier" ``` -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: +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 ``` -With this out of the way we can get started! +### 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` and you can get started! + +If you have any questions or if something is not entirely clear ¯\_(ツ)\_/¯, please ask/comment on Slack! + ## Planning diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index 9dfd4ce98..d17665390 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -15,49 +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: Who do we have here?** Wouldn't it cool to make a new friend with just the click of a button? -Write a function that makes an API call to `https://www.randomuser.me/api` +Write a function that makes a HTTP Request to `https://www.randomuser.me/api` -- 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 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: Programmer humor** Who knew programmers could be funny? -Write an function that makes an API call to `https://xkcd.now.sh/?comic=latest` +Write a function that makes a HTTP Request to `https://xkcd.now.sh/?comic=latest` - 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://xkcd.now.sh/?comic=latest` +- Each function should make a HTTP Request to the given endpoint: `https://xkcd.now.sh/?comic=latest` - Log the received data to the console - Render the `img` property into an `` tag in the DOM -- Incorporate error handling +- Incorporate error handling: log to the console the error message **Exercise 3: Dog photo gallery** Let's make a randomized dog photo gallery! -Write a function that makes an API call 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. +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 - Add 2 `