From 6040b1ae56be1e964478e77255acca40e2f27b94 Mon Sep 17 00:00:00 2001 From: Wilgert Velinga Date: Sun, 24 Nov 2019 10:32:21 +0100 Subject: [PATCH 01/19] add exercises to part 2 --- .gitignore | 1 + Week1/LESSONPLAN.md | 110 ++++++++++++++++++++++++++++++++------------ 2 files changed, 81 insertions(+), 30 deletions(-) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..723ef36f4 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.idea \ No newline at end of file diff --git a/Week1/LESSONPLAN.md b/Week1/LESSONPLAN.md index f8beb0910..c083baa28 100644 --- a/Week1/LESSONPLAN.md +++ b/Week1/LESSONPLAN.md @@ -13,13 +13,13 @@ The purpose of this class is to introduce to the student: ## Core concepts -*FIRST HALF (12.00 - 13.30)* +_FIRST HALF (12.00 - 13.30)_ ## 1. The 2 types of websites: static vs. dynamic ### Explanation -Static websites usually come with a fixed number of pages that have a specific layout. When the page runs on a browser, the content is literally static and doesn’t change in response to user actions. A static website is usually created with HTML and CSS +Static websites usually come with a fixed number of pages that have a specific layout. When the page runs on a browser, the content is literally static and doesn’t change in response to user actions. A static website is usually created with HTML and CSS Compared to static websites, which are purely informational, a dynamic website is more functional. It allows users to interact with the information that is listed on the page. Of course, that requires utilizing more than just HTML code. ### Example @@ -45,23 +45,31 @@ Discuss in class which claim belongs to which type of website: Feature of Content Management System. HTML, CSS, Javascript is used for developing the website. Same content is delivered everytime the page is loaded. - + +<<<<<<< HEAD + ### Essence +======= + +##### Essence + +> > > > > > > add exercises to part 2 + [In the link is an article with (dis)advantages of both static and dynamic websites.](https://www.spiderwriting.co.uk/static-dynamic.php) - - Static: + + Static: Advantage: - Flexible - Cheaper Disadvantages: - not updating content - Scalability - + Dynamic: Advantage: - - Easy to pull in data on stuctured and organised way - - Content management system + - Easy to pull in data on stuctured and organised way + - Content management system Disadvantage: - Design is more fixed, becasue the pages are more of a template - Costs @@ -104,9 +112,16 @@ It doesn't exhibit any dynamic behaviour like: 1. rendering complex animations 1. sending requests over network to servers and fetching a response 1. and this is where JavaScript steps in. - + <<<<<<< HEAD + ## 3. What are variables (const & let) & naming conventions +======= + +#### 3. What are variables (const & let) & naming conventions + +> > > > > > > add exercises to part 2 + ### Explanation In JavaScript, there are three ways of creating variables. @@ -127,6 +142,7 @@ Three different stages of working with variables are: - Variable assignment means throwing away the old value of a variable and replacing it with a new one. Initialization can be thought of as a special way of assignment. https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/variables.md + ### Example ```javascript @@ -169,12 +185,13 @@ console.log(lastName); ### Exercise 1. Create 2 variables using the `let` keyword - 1. make 1 variable contain your first name - 1. the second variable should have no value assigned - + + 1. make 1 variable contain your first name + 1. the second variable should have no value assigned + 1. Make 2 variables using the `const` keyword - 1. the first variable should contain the city you currently stay at - 1. come up with a value for the second variable yourself + 1. the first variable should contain the town/city you currently stay at + 1. come up with a value for the second variable yourself ### Essence @@ -184,14 +201,16 @@ For example, your name and age are simple pieces of information, a string and a Variables are simply named storage/pointer for this information. -*SECOND HALF (14.00 - 16.00)* +_SECOND HALF (14.00 - 16.00)_ ## 4. The basic data types (string, boolean, number, undefined, null) ### Explanation -Primitive data types are typically types that are built-in or basic to a language implementation. -There are 5 different types of data. The compiler/computer interpretates all the variables we make as one of those datatypes. +> > > > > > > add exercises to part 2 +> > > > > > > Primitive data types are typically types that are built-in or basic to a language implementation. + +There are 5 different types of data. The compiler/computer interprets all the variables we make as one of those datatypes. (https://javascript.info/types) Boolean — true or false @@ -200,40 +219,71 @@ Undefined — a declared variable but hasn’t been given a value Number — integers, floats, etc String — an array of characters i.e words ?? Symbol — a unique value that's not equal to any other value ?? + ### Example -* `string`, e.g. "HackYourFuture" -* `number`, e.g. 5, or 10.6 -* `boolean`, e.g. `true` or `false` -* `array`\*, e.g. `[1, 2, 3]` or `['what', 'is', 'your', 'name']` -* `null and undefined` The values `null` and `undefined` are very similar in JavaScript, but they behave a bit differently. The difference is that `null` always has type "object", and `undefined` always has type "undefined". -Whenever you declare a variable, but you don't set a value, the variable will become `undefined`. JavaScript will never make a variable `null` unless you explicitly program it. -* `symbol` +- `string`, e.g. "HackYourFuture" +- `number`, e.g. 5, or 10.6 +- `boolean`, e.g. `true` or `false` +- `array`\*, e.g. `[1, 2, 3]` or `['what', 'is', 'your', 'name']` +- `null` +- `undefined` + The values `null` and `undefined` are very similar in JavaScript, but they behave a bit differently. The difference is that `null` always has type "object", and `undefined` always has type "undefined". +Whenever you declare a variable (using `let`), but you don't set a value, the variable will become `undefined`. JavaScript will never make a variable `null` unless you explicitly program it. + +- `symbol` ```js let x = 5; let typeOfX = typeof x; // -> "number" ``` - ### Exercise -Everybody has two minutes to find a way to declare all basic data types by making use of the typeof operator: + +Everybody has two minutes to find a way to declare all basic data types by making use of the typeof operator: + ```js let x = 5; let typeOfX = typeof x; // -> "number" ``` -### Essence -In this way we can store a lot of data in a compact way, while the computer/compiler knows how to interpretate the 1's and 0's/ + +##### Essence + +In this way we can store a lot of data in a compact way, while the computer/compiler knows how to interpret the 1's and 0's/ ## 5. The compound data types (object, array) ### Explanation +- Object key / value +- Array numeric key value +- Array ordered +- Object not ordered + ### Example -* `array`\*, e.g. `[1, 2, 3]` or `['what', 'is', 'your', 'name']` -* `object`, e.g. `{name: 'John', age: 24}`, or the special object `null` + +- `array`\*, e.g. `[1, 2, 3]` or `['what', 'is', 'your', 'name']` +- `object`, e.g. `{name: 'John', age: 24}`, or the special object `null` + ### Exercise + +1. Create a list of your favorite types of food/dishes like this: + +```js +['Chocolate', 'Risotto', 'Tuna melt']; +``` + +2. Create an object that contains the properties of your town/city like this: + +```js +{ + name: 'Huizen', + province: 'Noord-Holland', + citizens: 50000 +} +``` + ### Essence _Special thanks to Jim Cramer, Yash Kapila, David Nudge for most of the content_ From 5f89a8b44ba1a7221e36a26b02669cbd412b01ef Mon Sep 17 00:00:00 2001 From: Wilgert Velinga Date: Sat, 30 Nov 2019 17:10:48 +0100 Subject: [PATCH 02/19] improve lessonplan week1 --- Week1/LESSONPLAN.md | 114 ++++++++++++++++++++++++-------------------- 1 file changed, 61 insertions(+), 53 deletions(-) diff --git a/Week1/LESSONPLAN.md b/Week1/LESSONPLAN.md index c083baa28..54f533450 100644 --- a/Week1/LESSONPLAN.md +++ b/Week1/LESSONPLAN.md @@ -6,6 +6,7 @@ The purpose of this class is to introduce to the student: - The 2 types of websites: static vs. dynamic - The pillars of web development: HTML/CSS/JavaScript + - where JavaScript can run: Browser / Node - What are variables - How to name variables properly - What are the basic data types @@ -34,27 +35,43 @@ Examples the two different kind of websites Discuss in class which claim belongs to which type of website: Content of Web pages can not be change at runtime. + + Server side languages such as PHP, Node.js are used. + + Content of Web pages can be changed. - No interation with database possible. - Interaction with database is possible - It is faster to load as compared to the other typ of website. + + + No interaction with database possible. + + + Interaction with database is + + + It is faster to load as compared to the other type of website. + + It is slower then static website. + + + Lower Development costs. + + + Content may change everytime the page is loaded. + + Feature of Content Management System. - HTML, CSS, Javascript is used for developing the website. - Same content is delivered everytime the page is loaded. -<<<<<<< HEAD -### Essence + HTML, CSS, Javascript is used for developing the website. -======= -##### Essence + Same content is delivered everytime the page is loaded. -> > > > > > > add exercises to part 2 +### Essence [In the link is an article with (dis)advantages of both static and dynamic websites.](https://www.spiderwriting.co.uk/static-dynamic.php) @@ -81,6 +98,9 @@ Discuss in class which claim belongs to which type of website: - HTML defines what the content is. - CSS defines the appearance of the page. - JavaScript defines behavior of the page. +- Where can JavaScript run: + - browser + - Node ### Example @@ -88,6 +108,7 @@ Discuss in class which claim belongs to which type of website: ### Exercise +Let students fork and then clone the repository. Let students create a classwork directory and create an index.html along with an app.js. Script tag should be added to the end of body tag(reason for doing so is part of JS2 Week1). The end result should look like: @@ -106,7 +127,7 @@ These static pages can interact with a visitor only through the use of forms. On A big disadvantage of web pages like this is that the only way that a visitor has of interacting with the page is by filling out the form and waiting for a new page to load. -It doesn't exhibit any dynamic behaviour like: +It doesn't exhibit any dynamic behavior like: 1. reacting to user actions such as mouse click events or key presses. 1. rendering complex animations @@ -116,12 +137,6 @@ It doesn't exhibit any dynamic behaviour like: ## 3. What are variables (const & let) & naming conventions -======= - -#### 3. What are variables (const & let) & naming conventions - -> > > > > > > add exercises to part 2 - ### Explanation In JavaScript, there are three ways of creating variables. @@ -158,8 +173,8 @@ console.log(age); ```javascript // Variable Initialization -var firstName = 'Yash'; -let lastName = 'Kapila'; +var firstName = 'Marco'; +let lastName = 'Borsato'; const age = 29; console.log(firstName); @@ -174,9 +189,9 @@ let lastName = 'Hanks'; console.log(firstName); console.log(lastName); -// Assigning variables to a different value -firstName = 'Hanks'; -lastName = 'Tom'; +// Assigning a different value to variables +firstName = 'Katy'; +lastName = 'Perry'; console.log(firstName); console.log(lastName); @@ -191,7 +206,7 @@ console.log(lastName); 1. Make 2 variables using the `const` keyword 1. the first variable should contain the town/city you currently stay at - 1. come up with a value for the second variable yourself + 1. come up with name and a value for the second variable yourself ### Essence @@ -207,48 +222,38 @@ _SECOND HALF (14.00 - 16.00)_ ### Explanation -> > > > > > > add exercises to part 2 -> > > > > > > Primitive data types are typically types that are built-in or basic to a language implementation. - -There are 5 different types of data. The compiler/computer interprets all the variables we make as one of those datatypes. -(https://javascript.info/types) +In JavaScript, a primitive (primitive value, primitive data type) is data that is not an object and has no methods. There are 7 primitive data types: `string`, `number`, `bigint`, `boolean`, `null`, `undefined`, and `symbol`. Boolean — true or false Null — no value Undefined — a declared variable but hasn’t been given a value Number — integers, floats, etc String — an array of characters i.e words -?? Symbol — a unique value that's not equal to any other value ?? +Symbol — a unique value that's not equal to any other value (not used during HYF) ### Example - `string`, e.g. "HackYourFuture" - `number`, e.g. 5, or 10.6 - `boolean`, e.g. `true` or `false` -- `array`\*, e.g. `[1, 2, 3]` or `['what', 'is', 'your', 'name']` -- `null` -- `undefined` - The values `null` and `undefined` are very similar in JavaScript, but they behave a bit differently. The difference is that `null` always has type "object", and `undefined` always has type "undefined". +- `array`, e.g. `[1, 2, 3]` or `['what', 'is', 'your', 'name']` +- `null` \* +- `undefined` \* +- `symbol` e.g. `new Symbol('example')` +\* The values `null` and `undefined` are very similar in JavaScript, but they behave a bit differently. The difference is that `null` always has type "object", and `undefined` always has type "undefined". Whenever you declare a variable (using `let`), but you don't set a value, the variable will become `undefined`. JavaScript will never make a variable `null` unless you explicitly program it. -- `symbol` - -```js -let x = 5; -let typeOfX = typeof x; // -> "number" -``` - ### Exercise -Everybody has two minutes to find a way to declare all basic data types by making use of the typeof operator: +Everybody has four minutes to find a way to store all basic data types in a variable by making use of the typeof operator: ```js let x = 5; let typeOfX = typeof x; // -> "number" ``` -##### Essence +### Essence In this way we can store a lot of data in a compact way, while the computer/compiler knows how to interpret the 1's and 0's/ @@ -256,34 +261,37 @@ In this way we can store a lot of data in a compact way, while the computer/comp ### Explanation -- Object key / value -- Array numeric key value -- Array ordered -- Object not ordered +Pieces of information often form a group. For example the names of all the students in this class can be grouped together +as a list. In JavaScript lists are stored in a datatype called an `Array`. + +Another way pieces of information can form a group are multiple properties of the same thing. For example the dimensions +of this room: length, width, height. These groups of information are stored in a datatype called an `Object`. ### Example -- `array`\*, e.g. `[1, 2, 3]` or `['what', 'is', 'your', 'name']` -- `object`, e.g. `{name: 'John', age: 24}`, or the special object `null` +- `array`\*, e.g. `[1, 2, 3]` or `['Gijs', 'Jim', 'Noer', 'Wouter']` +- `object`, e.g. `{name: 'Wilgert', shoeSize: 42}`, or the special object `null` ### Exercise 1. Create a list of your favorite types of food/dishes like this: ```js -['Chocolate', 'Risotto', 'Tuna melt']; +const foods = ['Chocolate', 'Risotto', 'Tuna melt']; ``` 2. Create an object that contains the properties of your town/city like this: ```js -{ +const city = { name: 'Huizen', province: 'Noord-Holland', - citizens: 50000 -} + population: 50000, + capital: false, +}; ``` ### Essence -_Special thanks to Jim Cramer, Yash Kapila, David Nudge for most of the content_ +- Object key: value +- Array numeric index: value From 0feef3231a57b9dbc3deb8f53a3dfee22ec22c3d Mon Sep 17 00:00:00 2001 From: Noer Date: Mon, 30 Mar 2020 14:35:01 +0200 Subject: [PATCH 03/19] Update MAKEME.md --- Week2/MAKEME.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index 397f13782..165f82bc1 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -48,7 +48,7 @@ Report whether or not a number is odd/even! Ever wondered how to make a certain meal? Let's create a recipe list with JavaScript! -1. Declare a variable that holds an object (your meal recipe). +1. Declare a variable that holds an empty object literal (your meal recipe). 2. Give the object 3 properties: a `title` (string), a `servings` (number) and an `ingredients` (array of strings) property. 3. Log each property out seperately, using a loop (for, while or do/while) From 0e8409fc2c5644383b77a7c4a40e323d82705639 Mon Sep 17 00:00:00 2001 From: Noer Paanakker Date: Tue, 7 Apr 2020 00:01:14 +0200 Subject: [PATCH 04/19] adjusted exercise desc and made homework submission more explicit --- README.md | 39 +++++++------ Week1/LESSONPLAN.md | 105 +++++++++++++++++++---------------- Week1/MAKEME.md | 63 ++++++++++++++------- Week1/README.md | 62 +++++++++++++-------- Week2/MAKEME.md | 45 +++++++++------ Week2/README.md | 15 +++-- Week3/MAKEME.md | 113 +++++++++++++++++++++++++++----------- Week3/README.md | 35 +++++++++--- assets/humanbody.jpg | Bin 0 -> 28970 bytes hand-in-homework-guide.md | 10 +--- 10 files changed, 313 insertions(+), 174 deletions(-) create mode 100644 assets/humanbody.jpg diff --git a/README.md b/README.md index dbf980860..0896f13fa 100644 --- a/README.md +++ b/README.md @@ -11,23 +11,21 @@ In this module you'll make a start into wonderful world of programming. We will You'll be learning two main things: -1. Fundamental concepts in programming - While we're using JavaScript to illustrate these concepts, it's important to keep in mind that what you will learn is applicable to **any** programming language. They might differ in syntax (a fancy term for the arrangement of words in a language in order for it to make sense), but the functionality will be the same: a loop will always be a loop. +1. **Fundamental concepts in programming**. While we're using JavaScript to illustrate these concepts, it's important to keep in mind that what you will learn is applicable to **any** programming language. They might differ in syntax (a fancy term for the arrangement of words in a language in order for it to make sense), but the functionality will be the same: a loop will always be a loop. - This should be your mindset when you're learning concepts: **I'm learning how to become a software developer that can adjust to any language used, because I know what the underlying principles and concepts are**. +This should be your mindset when you're learning concepts: **I'm learning how to become a software developer that can adjust to any language used, because I know what the underlying principles and concepts are**. -2. How to think like a programmer - In one sentence this means: **knowing how to solve problems computationally**. Let's split that up in two parts: `how to solve problems` refers to the ability to identify issues and find effective solutions. `computationally` refers to the ability to think in logical steps that the computer can understand and execute. +2. **How to think like a programmer**. In one sentence this means: knowing how to solve problems using a computer. Let's split that up in two parts: `how to solve problems` refers to the ability to identify issues and find effective solutions. `computationally` refers to the ability to think in logical steps that the computer can understand and execute. - This should be your mindset when you're learning how to think : **I'm learning how to think in logical steps, identifying cause and effect, and always looking for solutions**. +This should be your mindset when you're learning how to think : **I'm learning how to think in logical steps, identifying cause and effect, and always looking for solutions**. ## Before you start! In order to test your JavaScript code, you'll be using software that will execute your files from the command line. This software is called [Node.js](https://nodejs.org/en/download/). Download the Long-Term Support (LTS) version for your specific operating system. -- For Windows, click [here](https://nodejs.org/dist/v10.16.0/node-v10.16.0-x64.msi) -- For Mac, click [here](https://nodejs.org/dist/v10.16.0/node-v10.16.0.pkg) -- For Linux, click [here](https://nodejs.org/dist/v10.16.0/node-v10.16.0-linux-x64.tar.xz) +- For Windows, click [here](https://nodejs.org/dist/v12.16.1/node-v12.16.1-x86.msi) +- For Mac, click [here](https://nodejs.org/dist/v12.16.1/node-v12.16.1.pkg) +- For Linux, click [here](https://nodejs.org/dist/v12.16.1/node-v12.16.1-linux-x64.tar.xz) After you've installed it, go to your command line interface. Type in the following command: @@ -35,17 +33,16 @@ After you've installed it, go to your command line interface. Type in the follow node --version ``` -It should show you version `v10.14.2` or higher. +It should show you version `v12.16.1` or higher. ## Learning goals In order to successfully complete this module you will need to master the following: -- Have an idea of what computer programming is -- Know the basic buildingblocks of JavaScript -- Correctly write and use variables, functions and loops -- Understand the control flow -- Think like a programmer +- Have an idea of what `computer programming` is +- Know the basic building blocks of `JavaScript` +- Correctly write and use `variables`, `functions` and `loops` +- Understand the `control flow` ## How to use this repository @@ -55,7 +52,17 @@ This repository consists of 3 parts: 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 with checking the `reading materials` for that week. So, for the first time that is 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. +After your first class you should start with checking the `reading materials` for that week. So, for the first time it's 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. + +Before you start with the homework, make sure you've made a `fork` of the right repository: [HackYourHomework/JavaScript1](https://www.github.com/hackyourhomework/javascript1). 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): + +```console +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! diff --git a/Week1/LESSONPLAN.md b/Week1/LESSONPLAN.md index f8beb0910..8e4301456 100644 --- a/Week1/LESSONPLAN.md +++ b/Week1/LESSONPLAN.md @@ -13,13 +13,13 @@ The purpose of this class is to introduce to the student: ## Core concepts -*FIRST HALF (12.00 - 13.30)* +_FIRST HALF (12.00 - 13.30)_ ## 1. The 2 types of websites: static vs. dynamic ### Explanation -Static websites usually come with a fixed number of pages that have a specific layout. When the page runs on a browser, the content is literally static and doesn’t change in response to user actions. A static website is usually created with HTML and CSS +Static websites usually come with a fixed number of pages that have a specific layout. When the page runs on a browser, the content is literally static and doesn’t change in response to user actions. A static website is usually created with HTML and CSS Compared to static websites, which are purely informational, a dynamic website is more functional. It allows users to interact with the information that is listed on the page. Of course, that requires utilizing more than just HTML code. ### Example @@ -33,37 +33,37 @@ Examples the two different kind of websites Discuss in class which claim belongs to which type of website: - Content of Web pages can not be change at runtime. - Server side languages such as PHP, Node.js are used. - Content of Web pages can be changed. - No interation with database possible. - Interaction with database is possible - It is faster to load as compared to the other typ of website. - It is slower then static website. - Lower Development costs. - Content may change everytime the page is loaded. - Feature of Content Management System. - HTML, CSS, Javascript is used for developing the website. - Same content is delivered everytime the page is loaded. - +- Content of Web pages can not be change at runtime. +- Server side languages such as PHP, Node.js are used. +- Content of Web pages can be changed. +- No interaction with database possible. +- Interaction with database is possible +- It is faster to load as compared to the other typ of website. +- It is slower then static website. +- Lower Development costs. +- Content may change every time the page is loaded. +- Feature of Content Management System. +- HTML, CSS, Javascript is used for developing the website. +- Same content is delivered every time the page is loaded. + ### Essence [In the link is an article with (dis)advantages of both static and dynamic websites.](https://www.spiderwriting.co.uk/static-dynamic.php) - - Static: + + Static: Advantage: - Flexible - Cheaper Disadvantages: - not updating content - Scalability - + Dynamic: Advantage: - - Easy to pull in data on stuctured and organised way - - Content management system + - Easy to pull in data on structured and organised way + - Content management system Disadvantage: - - Design is more fixed, becasue the pages are more of a template + - Design is more fixed, because the pages are more of a template - Costs ## 2. The pillars of web development: HTML/CSS/JavaScript @@ -98,13 +98,13 @@ These static pages can interact with a visitor only through the use of forms. On A big disadvantage of web pages like this is that the only way that a visitor has of interacting with the page is by filling out the form and waiting for a new page to load. -It doesn't exhibit any dynamic behaviour like: +It doesn't exhibit any dynamic behavior like: 1. reacting to user actions such as mouse click events or key presses. 1. rendering complex animations 1. sending requests over network to servers and fetching a response 1. and this is where JavaScript steps in. - + ## 3. What are variables (const & let) & naming conventions ### Explanation @@ -127,6 +127,7 @@ Three different stages of working with variables are: - Variable assignment means throwing away the old value of a variable and replacing it with a new one. Initialization can be thought of as a special way of assignment. https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/variables.md + ### Example ```javascript @@ -142,8 +143,8 @@ console.log(age); ```javascript // Variable Initialization -var firstName = 'Yash'; -let lastName = 'Kapila'; +var firstName = "Yash"; +let lastName = "Kapila"; const age = 29; console.log(firstName); @@ -152,15 +153,15 @@ console.log(age); ``` ```javascript -var firstName = 'Tom'; -let lastName = 'Hanks'; +var firstName = "Tom"; +let lastName = "Hanks"; console.log(firstName); console.log(lastName); // Assigning variables to a different value -firstName = 'Hanks'; -lastName = 'Tom'; +firstName = "Hanks"; +lastName = "Tom"; console.log(firstName); console.log(lastName); @@ -169,12 +170,13 @@ console.log(lastName); ### Exercise 1. Create 2 variables using the `let` keyword - 1. make 1 variable contain your first name - 1. the second variable should have no value assigned - + + 1. make 1 variable contain your first name + 1. the second variable should have no value assigned + 1. Make 2 variables using the `const` keyword - 1. the first variable should contain the city you currently stay at - 1. come up with a value for the second variable yourself + 1. the first variable should contain the city you currently stay at + 1. come up with a value for the second variable yourself ### Essence @@ -184,14 +186,15 @@ For example, your name and age are simple pieces of information, a string and a Variables are simply named storage/pointer for this information. -*SECOND HALF (14.00 - 16.00)* +_SECOND HALF (14.00 - 16.00)_ ## 4. The basic data types (string, boolean, number, undefined, null) ### Explanation + Primitive data types are typically types that are built-in or basic to a language implementation. -There are 5 different types of data. The compiler/computer interpretates all the variables we make as one of those datatypes. +There are 5 different types of data. The compiler/computer interprets all the variables we make as one of those data types. (https://javascript.info/types) Boolean — true or false @@ -200,40 +203,48 @@ Undefined — a declared variable but hasn’t been given a value Number — integers, floats, etc String — an array of characters i.e words ?? Symbol — a unique value that's not equal to any other value ?? + ### Example -* `string`, e.g. "HackYourFuture" -* `number`, e.g. 5, or 10.6 -* `boolean`, e.g. `true` or `false` -* `array`\*, e.g. `[1, 2, 3]` or `['what', 'is', 'your', 'name']` -* `null and undefined` The values `null` and `undefined` are very similar in JavaScript, but they behave a bit differently. The difference is that `null` always has type "object", and `undefined` always has type "undefined". + +- `string`, e.g. "HackYourFuture" +- `number`, e.g. 5, or 10.6 +- `boolean`, e.g. `true` or `false` +- `array`\*, e.g. `[1, 2, 3]` or `['what', 'is', 'your', 'name']` +- `null and undefined` The values `null` and `undefined` are very similar in JavaScript, but they behave a bit differently. The difference is that `null` always has type "object", and `undefined` always has type "undefined". Whenever you declare a variable, but you don't set a value, the variable will become `undefined`. JavaScript will never make a variable `null` unless you explicitly program it. -* `symbol` +- `symbol` ```js let x = 5; let typeOfX = typeof x; // -> "number" ``` - ### Exercise -Everybody has two minutes to find a way to declare all basic data types by making use of the typeof operator: + +Everybody has two minutes to find a way to declare all basic data types by making use of the typeof operator: + ```js let x = 5; let typeOfX = typeof x; // -> "number" ``` + ### Essence -In this way we can store a lot of data in a compact way, while the computer/compiler knows how to interpretate the 1's and 0's/ + +In this way we can store a lot of data in a compact way, while the computer/compiler knows how to interpret the 1's and 0's/ ## 5. The compound data types (object, array) ### Explanation ### Example -* `array`\*, e.g. `[1, 2, 3]` or `['what', 'is', 'your', 'name']` -* `object`, e.g. `{name: 'John', age: 24}`, or the special object `null` + +- `array`\*, e.g. `[1, 2, 3]` or `['what', 'is', 'your', 'name']` +- `object`, e.g. `{name: 'John', age: 24}`, or the special object `null` + ### Exercise + ### Essence _Special thanks to Jim Cramer, Yash Kapila, David Nudge for most of the content_ diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index 787b50988..9b5330f0f 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -26,9 +26,11 @@ In the following exercises you'll learn how to use different JavaScript concepts **Exercise 1: Hello world!** -Write a statement, using the `console.log()` function. Give it a string as an argument. The string should contain the message "Hello world!". +Write a statement, using the `console.log()` function. It should fulfill the following requirements: -Write 10 statements like these, but in different languages. +- It takes a string as an argument +- The string should contain the message `"Hello world!"` +- Execute the function 10 times, each time using the phrase in different languages For example: @@ -38,38 +40,44 @@ Ciao, mondo! // Italian Hola, mundo! // Spanish ``` -Using the command line, navigate to your `js-exercises` folder and type in the following to test your code: +Finished? Using the command line, navigate to your `js-exercises` folder and type in the following to test your code: -``` -node FILENAME.js +```console +foo@bar:~$ node FILENAME.js ``` -It should show the message `Hello world!` in 10 different languages. +Expected output: It should show the message `Hello world!` in 10 different languages. **Exercise 2: Error debugging** Consider the following code: ```js -console.log('I'm awesome'); +console.log('I'm awesome'!; ``` -Copy the code in your `.js` file and run it in the command line using `node`. You will see that you will get a SyntaxError. **Correct the mistake**. +Here are the requirements: + +- Copy the code in your `.js` file and run it in the command line using `node`. + +You will see that you will get a [SyntaxError](https://techterms.com/definition/syntax_error). -Hint: the SyntaxError message will give you some indication of what the error _might_ be, but figure out yourself how to correct it! +- **Correct the mistake**. -When done right, it should show the message `I'm awesome`. +> Hint: the SyntaxError message will give you some indication of what the error _might_ be, but figure out yourself how to correct it! + +Expected output: When done right, the command line should show the message `I'm awesome!`. **Exercise 3: Log the number** Follow the steps. Make sure that each step is written on the line after. -1. First, declare your variable `numberX`. Do not _initialize_ it (which means, don't give it a value) yet. -2. Add a `console.log` statement that explains in words _what you think_ the value of `x` is, like in this example. +1. First, declare your variable `numberX`. Do not _initialize_ it (which means, don't give it a starting value) yet +2. Add a `console.log` statement that explains in words _what you think_ the value of `x` is 3. Add a `console.log` statement that logs the value of `numberX`. -4. Now _initialize_ your variable `numberX` with a number (also called an `integer` in computer science terms). -5. Next, add a `console.log` statement that explains _what you think_ the value of `numberX` is. -6. Add a `console.log` statement that logs the value of `numberX`. +4. Now _initialize_ your variable `numberX` with a number (also called an `integer` in computer science terms) +5. Next, add a `console.log` statement that explains _what you think_ the value of `numberX` is +6. Add a `console.log` statement that logs the value of `numberX` **Exercise 4: Log the string** @@ -86,7 +94,7 @@ Follow the steps. Make sure that each step is written on the line after. Follow the steps. Make sure that each step is written on the line after. -1. Declare a variable `z` and assign the number 7.25 to it. +1. Declare a variable `z` and assign the number `7.25` to it. 2. Write a `console.log` statement in which you log the value of `z`. 3. Declare another variable `a` that has the value of `z` but rounded to the nearest integer. 4. Write a `console.log` statement in which you log the value of `a`. @@ -115,7 +123,14 @@ Follow the steps. Make sure that each step is written on the line after. **Exercise 8: Type checker** -Write a program that checks the data types of two variables and logs to the console `SAME TYPE` if they are the same type. If they are different types log `Not the same...`. +Create a `function` that fulfills the following requirements: + +- Takes in 2 arguments +- Check the data type of each +- Compares each data type +- Logs to the console the message `SAME TYPE` if they are the same type. If they are different types log `Not the same...`. + +Follow the steps: 1. Declare 4 variables: 2 must be `strings` and 2 must be `objects` 2. Create 6 conditional statements, where for each you check if the data type of one variable is the same as the other @@ -142,7 +157,7 @@ if (...) { **Exercise 9: Log the remainder** -For each of these, write in comments what the answer is followed by how you came to that conclusion +Answer the following questions. For each, write in comments what the answer is followed by how you came to that conclusion: 1. If `x` equals 7, and the only other statement is `x = x % 3`, what would be the value of `x` after the calculation? 2. If `y` equals 21, and the only other statement is `y = y % 4`, what would be the value of `y` after the calculation? @@ -150,6 +165,8 @@ For each of these, write in comments what the answer is followed by how you came **Exercise 10: Compare arrays** +Follow the steps: + 1. Declare 2 variables, that each hold an array. The first array should have 4 items, the second 7 items 2. Find out how to get the length of each array. Write a `console.log` statement that shows the length of each array @@ -163,9 +180,11 @@ console.log('The length of the array is...' + ...); ## **3. Code along** +> Create a new GitHub repository for this project. It's a portfolio piece! + We don't want to lose the connection with HTML/CSS, so in the following tutorial you'll learn how to build a simple web application use HTML/CSS and JavaScript. -You'll first write the HTML and CSS, to provide structure and style to the page. When doing so, keep notice of how the developer chooses to do this. Why do they use this tag instead of something else? Why do they give an element a certain class name? +You'll first write the HTML and CSS, to provide structure and style to the page. When doing so, notice how the developer chooses to do this. Why do they use this tag instead of something else? Why do they give an element a certain class name? After, the developer will write JavaScript code. You'll notice it's different from how you've used JavaScript. It is something we call **DOM Manipulation**. Don't worry, you don't need to master this just yet. Just follow along and do some research yourself if you already want to learn more about it! @@ -173,9 +192,11 @@ After, the developer will write JavaScript code. You'll notice it's different fr ## **SUBMIT YOUR HOMEWORK!** -After you've finished your todo list it's time to show us what you got! Starting from this week you'll be submitting all your homework through GitHub. What you'll be doing is upload all your files to a forked repository (a copy from the original, which in this case is the [JavaScript1](https://www.github.com/HackYourFuture/JavaScript1) repository) using GIT. +After you've finished your todo list it's time to show us what you got! Starting from this week you'll be submitting all your homework through GitHub. What you'll be doing is upload all your files to a separate repository. + +Go over to [HackYourHomework/JavaScript1](https://www.github.com/HackYourHomework/JavaScript1). Notice how it's **HackYourHomework**, a repository meant to submit the homework! -Take a look at the following [guide](../hand-in-homework-guide.md) to see how it's done. +Then take a look at the following [guide](../hand-in-homework-guide.md) to see to set everything up. The homework that needs to be submitted is the following: diff --git a/Week1/README.md b/Week1/README.md index ecfaf004b..e82242ebe 100644 --- a/Week1/README.md +++ b/Week1/README.md @@ -5,7 +5,6 @@ These are the topics for week 1: 1. What is programming? - - Introduction - Software - What is a programming language? 2. What is web development? @@ -21,15 +20,18 @@ These are the topics for week 1: ## 1. What is programming? -### Introduction - Programming is giving a computer instructions written in a language it can understand, in order to solve a problem. We don't necessarily need computers to solve problems, but we use them because they provide several benefits: 1. They are fast 2. Cheap to use 3. Can work 24/7 (as long as it has power) -This is important to note: a computer is a `tool` we use to make our lives easier. In order to use this tool, we need to talk to it in a way it understands (programming language) and give it commands on what to do (programming). However, despite the power a computer has it is not very smart. It can't do anything without being told **exactly** what it needs to do to solve a problem. This is why we learn how to program: in order to tell the computer to do what we want it to do. +This is important to note: a computer is a `tool` we use to make our lives easier. + +- [What is a Computer?](https://www.youtube.com/watch?v=rRSD128KWIM) +- [What Do Computers Do?](https://www.youtube.com/watch?v=92TaQRBwPSs) + +In order to use this tool, we need to talk to it in a way it understands (programming language) and give it commands on what to do (the act of programming). However, despite the power a computer has it is not very smart. It can't do anything without being told **exactly** what it needs to do to solve a problem, step-by-step. This is why we learn how to program: in order to tell the computer to do what we want it to do. Go through the following resources to learn more about what programming is: @@ -44,7 +46,7 @@ As a software developer (synonym to 'programmer'), you will write these instruct ### What is a programming language? -Programming is done using a programming language. Why do we need a language to communicate with the computer? At its most basic level, a computer operates based on 0's and 1's: the 0 means 'off', and the 1 means 'on' (think of it like a light switch that either turns the light on or off). +Programming is done using a programming language. Why do we need a language to communicate with the computer? At its most basic level, a computer operates based on 0's and 1's: the 0 means 'off', and the 1 means 'on' (think of it like a light switch that either turns the light on or off). Smart people decided to make working with this easier to understand, so that a lot of people can more simply communicate with a computer. This is how the development of programming languages started: by defining a vocabulary, grammar and syntax to put more organization to the 0's and 1's, we can more simply communicate exactly what we want to computer to do. @@ -56,7 +58,7 @@ There are various languages, each made to fulfill a certain need. For example, M ## 1. What is web development? -In HackYourFuture we focus on `web` programmming (also known as `web development`): writing code that creates websites and web applications. Look at the following video to learn about what you'll be doing: +In HackYourFuture we focus on `web programmming` (also known as `web development`): writing code that creates websites and web applications. Look at the following video to learn about what you'll be doing: - [What does a web developer do?](https://www.youtube.com/watch?v=GEfuOMzRgXo) @@ -64,32 +66,32 @@ In HackYourFuture we focus on `web` programmming (also known as `web development The field of programming is broad. As a software developer (a general term for anyone that writes code to create software) there are several career paths you might take. The following are some of the biggest: -1. Web. Developing websites and web applications to be accessed and used in the browser -2. Mobile. This refers mostly to Android and iOS application development -3. Desktop. Every application on your computer has been made by desktop developers -4. Data science. Writing custom programs to extract patterns from big piles of data is what this developer does. -5. Gaming. Game developers work with a variety of designers, artists and testers to realize a video game -6. Quality Assurance. Applications need to be tested, and these developers write tests that check for the correct working of any piece of code +1. **Web**. Developing websites and web applications to be accessed and used in the browser +2. **Mobile**. This refers mostly to Android and iOS application development +3. **Desktop**. Every application on your computer has been made by desktop developers +4. **Data science**. Writing custom programs to extract patterns from big piles of data is what this developer does +5. **Gaming**. Game developers work with a variety of designers, artists and testers to realize a video game +6. **Quality Assurance**. Applications need to be tested, and these developers write tests that check for the correct working of any piece of code Read the following article to read more about different career paths: - [Software Development Career Paths](https://simpleprogrammer.com/software-development-career-paths/#title-career-developer-options) -Note: once you've chosen a certain track it doesn't mean you can't try out any other! If anything, you are encouraged to explore and see what fits your taste :) +Note: once you've chosen a certain track it doesn't mean you can't try out any other! If anything, you are encouraged to explore and see what fits your taste, while building your career :) ### Web development vs. web design You might have heard these terms used interchangeably. They are, however, two different things. A web developer writes code and handles the logical, technical side. A web designer decides how things are going to look and handle the creative side. The following video will explain this more clearly: -[Web Developer vs. Web Designer](https://www.youtube.com/watch?v=M-M7jBV_Gf4) +[Web Developer vs. Web Designer](https://www.youtube.com/watch?v=bDtxF7qSofg) ### Websites vs. web applications Before we get started with the meat of the module (which is JavaScript), we need to make a small but important distinction: are we going to make websites or web applications? For non-developers, there is no difference but for you as a developer you must know what it is that you'll be producing. -The difference between a website and a web application is the difference between [Wikipedia](https://www.wikipedia.org) and [Facebook](https://wwww.facebook.com). In Facebook, the data shown changes depending on the user. If you are logged in, you'll see different things than that I will. However, on Wikipedia the information will always be the same, for both you and me. +The difference between a website and a web application is the difference between [Wikipedia](https://www.wikipedia.org) and [Facebook](https://wwww.facebook.com). In Facebook, the data shown changes depending on the user. If you are logged in, you'll see different things than that I will. However, on Wikipedia the information will always be the same, for both you and me. -In other words, we're talking about `static` versus `dynamic` sites: a static site always has the same information and serves only to be information, while a dynamic site changes the data shown to the user depending on who it is and what their interactivity on the page is. +In other words, we're talking about `static`(= website) versus `dynamic` (= application) sites: a static site always has the same information and serves only to be information, while a dynamic site changes the data shown to the user depending on who it is and what their interactivity on the page is. Read the following articles to learn more about this: @@ -100,7 +102,9 @@ Read the following articles to learn more about this: JavaScript is a programming language. We use it to communicate with the browser, software that allows us to access the Internet and open webpages. It is essential to learn in order to become a web developer. -You've already learned what HTML and CSS do. Javascript is the third part that makes the circle complete. If we liken the three to the human body, we could say that HTML provides the skeleton, CSS provides the skin and shape, and JavaScript provides the animation/interactivity. +You've already learned what HTML and CSS do. Javascript is the third part that makes the circle complete. If we liken the three to the human body, we could say that HTML provides the skeleton with all the basic content, CSS makes the skin/shape to determine the look, and JavaScript is the brain and muscles to allow for interactivity. + +![Human Body](./../assets/humanbody.jpg) The main use for JavaScript is to make your webpage interactive: for example, if you click a button it will open a popup. Or if you scroll over an image, it changes its color. @@ -111,7 +115,10 @@ Check the following resources to learn more about it: ## 4. What are variables? -A variable is a piece of information that is saved. You give it a name that describes what its contents are, and to also refer to it at a later point. +A variable is a piece of information that is saved for later use. You give it a name that describes what its contents are, and to also refer to it at a later point. + +- [Beginner Programming Concepts - What's a Variable? + ](https://www.youtube.com/watch?v=Jvrszgiexg0) ### The keywords: let, const, var @@ -125,24 +132,35 @@ A variable always contains a `value`: a piece of information that you want to re When creating variables, it's important to think about the right name to give it. It should always reflect what "type" of data it contains and how it would make sense in light of the rest of your code. You (and other developers that will read your code) should be able to read a variable name and know what its purpose is. -Why do we need variables? You'll be using variables to manipulate its content (the value inside the variable). Why would you want to do this? For most of the time, you want to perform some kind of calculation. The most basic example is the following: +Why do we need variables? You'll be using variables **to manipulate its content** (the value inside the variable). Why would you want to do this? For most of the time, you want to perform some kind of calculation. The most basic example is the following: ```js const one = 1; const two = one + one; ``` -Here we have assigned to a new variable the calculation `one` plus `one`. Why have we put the end result into a new variable? It is because the result of the calculation will not be remembered later down the line of code, so we store it in a variable in case we want to manipulate that some point later. +Here we have assigned to a new variable the calculation `one` plus `one`. Why have we put the end result into a new variable? It is because the result of the calculation will **not be remembered** later. Memory works differently in computers: after a calculation is finished a computer thinks its job is done. The result will not exist after, unless explicitly captured within a variable. This is something that you will learn when you start coding yourself. If you can't wait you can already look at the [homework](./MAKEME.md). ## 5. What are data types? -A data type is a category of data. It tells the code interpreter what kind of data it is reading so it knows how to optimally store it in memory. An example of this is the Number type. In most programming languages, when it reads the number `2` it doesn't know that it's a number. It needs to be told it is so. In JavaScript, however, that is assumed. +A data type is a category of data. It tells the code interpreter what kind of data it is reading so it knows how to process and optimally store it in memory. + +An example of this is the `Number` type. In most programming languages, when it reads the number `2` it doesn't know that it's a number. It needs to be told that the character `2` is of the `Number` data type. ## 6 Basic types -There are about 6 basic data types in JavaScript. String, Number, Boolean, Object, Array, and Function. You can read more about them in the following article: +There are about `6 basic data types` in JavaScript: + +- `String` +- `Number` +- `Boolean` +- `Object` +- `Array` +- `Function` + +You can read more about them in the following article: - [JavaScript Data Types](https://www.tutorialrepublic.com/javascript-tutorial/javascript-data-types.php) - [JS Data Types](https://www.w3schools.com/js/js_datatypes.asp) diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index 397f13782..77369b5b4 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -9,10 +9,10 @@ ## **1. Practice the concepts** -In this section you will be doing interactice exercises, that will allow you to practice with the concepts you've learned about this week! +In this section you will be doing interactive exercises, that will allow you to practice with the concepts you've learned about this week! -- [Codecademy: Arrays](https://www.codecademy.com/courses/introduction-to-javascript/lessons/arrays) -- [FreeCodeCamp: Basic data structures](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-data-structures) +- Do all parts of [Codecademy: Arrays](https://www.codecademy.com/courses/introduction-to-javascript/lessons/arrays) (Signup required!) +- Do 5 exercises of [FreeCodeCamp: Basic data structures](https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-data-structures) ## **2. JavaScript exercises** @@ -27,14 +27,18 @@ In this section you will be doing interactice exercises, that will allow you to Consider the following string: ```js -let myString = "hello,this,is,a,difficult,to,read,sentence"; +let myString = 'hello,this,is,a,difficult,to,read,sentence'; ``` +Follow the steps: + 1. Add the variable to your file. 2. Log the length of `myString`. 3. The commas make that the sentence is quite hard to read. Find a way to remove the commas from the string and replace them with spaces. (use Google!) 4. After replacing the commas, log `myString` to see if you succeeded. +Expected result in the console: `hello this is a difficult to read sentence` + **Exercise 2: The even/odd reporter** Report whether or not a number is odd/even! @@ -50,23 +54,22 @@ Ever wondered how to make a certain meal? Let's create a recipe list with JavaSc 1. Declare a variable that holds an object (your meal recipe). 2. Give the object 3 properties: a `title` (string), a `servings` (number) and an `ingredients` (array of strings) property. -3. Log each property out seperately, using a loop (for, while or do/while) +3. Log each property out separately, using a loop (for, while or do/while) -It should look similar to this: +Expected result: -```markdown -Meal name: Omelete +```console +Meal name: Omelette Serves: 2 -Ingredients: -4 eggs -2 strips of bacon -1 tsp salt/pepper +Ingredients: 4 eggs, 2 strips of bacon, 1 tsp salt/pepper ``` **Exercise 4: The reading list** Keep track of which books you read and which books you want to read! +Follow the steps: + 1. Declare a variable that holds an array of 3 objects, where each object describes a book and has properties for the `title` (string), `author` (string), and `alreadyRead` (boolean indicating if you read it yet). 2. Loop through the array of books. 3. For each book, log the book title and book author like so: "The Hobbit by J.R.R. Tolkien". @@ -82,21 +85,31 @@ You're at a party and you feel thirsty! However, you've got 5 friends who are al There are 3 different types of drinks: ```js -const drinkTypes = ["cola", "lemonade", "water"]; +const drinkTypes = ['cola', 'lemonade', 'water']; ``` 2. Create a loop that runs 5 times. On each iteration, push a drink into the `drinkTray` variable. The `drinkTray` can only hold at most two instances of the same drink type, for example it can only hold 2 colas, 2 lemonades, 2 waters. + +```js +// Expected result: +const drinkTray = ['cola', 'cola', 'lemonade', 'lemonade', 'water']; + +// 'Hey guys, I brought a cola, cola, lemonade, lemonade, water!' +``` + 3. If there are already two instances of a `drinkType` then start with the next drink in the array. 4. Your `drinkTray` should contain 2 cola, 2 lemonade and 1 water. 5. Log to the console: "Hey guys, I brought a [INSERT VALUES FROM ARRAY]!" (For example: "Hey guys, I brought a cola, cola, lemonade, lemonade, water!") +Test out your code using `node` in the command line! + ## **3. Code along** -> Create a new folder outside of your `JavaScript1` fork +> Create a new GitHub repository for each of these projects. They are portfolio pieces! In the following 2 projects you'll be flexing your HTML/CSS skills again, together with writing JavaScript code. They are similar in structure and logic, so be sure to spot the similarities! -It's ok if you don't understand exactly what's happening here. Just follow along and try to understand: ask questions about what the developer is doing and think about every line of code. +It's ok if you don't understand exactly what's happening here. Just follow along and try to understand: ask yourself questions about what the developer is doing and think about every line of code. **Project 1: Temperature Converter** @@ -159,7 +172,7 @@ After you've finished your todo list it's time to show us what you got! The home 1. JavaScript exercises 2. PROJECT: Grade calculator -Upload both to your forked JavaScript1 repository in GitHub. Make a pull request to the original repository. +Upload both to your JavaScript1 repository forked to your personal account in GitHub. Make a pull request to the [HackYourHomework/JavaScript1](https://www.github.com/hackyourhomework/javascript1). > Forgotten how to upload your homework? Go through the [guide](../hand-in-homework-guide.md) to learn how to do this again. diff --git a/Week2/README.md b/Week2/README.md index af0ca5eb2..015b4eee5 100644 --- a/Week2/README.md +++ b/Week2/README.md @@ -19,14 +19,16 @@ This is the same in programming. A difference is that it's done in abstract code To learn more about statements vs. expression, research the following resources: -- [Statements vs. Expressions](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/statements_expressions.md) - [Expressions vs. Statements in JS](https://www.youtube.com/watch?v=WVyCrI1cHi8) +- [Statements vs. Expressions](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/statements_expressions.md) ## 2. Loops -A loop is a sequence of instructions that is continually repeated until a certain condition is fulfilled. This condition could either be a specified number or when a desired value is found. +A loop is a sequence of instructions that is continually repeated until a certain condition is fulfilled. This condition could either be a specified number or when a desired value is found or not. + +In programming, a loop is meant to be used in case there's a repetitive task that needs to be done. -Read more about loops here: +Learn more about loops here: - [JavaScript Loops](https://www.youtube.com/watch?v=s9wW2PpJsmQ) - [Loops](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/loops.md) @@ -39,10 +41,11 @@ In the language of JavaScript this goes from top to bottom, left to right. This > The term `flow` is a general term meaning a specific, repeatable order of actions. In your working life you'll hear the term `workflow`, which in that case refers to the different actions necessary to complete a business activity. -There is one important distinction between spoken language and programming languages: in programming languages the order in which the code is read can change, depending on various `control statements`. +There is one important distinction between spoken language and programming languages: in programming languages the order in which the code is read can change, depending on various `control statements` (`if`, `for/while/do-while loop` or `switch`). Learn more about control flow here: +- [Introduction to Programming - Control Flow](https://www.youtube.com/watch?v=nBj2nJup8xU) - [Control flow](https://dev.to/mugas/control-flow-in-javascript-246l) ## 4. Operators @@ -60,10 +63,11 @@ Computers only function by logical rules: whether something is true or not deter ```js if () { + // then this will happen } ``` -A condition is put in the `( )` and it needs to evaluate to `true` or `false` (also known as Boolean values). If the condition is true, then whatever is inside the `{ }` will be executed. +A condition is put in the `( )` and it needs to evaluate to `true` or `false` (also known as `Boolean` values). If the condition is true, then whatever is inside the `{ }` will be executed. What happens when the condition is false? For that we have the `else { }` block. If the condition is false, then whatever is inside the else will be executed: @@ -82,6 +86,7 @@ A naming convention is a rule that every developer should hold themselves to whe Read about the different naming conventions for JavaScript here: +- [Naming Conventions in Programming](https://blog.jsecademy.com/naming-conventions-in-programming/) - [Naming conventions](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/naming_conventions.md) ## Finished? diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md index f32e7c5dd..d07719332 100644 --- a/Week3/MAKEME.md +++ b/Week3/MAKEME.md @@ -33,63 +33,106 @@ There is no better way to start your day then with a compliment! 1. Write a function named `giveCompliment` - It takes 1 argument: your name -- Inside the function create an array with 10 strings. Each string should be a compliment, like `"great"`, `"awesome"` -- Write logic that randomly selects a compliment +- Inside the function define a variable that holds an array, `compliments`, with 10 strings. Each string should be a compliment, like `"great"`, `"awesome"` +- Write code that randomly selects a compliment - Return a string: "You are [COMPLIMENT], [YOUR_NAME]! 2. Call the function three times, giving each function call the same argument: your name. +```js +// Expected output +giveCompliment('Noer'); // Returns "You are amazing, Noer!" +giveCompliment('Noer'); // Returns "You are great, Noer!" +giveCompliment('Noer'); // Returns "You are supersmart, Noer!" +``` + **Exercise 2: Dog years** -You know how old your dog is in human years, but what about dog years? Calculate it! +You know how old your dog is in human years, but what about dog years? Let's calculate it! 1. Write a function named `calculateDogAge`. -- It takes 1 argument: your puppy's age (number). -- Calculate your dog's age based on the conversion rate of 1 human year to 7 dog years. +- It takes 1 argument: your (fictional) puppy's age (number). +- Calculate your dog's age based on the conversion rate of `1 human year to 7 dog years`. - Return a string: "Your doggie is [CALCULATED_VALUE] years old in dog years!" 2. Call the function three times with different sets of values. +```js +// Expected output +calculateDogAge(1); // Returns "Your doggie is 7 years old in dog years!" +calculateDogAge(2); // Returns "Your doggie is 14 years old in dog years!" +calculateDogAge(3); // Returns "Your doggie is 21 years old in dog years!" +``` + **Exercise 3: Be your own fortune teller** Why pay a fortune teller when you can just program your fortune yourself? -1. Write a function named `tellFortune`. +1. Create 4 arrays, `numChildren`, `partnerNames`, `locations` and `jobs`. Give each array 5 random string values that have to do with the name of the variable +2. Write a function named `tellFortune`. - It takes 4 arguments: number of children (number), partner's name (string), geographic location (string), job title (string). - Randomly select values from the arrays. -- Return a string: "You will be a [JOB_TITLE] in [LOCATION], and married to [PARTNER_NAME] with [NUMBER_KIDS] kids." +- Return a string: "You will be a [JOB_TITLE] in [LOCATION], married to [PARTNER_NAME] with [NUMBER_KIDS] kids." -2. Create 4 arrays, `numChildren`, `partnerNames`, `locations` and `jobs`. Give each array 5 random values that make sense -3. Call the function 1 time, by passing the arrays as the argument. +3. Call the function 3 times, by passing the arrays as the argument. + +```js +// Expected output +const numChildren = [...]; +const partnerNames = [...]; +const locations = [...]; +const jobs = [...]; + +tellFortune(numChildren, partnerNames, locations, jobs); // Returns "You will be a programmer in The Netherlands, married to Layla with 3 kids." +tellFortune(numChildren, partnerNames, locations, jobs); // Returns "You will be a farmer in France, married to Muhammed with 2 kids." +tellFortune(numChildren, partnerNames, locations, jobs); // Returns "You will be a teacher in The United States, married to Zara with 4 kids." +``` **Exercise 4: Shopping at the supermarket** Let's do some grocery shopping! We're going to get some things to cook dinner with. However, you like to spend your money and always buy too many things. So when you have more than 3 items in your shopping cart the first item gets taken out. -1. Write a function named `addToShoppingCart`. +1. Create an array called `shoppingCart` that holds the following strings: `"bananas"` and `"milk"` +2. Write a function named `addToShoppingCart` -- It takes in 1 argument: a grocery item (string) -- Add grocery item to array. If the amount of items is more than 3 remove the first one in the array +- It takes 1 argument: a grocery item (string) +- Add grocery item to `shoppingCart`. If the amount of items is more than 3 remove the first one in the array +- Loops through the array in order to list out the items - Return a string: "You bought [LIST_OF_GROCERY_ITEMS]!" -2. Create an array with 2 predefined strings: `"bananas"` and `"milk"` 3. Call the function 3 times, each time with a different string as the argument. +```js +const shoppingCart = ['bananas', 'milk']; + +// Expected output +addToShoppingCart('chocolate'); // Returns "You bought bananas, milk, chocolate!" +addToShoppingCart('waffles'); // Returns "You bought milk, chocolate, waffles!" +addToShoppingCart('tea'); // Returns "You bought chocolate, waffles, tea!" +``` + **Exercise 5: Total cost is ...** -You want to buy a couple of things from the supermarket to prepare for a party. After scanning all the items the cashier gives you the total price, but the machine a broken! Let's write her a function that does it for her instead! +You want to buy a couple of things from the supermarket to prepare for a party. After scanning all the items the cashier wants to give you the total price, but the machine is broken! Let's write her a `function` that does it for her instead! -1. Write a function called `calculateTotalPrice` +1. Create an object named `cartForParty` with 5 properties. Each property should be a grocery item (like `beers` or `chips`) and hold a number value (like `1.75` or `0.99`) +2. Write a function called `calculateTotalPrice` - It takes 1 argument: an object that contains properties that only contain number values -- Add all the number values together -- Return a number: the total price of all items +- Loop through the object and add all the number values together +- Return a string: "Total: €[TOTAL_PRICE_ITEMS]" -2. Create an object named `cartForParty` with 5 properties. Each property should be a grocery item (like `beers` or `chips`) and hold a number value (like `1.75` or `0.99`) 3. Call the function 1 time, giving it the object `cartForParty` as an argument +```js +const cartForParty = { ... } + +// Expected output +calculateTotalPrice(cartForParty); // Returns "Total: €10.75" +``` + ## **3. Code along** In this project you'll be building a simple meditation application, that will allow you to set a timer, loop a video and play a song! @@ -102,15 +145,17 @@ You'll be working with the