Skip to content

Commit 457358b

Browse files
Merge pull request #99 from HackYourFuture-CPH/73-create-advanced-javascript-module
Frontend Advanced JS
2 parents e7f6157 + 09d0be7 commit 457358b

32 files changed

Lines changed: 1506 additions & 5 deletions

.prettierrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"endOfLine": "auto"
3+
}

README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,6 @@
44
> This repository is under construction. If you're looking for the current HYF curriculum, check out [Curriculum](https://github.com/HackYourFuture-CPH/curriculum).
55
66
Documents the HYF programme, courses and modules.
7+
8+
> [!IMPORTANT]
9+
> If you wish to contribute to this programme please visit the [contribution page](./contributing/README.md).

contributing/README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,9 @@ To automatically fix some issues:
4747
./lint --fix
4848
```
4949

50+
> [!TIP]
51+
> On **Windows** you cannot run bash scripts natively. In this case, open the folder in your Git Bash shell and run the commands from in there.
52+
5053
### Existing issues
5154

5255
Very briefly: check the project board "Todo" column, choose one ideally near the top, assign it, clone the repo, do it, make a PR, get feedback, profit.

courses/Backend/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
| Name | Weeks |
99
| ------------------------------------------------------------------------------ | ----- |
1010
| [Collaboration via GitHub](../../shared-modules/collaboration-via-github/) | 1 |
11-
| [Advanced JavaScript](../../shared-modules/advanced-javascript/) | 4 |
11+
| [Advanced JavaScript](./advanced-javascript/) | 4 |
1212
| [Databases](./databases/) | 2 |
1313
| [Node.js](Node.js/) | 2 |
1414
| [Advanced Team Processes](../../shared-modules/advanced-team-processes/) | 1 |
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Advanced JavaScript (Backend)
2+
3+
Coming soon

courses/Frontend/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
| Name | Weeks |
99
| ------------------------------------------------------------------------------- | ----- |
1010
| [Collaboration via GitHub](../../shared-modules/collaboration-via-github/) | 1 |
11-
| [Advanced JavaScript](../../shared-modules/advanced-javascript/) | 4 |
11+
| [Advanced JavaScript](./advanced-javascript/) | 4 |
1212
| [React](./react/) | 5 |
1313
| [Advanced Team Processes](../../shared-modules/advanced-team-processes/) | 1 |
1414
| [Specialist Career Training)](../../shared-modules/specialist-career-training/) | 3 |
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Advanced JavaScript (Frontend)
2+
3+
Javascript is the brain of the website and an essential technology to master when building increasingly complex websites.
4+
5+
In this module, you will advance your JavaScript expertise to build interactive and dynamic websites. You will explore how to retrieve data from remote servers, process and present complex information in intuitive interfaces, and develop responsive web applications that respond to user actions. Additionally, you will learn strategies for designing scalable and maintainable code to tackle advanced development scenarios.
6+
7+
## Contents
8+
9+
| Week | Topic | Preparation | Lesson Plan | Assignment |
10+
| ---- | ----------------------------------------------------------- | ------------------------------------- | ----------------------------------------------------- | ----------------------------------- |
11+
| 1. | [Array functions & Arrow functions](./week1/README.md) | [Preparation](./week1/preparation.md) | [Session Plan](./week1/session-plan.md) (for mentors) | [Assignment](./week1/assignment.md) |
12+
| 2. | [Callback functions & Asynchronous code](./week2/README.md) | [Preparation](./week2/preparation.md) | [Session Plan](./week2/session-plan.md) (for mentors) | [Assignment](./week2/assignment.md) |
13+
| 3. | [Promises & Async/Await](./week3/README.md) | [Preparation](./week3/preparation.md) | [Session Plan](./week3/session-plan.md) (for mentors) | [Assignment](./week3/assignment.md) |
14+
| 4. | [Classes & Advanced Promises](./week4/README.md) | [Preparation](./week4/preparation.md) | [Session Plan](./week4/session-plan.md) (for mentors) | [Assignment](./week4/assignment.md) |
15+
16+
## Module Learning Goals
17+
18+
By the end of this module, you will be able to:
19+
20+
- [ ] Retrieve and work with data from remote servers
21+
- [ ] Process and display complex data in user-friendly interfaces
22+
- [ ] Create responsive web applications that react to user input
23+
- [ ] Build complex websites in a scalable and maintainable way
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Array functions & arrow functions (Week 1)
2+
3+
This session is about mastering the most commonly used array functions provided by Javascript. Working with arrays is an essential part of being a javascript developer. A lot of the time js developers have an array of some objects. That could be **users**, **products**, **posts**, **jobs** etc. Developers so often need to filter the arrays, change the structure of the array, sort them or loop through them.
4+
5+
Understanding how to use array functions and the arrow notation can greatly improve the readability of your code.
6+
7+
## Contents
8+
9+
- [Preparation](./preparation.md)
10+
- [Session Plan](./session-plan.md) (for mentors)
11+
- [Assignment](./assignment.md)
12+
13+
## Session Learning Goals
14+
15+
By the end of this session, you will be able to:
16+
17+
- [ ] Use the **arrow function syntax** with any number of arguments
18+
- [ ] Use the **arrow function syntax** with an implicit return (no curly braces)
19+
- [ ] Use the **array functions** `.forEach()`, `.map()`, and `.filter()`
20+
- [ ] Know how to find and learn about other **array functions** such as `.find()`, `.some()`, `.reduce()`
21+
- [ ] Combine multiple **array functions** (chaining) to solve complex problems in a concise way.
22+
23+
```js
24+
// Example of using filter() with an arrow function
25+
const expensiveItems = myItemArray.filter((x) => x.cost > 200);
26+
```
Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
# Assignment
2+
3+
<!-- The type of assignment you write will vary a lot depending on the module. But either way, all of the set up, instructions and tips should be captured in here. -->
4+
5+
The warmup exercises will be a bit abstract. But the in the **hyfBay exercise** the task will be a lot closer to a **real world task**.
6+
7+
## 1. Doubling of number
8+
9+
Say you would like to write a program that **doubles the odd numbers** in an array and **throws away the even number**.
10+
11+
Your solution could be something like this:
12+
13+
```js
14+
let numbers = [1, 2, 3, 4];
15+
let newNumbers = [];
16+
17+
for (let i = 0; i < numbers.length; i++) {
18+
if (numbers[i] % 2 !== 0) {
19+
newNumbers[i] = numbers[i] * 2;
20+
}
21+
}
22+
23+
console.log("The doubled numbers are", newNumbers); // [2, 6]
24+
```
25+
26+
Rewrite the above program using `map` and `filter` don't forget to use arrow functions.
27+
28+
## 2. Codewars!
29+
30+
Complete these Katas:
31+
32+
- [8 kyu To square(root) or not to square(root)](https://www.codewars.com/kata/57f6ad55cca6e045d2000627)
33+
- [8 kyu Removing Elements](https://www.codewars.com/kata/5769b3802ae6f8e4890009d2)
34+
35+
## 3. Working with movies
36+
37+
![cinema](https://media.giphy.com/media/l6mBchxYZc7Sw/giphy.gif)
38+
39+
Copy the movies array in the [movies](./session-materials/movies.js) file. Use this array to do the following tasks:
40+
41+
1. Create an array of movies containing the **movies with a short title** (you define what short means)
42+
2. Create an array of movie titles with **long movie titles**
43+
3. Count the **number of movies** made between 1980-1989 (including both the years)
44+
4. Create a new array that has an **extra key called tag**. The tag is based on the rating: Good (>= 7), Average (>= 4 and < 7), Bad (< 4)
45+
5. Using chaining, first filter the movies array to only contain the movies rated higher than 6. Now map the movies array to only the rating of the movies.
46+
6. **Count the total number of movies** containing any of following keywords: `Surfer`, `Alien` or `Benjamin`. So if there were 3 movies that contained `Surfer`, 1 with `Alien` and 2 with `Benjamin`, you would return 6. Can you make sure the search is case insensitive?
47+
7. Create an array of movies where a **word in the title is duplicated**. Fx "Star **Wars**: The Clone **Wars**" the word **Wars** is duplicated. Here are some madeup examples of movies with duplicated words in the title: "**The** three men and **the** pistol", "**Chase** three - The final **chase**"
48+
8. Calculate the **average rating** of all the movies using `.reduce()` _Optional_
49+
9. **Count the total number** of Good, Average and Bad movies using `.reduce()`. A return could fx be `{goodMovies: 33, averageMovies: 45, goodMovies: 123}` _Optional_
Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# Preparation
2+
3+
## Reading List
4+
5+
Read/watch through this list of content before you come to the session.
6+
7+
> [!TIP]
8+
> Some topics are covered in multiple links below. Feel free to skip reading if you already feel confident that you understand the topic.
9+
10+
### Arrow Functions
11+
12+
Use one or more of the links to :
13+
14+
- 📖 [JavaScript Arrow Function](https://www.w3schools.com/js/js_arrow_function.asp) by w3schools.com (10 min)
15+
- 📽️ [Javascript Arrow Functions](https://youtu.be/DFyfbJk4sZw) by HackYourFuture (10 min)
16+
17+
### Array Functions
18+
19+
- 📽️ [Javascript advanced array methods part 1](https://youtu.be/wBKv2EX2hw8) by HackYourFuture (20 min)
20+
- 📽️ [JavaScript advanced array methods part 2](https://youtu.be/w4FNF8FLjQU) by HackYourFuture (5 min)
21+
- 📽️ [Functional programming in JavaScript](https://www.youtube.com/playlist?list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84) by Fun fun functional - Check the first 2 videos. (20 min)
22+
- 📽️ [Array Iteration: 8 Methods](https://www.youtube.com/watch?v=Urwzk6ILvPQ) by freeCodeCamp.org (5 min)
23+
- 📖 [10 JavaScript array methods you should know](https://dev.to/frugencefidel/10-javascript-array-methods-you-should-know-4lk3) by Frugence Fidel (10 min)
24+
- 📖 [Chaining Array functions](https://www.geeksforgeeks.org/javascript/chaining-of-array-methods-in-javascript/) by Madhumanti Gupta (5 min)
25+
26+
- 📖 Go to the [official documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) by MDN and read the _description_ and _examples_ of each function:
27+
- `ForEach()` (10 min)
28+
- `map()` (10 min)
29+
- `filter()` (10 min)

0 commit comments

Comments
 (0)