Frontend Advanced JS #99

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

adamblanchard merged 18 commits into main from 73-create-advanced-javascript-module

Aug 4, 2025

.prettierrc

-Original file line number
+Diff line change
@@ -0,0 +1,3 @@
+    {
+      "endOfLine": "auto"
+    }

README.md

-Original file line number
+Diff line change
@@ Expand Up / @@ -4,3 +4,6 @@ @@
     > This repository is under construction. If you're looking for the current HYF curriculum, check out [Curriculum](https://github.com/HackYourFuture-CPH/curriculum).
     Documents the HYF programme, courses and modules.
+    > [!IMPORTANT]
+    > If you wish to contribute to this programme please visit the [contribution page](./contributing/README.md).

contributing/README.md

-Original file line number
+Diff line change
@@ Expand Up / @@ -47,6 +47,9 @@ To automatically fix some issues: @@
     ./lint --fix
     ```
+    > [!TIP]
+    > 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.
     ### Existing issues
     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.
@@ Expand Down @@

courses/Backend/README.md

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -8,7 +8,7 @@
  
    | Name                                                                           | Weeks |

    | ------------------------------------------------------------------------------ | ----- |

    | [Collaboration via GitHub](../../shared-modules/collaboration-via-github/)     | 1     |

    | [Advanced JavaScript](../../shared-modules/advanced-javascript/)               | 4     |

    | [Advanced JavaScript](./advanced-javascript/)                                  | 4     |

    | [Databases](./databases/)                                                      | 2     |

    | [Node.js](Node.js/)                                                            | 2     |

    | [Advanced Team Processes](../../shared-modules/advanced-team-processes/)       | 1     |

courses/Backend/advanced-javascript/README.md

Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# Advanced JavaScript (Backend)

		Coming soon

courses/Frontend/README.md

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -8,7 +8,7 @@
  
    | Name                                                                            | Weeks |

    | ------------------------------------------------------------------------------- | ----- |

    | [Collaboration via GitHub](../../shared-modules/collaboration-via-github/)      | 1     |

    | [Advanced JavaScript](../../shared-modules/advanced-javascript/)                | 4     |

    | [Advanced JavaScript](./advanced-javascript/)                                   | 4     |

    | [React](./react/)                                                               | 5     |

    | [Advanced Team Processes](../../shared-modules/advanced-team-processes/)        | 1     |

    | [Specialist Career Training)](../../shared-modules/specialist-career-training/) | 3     |

courses/Frontend/advanced-javascript/README.md

-Original file line number
+Diff line change
@@ -0,0 +1,23 @@
+    # Advanced JavaScript (Frontend)
+    Javascript is the brain of the website and an essential technology to master when building increasingly complex websites.
+    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.
+    ## Contents
+    | Week | Topic                                                       | Preparation                           | Lesson Plan                                           | Assignment                          |
+    | ---- | ----------------------------------------------------------- | ------------------------------------- | ----------------------------------------------------- | ----------------------------------- |
+    | 1.   | [Array functions & Arrow functions](./week1/README.md)      | [Preparation](./week1/preparation.md) | [Session Plan](./week1/session-plan.md) (for mentors) | [Assignment](./week1/assignment.md) |
+    | 2.   | [Callback functions & Asynchronous code](./week2/README.md) | [Preparation](./week2/preparation.md) | [Session Plan](./week2/session-plan.md) (for mentors) | [Assignment](./week2/assignment.md) |
+    | 3.   | [Promises & Async/Await](./week3/README.md)                 | [Preparation](./week3/preparation.md) | [Session Plan](./week3/session-plan.md) (for mentors) | [Assignment](./week3/assignment.md) |
+    | 4.   | [Classes & Advanced Promises](./week4/README.md)            | [Preparation](./week4/preparation.md) | [Session Plan](./week4/session-plan.md) (for mentors) | [Assignment](./week4/assignment.md) |
+    ## Module Learning Goals
+    By the end of this module, you will be able to:
+    - [ ] Retrieve and work with data from remote servers
+    - [ ] Process and display complex data in user-friendly interfaces
+    - [ ] Create responsive web applications that react to user input
+    - [ ] Build complex websites in a scalable and maintainable way

courses/Frontend/advanced-javascript/week1/README.md

-Original file line number
+Diff line change
@@ -0,0 +1,26 @@
+    # Array functions & arrow functions (Week 1)
+    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.
+    Understanding how to use array functions and the arrow notation can greatly improve the readability of your code.
+    ## Contents
+    - [Preparation](./preparation.md)
+    - [Session Plan](./session-plan.md) (for mentors)
+    - [Assignment](./assignment.md)
+    ## Session Learning Goals
+    By the end of this session, you will be able to:
+    - [ ] Use the **arrow function syntax** with any number of arguments
+    - [ ] Use the **arrow function syntax** with an implicit return (no curly braces)
+    - [ ] Use the **array functions** `.forEach()`, `.map()`, and `.filter()`
+    - [ ] Know how to find and learn about other **array functions** such as `.find()`, `.some()`, `.reduce()`
+    - [ ] Combine multiple **array functions** (chaining) to solve complex problems in a concise way.
+    ```js
+    // Example of using filter() with an arrow function
+    const expensiveItems = myItemArray.filter((x) => x.cost > 200);
+    ```

courses/Frontend/advanced-javascript/week1/assignment.md

-Original file line number
+Diff line change
@@ -0,0 +1,49 @@
+    # Assignment
+    <!-- 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. -->
+    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**.
+    ## 1. Doubling of number
+    Say you would like to write a program that **doubles the odd numbers** in an array and **throws away the even number**.
+    Your solution could be something like this:
+    ```js
+    let numbers = [1, 2, 3, 4];
+    let newNumbers = [];
+    for (let i = 0; i < numbers.length; i++) {
+      if (numbers[i] % 2 !== 0) {
+        newNumbers[i] = numbers[i] * 2;
+      }
+    }
+    console.log("The doubled numbers are", newNumbers); // [2, 6]
+    ```
+    Rewrite the above program using `map` and `filter` don't forget to use arrow functions.
+    ## 2. Codewars!
+    Complete these Katas:
+    - [8 kyu To square(root) or not to square(root)](https://www.codewars.com/kata/57f6ad55cca6e045d2000627)
+    - [8 kyu Removing Elements](https://www.codewars.com/kata/5769b3802ae6f8e4890009d2)
+    ## 3. Working with movies
+    ![cinema](https://media.giphy.com/media/l6mBchxYZc7Sw/giphy.gif)
+    Copy the movies array in the [movies](./session-materials/movies.js) file. Use this array to do the following tasks:
+. Create an array of movies containing the **movies with a short title** (you define what short means)
+. Create an array of movie titles with **long movie titles**
+. Count the **number of movies** made between 1980-1989 (including both the years)
+. 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)
+. 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.
+. **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?
+. 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**"
+. Calculate the **average rating** of all the movies using `.reduce()` _Optional_
+. **Count the total number** of Good, Average and Bad movies using `.reduce()`. A return could fx be `{goodMovies: 33, averageMovies: 45, goodMovies: 123}` _Optional_

courses/Frontend/advanced-javascript/week1/preparation.md

-Original file line number
+Diff line change
@@ -0,0 +1,29 @@
+    # Preparation
+    ## Reading List
+    Read/watch through this list of content before you come to the session.
+    > [!TIP]
+    > Some topics are covered in multiple links below. Feel free to skip reading if you already feel confident that you understand the topic.
+    ### Arrow Functions
+    Use one or more of the links to :
+    - 📖 [JavaScript Arrow Function](https://www.w3schools.com/js/js_arrow_function.asp) by w3schools.com (10 min)
+    - 📽️ [Javascript Arrow Functions](https://youtu.be/DFyfbJk4sZw) by HackYourFuture (10 min)
+    ### Array Functions
+    - 📽️ [Javascript advanced array methods part 1](https://youtu.be/wBKv2EX2hw8) by HackYourFuture (20 min)
+    - 📽️ [JavaScript advanced array methods part 2](https://youtu.be/w4FNF8FLjQU) by HackYourFuture (5 min)
+    - 📽️ [Functional programming in JavaScript](https://www.youtube.com/playlist?list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84) by Fun fun functional - Check the first 2 videos. (20 min)
+    - 📽️ [Array Iteration: 8 Methods](https://www.youtube.com/watch?v=Urwzk6ILvPQ) by freeCodeCamp.org (5 min)
+    - 📖 [10 JavaScript array methods you should know](https://dev.to/frugencefidel/10-javascript-array-methods-you-should-know-4lk3) by Frugence Fidel (10 min)
+    - 📖 [Chaining Array functions](https://www.geeksforgeeks.org/javascript/chaining-of-array-methods-in-javascript/) by Madhumanti Gupta (5 min)
+    - 📖 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:
+      - `ForEach()` (10 min)
+      - `map()` (10 min)
+      - `filter()` (10 min)

courses/Frontend/advanced-javascript/week1/session-materials/movies.js

Large diffs are not rendered by default.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Frontend Advanced JS #99

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!

Uh oh!