From b437373e5404f09c2271cc1b005b70b8f544a428 Mon Sep 17 00:00:00 2001 From: Kelley van Evert Date: Sun, 26 Jan 2020 11:24:18 +0100 Subject: [PATCH 01/20] Fixing style guide intro text --- README.md | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 34103e174..80355b424 100644 --- a/README.md +++ b/README.md @@ -37,19 +37,17 @@ 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: +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 server. 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: - [Creating Your Company's Style Guide](https://www.youtube.com/watch?v=gv_wrrY70E0) -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. - -The styleguide we'll be using is the one from Airbnb: +Similarl 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: - [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: +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`: ```json "eslint" @@ -60,7 +58,7 @@ 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: +All you have to do now to prepare is to execute the following command in your command line: ```md npm install From b3462015b9707ce6dc6d84d6bc2bf2a6b0990e49 Mon Sep 17 00:00:00 2001 From: Noer Paanakker Date: Tue, 19 May 2020 09:52:57 +0200 Subject: [PATCH 02/20] adjusted content test readme --- test.md | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/test.md b/test.md index 1ef2d3b98..49ce67e2c 100644 --- a/test.md +++ b/test.md @@ -3,19 +3,25 @@ You’ll be doing a final JavaScript test. It will be about all the JavaScript you’ve learned, from JavaScript 1 to JavaScript 3. ## Practical information -- The test will start at **10.30 until 11.30**. The door will open at 10.15. **Be on time!** -- It will be done online and you can use google, so please bring your laptop. + +- The test will last **2 hours**. +- It will be done on the computer. - You can’t use your old code. -- There will be 5 or 6 questions. +- There will be 6 or 7 questions. ## Purpose of the test + The purpose of this exam is to test your comprehension of JavaScript + - The goal for us is to know how solid your knowledge is and if you need any extra assistance throughout the program. - The goal for you is to test how well enough you master the material so far. + Like the homework you will get feedback and are expected to improve upon your weak points. ## Test material + The test will be about all main JavaScript concepts we have discussed for the past weeks of JS. The following are the most important that will be tested: + - `Functions & Variables` - `Scope` - `Loops` @@ -28,7 +34,9 @@ The test will be about all main JavaScript concepts we have discussed for the pa - `Try…catch` ## Preparation + Advice on how to optimally prepare: + - Find out 2 things about each concepts listed above: (1) how does the basic structure look and (2) what is the most common use case. - Ask questions through Slack to your teachers and/or your classmates. - Practice for understanding (why something is the case), NOT just for repetition shake (and hoping ‘you will understand it one day’). @@ -36,14 +44,16 @@ Advice on how to optimally prepare: - After you prepared try to make the sample questions that are in this file. ## During the test + Advise on how to make a test: -- **Look for low hanging fruit**. Which of the assignments is easiest for you to do? Tackle that one first. + +- **Look for low hanging fruit**. Which of the assignments is easiest for you to do? Tackle that one first. - **When writing your code, write small chunks at a time, testing each time before continuing**. Use temporary console.log statements to show intermediate results (remove when no longer needed). Don't continue until the code written sofar is working correctly. If you write a whole bunch of code without intermediate testing it becomes difficult to pinpoint where issues occur. - **If you get stuck in an assignment, move on** to the next one. You can always come back later if time permits. - When writing code for the browser, **always open the Chrome Developer Tools**. Watch out for error messages in the browser console. Inspect the network tab to examine the data returned from a remote API. - **Don't over-deliver**. If styling is not required by the assignment, skip it. If time permits, you can do it later. The same goes for handling fetch errors. Focus on delivering a minimum working version that meets the requirement. Ticking off a working version again reduces your stress level. Come back later, if time permits, to embellish your solutions. - **Don't use Google as a replacement for common sense.** -- After finishing an assignment, read the question again to **make sure you actually gave an answer to the question.** +- After finishing an assignment, read the question again to **make sure you actually gave an answer to the question.** - Before handing in the test, read it all over again to **pick out the small mistakes.** ## Sample questions @@ -51,7 +61,6 @@ Advise on how to make a test: 1. Using JavaScript only (adding HTML to index.html is NOT allowed), create a button element (with text "click me!") and an empty image element and add it to the document. When the button is clicked, insert an image URL into the tag and remove the button. Use the following image URL: https://thehub.dk/files/5ad4b4a9f9ac4aa13c3d2d58/logo_upload-6d537cf7e5de664db275b32b3c6ae12d.png 2. Make an API call using the Fetch API or the regular XMLHttpRequest (whichever one you're more comfortable with). Use the following API: https://reqres.in/api/users -Parse the response and then display the "first_name" and "last_name" of the first three users within the DOM (inside an unordered list) + Parse the response and then display the "first_name" and "last_name" of the first three users within the DOM (inside an unordered list) If there’s anything unclear please let us know. Also, if any of you need additional support, now is the moment to let us know as we could pair you up with someone to answer any questions you may have. - From cb42b037fa74e1718079a9c23a16f6dec361ed3a Mon Sep 17 00:00:00 2001 From: Noer Paanakker Date: Thu, 4 Jun 2020 16:53:37 +0200 Subject: [PATCH 03/20] 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 `