`) when you want on-page output; the solution’s `showOutput` writes to `#out`. |
+| **style.css** | Basic layout and styles for `#out` (and `main` if you use it). |
+
+---
+
+## Where to find tasks and how they are marked
+
+Everything lives in **index.js**. Search for `// ==========` for section breaks, `// Task:` for what to build, and `// Next:` for suggested links to the trainee exercises.
+
+---
+
+## How the code works
+
+### URLs (JSONPlaceholder)
+
+- **`USER_URL`** – `https://jsonplaceholder.typicode.com/users/1`
+- **`POST_URL`** – `https://jsonplaceholder.typicode.com/posts/1`
+- **`TODO_URL`** – `https://jsonplaceholder.typicode.com/todos/1` (optional extra)
+
+### Solution-only helpers and functions
+
+- **`showOutput(text)`** – Sets `textContent` on `#out` when that element exists.
+- **`getUser()`** – `async` `fetch` of **`USER_URL`**, then `.json()`, then `showOutput` with stringified user data.
+- **`loadOneResourceWithThen()`** – Same resource with `.then` / `.catch` only (no `async`/`await`).
+- **`oneSecondMessage()`** – Promise that resolves after one second, then shows `"It worked"`.
+- **`demoOrderPizza()`** – Delayed resolve or reject, then shows pizza or error text.
+- **`getUserWithTryCatch()`** – Same fetch pattern as `getUser` with `try` / `catch` and errors on the page.
+- **`demoPromiseAll()`** – Fetches **`USER_URL`** and **`POST_URL`** in parallel, then shows a short two-line summary.
+- **`promiseLoop()`** – Schedules endless microtasks (illustration only; can freeze the tab if called).
+
+### Callback hell
+
+Not implemented in these files; use the session plan (e.g. npm `q` or your own example on the board).
diff --git a/courses/frontend/advanced-javascript/week3/session-materials/demo/index-solution.js b/courses/frontend/advanced-javascript/week3/session-materials/demo/index-solution.js
new file mode 100644
index 00000000..cd5cedab
--- /dev/null
+++ b/courses/frontend/advanced-javascript/week3/session-materials/demo/index-solution.js
@@ -0,0 +1,151 @@
+// Week 3 demo – Promises & async/await (solution)
+
+// JSONPlaceholder only (reliable in the browser). Session plan may mention Open Notify —
+// same async ideas, different URL.
+const USER_URL = "https://jsonplaceholder.typicode.com/users/1";
+const POST_URL = "https://jsonplaceholder.typicode.com/posts/1";
+const TODO_URL = "https://jsonplaceholder.typicode.com/todos/1";
+
+function showOutput(text) {
+ const el = document.getElementById("out");
+ if (el) {
+ el.textContent = text;
+ }
+}
+
+// =============================================================================
+// Async/await – simple usage
+// =============================================================================
+// Task: Load USER_URL with async/await
+
+async function getUser() {
+ const response = await fetch(USER_URL);
+ const user = await response.json();
+ showOutput(JSON.stringify(user, null, 2));
+}
+
+// Next: Exercise 1
+
+// =============================================================================
+// Why use Promises? :: Callback Hell
+// =============================================================================
+// Show Callback Hell example in https://www.npmjs.com/package/q
+
+// =============================================================================
+// Promise consumption
+// =============================================================================
+// Task: Load one of the resources (e.g. USER_URL); show success or error on the page using .then / .catch only.
+
+function loadOneResourceWithThen() {
+ showOutput("Loading…");
+ fetch(USER_URL)
+ .then((response) => response.json())
+ .then((data) => {
+ showOutput(JSON.stringify(data, null, 2));
+ })
+ .catch((error) => {
+ showOutput(String(error));
+ });
+}
+
+// Next: Chaining examples
+// Next: Exercise 2
+
+// =============================================================================
+// Promise creation
+// =============================================================================
+// Task: Create a Promise that resolves after 1 second and shows "It worked" on the page.
+// Task: Create demoOrderPizza: a pizza-order Promise — after a 'baking' delay it either resolves with a pizza you can eat (show that on the page) or rejects if baking failed (show the failure on the page).
+
+function oneSecondMessage() {
+ showOutput("…");
+ const oneSecondTimeoutPromise = new Promise((resolve) => {
+ setTimeout(() => {
+ resolve();
+ }, 1000);
+ });
+
+ oneSecondTimeoutPromise.then(() => {
+ showOutput("It worked");
+ });
+}
+
+function demoOrderPizza() {
+ showOutput("Baking… (3s for demo)");
+ const pizzaMakingTime = 3000;
+ const didPizzaBakingSucceed = true;
+ const pizza = "Macaroni pizza";
+
+ const orderPizzaPromise = new Promise((resolve, reject) => {
+ setTimeout(() => {
+ if (didPizzaBakingSucceed) {
+ resolve(pizza);
+ } else {
+ reject("The pizza was a mess");
+ }
+ }, pizzaMakingTime);
+ });
+
+ orderPizzaPromise
+ .then((p) => {
+ showOutput(`Let's eat the ${p}`);
+ })
+ .catch((error) => {
+ showOutput(`Let's eat nothing: ${error}`);
+ });
+}
+
+// Next: Exercise 3
+// Next: Exercise 4
+
+// =============================================================================
+// Back to async/await (try / catch)
+// =============================================================================
+// Task: improve getUser to use try/catch to handle errors and show the error on the page.
+
+async function getUserWithTryCatch() {
+ try {
+ const response = await fetch(USER_URL);
+ const user = await response.json();
+ showOutput(JSON.stringify(user, null, 2));
+ } catch (err) {
+ showOutput(String(err));
+ }
+}
+
+// Next: Exercise 5
+
+// =============================================================================
+// Promise.all
+// =============================================================================
+
+async function demoPromiseAll() {
+ showOutput("Loading both…");
+ try {
+ const [userRes, postRes] = await Promise.all([
+ fetch(USER_URL),
+ fetch(POST_URL),
+ ]);
+ const [user, post] = await Promise.all([userRes.json(), postRes.json()]);
+ const summary = [
+ "User: " + user.name + " (" + user.email + ")",
+ "Post: " + post.title,
+ ].join("\n");
+ showOutput(summary);
+ } catch (e) {
+ showOutput(String(e));
+ }
+}
+
+// Next: Exercise 6
+
+// =============================================================================
+// (Optional) Infinite loop via Promises
+// =============================================================================
+
+function promiseLoop() {
+ return Promise.resolve().then(() => {
+ console.log("tick");
+ return promiseLoop();
+ });
+}
diff --git a/courses/frontend/advanced-javascript/week3/session-materials/demo/index.html b/courses/frontend/advanced-javascript/week3/session-materials/demo/index.html
new file mode 100644
index 00000000..cae179b8
--- /dev/null
+++ b/courses/frontend/advanced-javascript/week3/session-materials/demo/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ Demo – Week 3
+
+
+
+
+
+
diff --git a/courses/frontend/advanced-javascript/week3/session-materials/demo/index.js b/courses/frontend/advanced-javascript/week3/session-materials/demo/index.js
new file mode 100644
index 00000000..be2447e4
--- /dev/null
+++ b/courses/frontend/advanced-javascript/week3/session-materials/demo/index.js
@@ -0,0 +1,62 @@
+// Week 3 demo – Promises & async/await (worksheet for class)
+
+// JSONPlaceholder only (reliable in the browser). Session plan may mention Open Notify —
+// same async ideas, different URL.
+const USER_URL = "https://jsonplaceholder.typicode.com/users/1";
+const POST_URL = "https://jsonplaceholder.typicode.com/posts/1";
+const TODO_URL = "https://jsonplaceholder.typicode.com/todos/1";
+
+// =============================================================================
+// Async/await – simple usage
+// =============================================================================
+// Task: Load USER_URL with async/await
+
+async function getUser() {}
+
+// Next: Exercise 1
+
+// =============================================================================
+// Why use Promises? :: Callback Hell
+// =============================================================================
+// Show Callback Hell example in https://www.npmjs.com/package/q
+
+// =============================================================================
+// Promise consumption
+// =============================================================================
+// Task: Load one of the resources (e.g. USER_URL); show success or error on the page using .then / .catch only.
+
+// Next: Chaining examples
+// Next: Exercise 2
+
+// =============================================================================
+// Promise creation
+// =============================================================================
+// Task: Create a Promise that resolves after 1 second and shows "It worked" on the page.
+// Task: Create demoOrderPizza: a pizza-order Promise — after a 'baking' delay it either resolves with a pizza you can eat (show that on the page) or rejects if baking failed (show the failure on the page).
+
+// Next: Exercise 3
+// Next: Exercise 4
+
+// =============================================================================
+// Back to async/await (try / catch)
+// =============================================================================
+// Task: improve getUser to use try/catch to handle errors and show the error on the page.
+
+// Next: Exercise 5
+
+// =============================================================================
+// Promise.all
+// =============================================================================
+
+// Next: Exercise 6
+
+// =============================================================================
+// (Optional) Infinite loop via Promises
+// =============================================================================
+
+function promiseLoop() {
+ return Promise.resolve().then(() => {
+ console.log("tick");
+ return promiseLoop();
+ });
+}
diff --git a/courses/frontend/advanced-javascript/week3/session-materials/demo/style.css b/courses/frontend/advanced-javascript/week3/session-materials/demo/style.css
new file mode 100644
index 00000000..ab055fd9
--- /dev/null
+++ b/courses/frontend/advanced-javascript/week3/session-materials/demo/style.css
@@ -0,0 +1,34 @@
+/* Week 3 demo – minimal */
+
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+body {
+ margin: 0;
+ font-family: system-ui, sans-serif;
+ line-height: 1.5;
+}
+
+main {
+ max-width: 40rem;
+ margin: 0 auto;
+ padding: 1rem;
+}
+
+#out {
+ margin: 0.25rem 0 1rem;
+ padding: 0.5rem;
+ border: 1px solid #ccc;
+ font-family: ui-monospace, monospace;
+ font-size: 0.8rem;
+ white-space: pre-wrap;
+ word-break: break-word;
+ min-height: 1.25rem;
+}
+
+#out:empty {
+ display: none;
+}
diff --git a/courses/frontend/advanced-javascript/week3/session-materials/exercises.md b/courses/frontend/advanced-javascript/week3/session-materials/exercises.md
new file mode 100644
index 00000000..056292b2
--- /dev/null
+++ b/courses/frontend/advanced-javascript/week3/session-materials/exercises.md
@@ -0,0 +1,54 @@
+# Exercises
+
+Work through these in order.
+
+## Exercise 1
+
+Using async await
+
+1. `fetch` yes or no from this api: `https://yesno.wtf/api`. Show the answer on the page.
+
+## Exercise 2
+
+Using promises
+
+1. `fetch` yes or no from this api: `https://yesno.wtf/api`. Show the answer on the page.
+2. Try fetching a url that rejects e.g. `https://knajskdskj.jasdk`. Show the error message on the page.
+
+## Exercise 3
+
+1. Create a promise that resolves after 4 seconds. Use this promise to show the text `hello` on the page after 4 seconds.
+2. Now make the promise fail by rejecting it with an error message instead of resolving it, and show the error message on the page.
+
+## Exercise 4
+
+Create a function that returns a promise, that you can use like this:
+
+```js
+// YesNoFail4Seconds should wait 4 seconds before it does one of the following 3 things:
+// resolves with a yes
+// resolves with a no
+// or rejects
+// Look into Math.random()
+YesNoFail4Seconds()
+ .then((data) => {
+ // Show on the page: The answer is ${data}
+ })
+ .catch((error) => {
+ // Show on the page: the error
+ });
+```
+
+The above example show how to consume the promise using promises. Now try consume the `YesNoFail4Seconds` using async/await
+
+## Exercise 5
+
+Using async await
+
+1. Fetch a user from JSONPlaceholder (for example `https://jsonplaceholder.typicode.com/users/1`)
+2. After that succeeds, fetch movies using [this api](https://gist.githubusercontent.com/pankaj28843/08f397fcea7c760a99206bcb0ae8d0a4/raw/02d8bc9ec9a73e463b13c44df77a87255def5ab9/movies.json)
+3. Show the movies on the page
+
+## Exercise 6
+
+Get the JSONPlaceholder user and the movies at the same time. Show the movies and the battery status on the page when the related promises have resolved.
diff --git a/courses/frontend/advanced-javascript/week3/session-plan.md b/courses/frontend/advanced-javascript/week3/session-plan.md
index 8af8c832..50b95edf 100644
--- a/courses/frontend/advanced-javascript/week3/session-plan.md
+++ b/courses/frontend/advanced-javascript/week3/session-plan.md
@@ -7,6 +7,8 @@
These are some examples of previously created materials by mentors that you can use yourself, or for inspiration.
- [Notion Page Handout](https://dandy-birth-1b2.notion.site/HYF-Aarhus-JS-3-Week-2-0287dd1293df4a0a92171e62ce12f5c8?pvs=4) (by [Thomas](https://github.com/te-online))
+- [Demo](./session-materials/demo/) – In-session live coding from **Code inspiration** below (not the trainee exercises). **index.js** = worksheet stubs; **index-solution.js** = reference. [README](./session-materials/demo/README.md).
+- [Promises chaining diagram (PDF)](./session-materials/Promises.pdf) – Hand-drawn sketch you can project or redraw on the board when explaining how `.then()` chains.
## Session Outline
@@ -20,78 +22,30 @@ First when they fully understand one part of promises, I move on! Don't over-com
- Quickly recap asynchronicity
- Ask the trainees what it means that some code is asynchronous
- Practical example of async/await
- - [Exercises 1](#exercise-1)
+ - [Exercises 1](./session-materials/exercises.md#exercise-1)
- Promise
- Why do we use promises?
- So important to explain this, the trainees always ask this! [Is there specific functionality that can only be done with promises in JS?](https://stackoverflow.com/questions/39004567/why-do-we-need-promise-in-js)
- Consumption
- [Code inspiration](#promise-consumption)
- Example, call some function that returns a promise (like fetch)
- - [Exercises 2](#exercise-2)
+ - [Exercises 2](./session-materials/exercises.md#exercise-2)
- Creation
- [Code inspiration](#promise-creation)
- - [Exercises 3](#exercise-3) and then [Exercises 4](#exercise-4)
+ - [Exercises 3](./session-materials/exercises.md#exercise-3) and then [Exercises 4](./session-materials/exercises.md#exercise-4)
- Async await
- - [Exercises 5](#exercise-5)
+ - [Exercises 5](./session-materials/exercises.md#exercise-5)
- `Promise.all` - Let trainees investigate
- Optional - Chaining. Calling `.then` returns a promise. Only get to here when they understand async/await and promise consumption and creation.
+ - I found that drawing/demoing how it works under the hood useful when explaining how promises feed into the next `.then()`. You can find example in Session matherials.
- [Reason for promise](https://mobile.twitter.com/addyosmani/status/1097035418657144832?s=19)
- - [Exercises 5](#exercise-5) and [Exercises 6](#exercise-6)
+ - [Exercises 5](./session-materials/exercises.md#exercise-5) and [Exercises 6](./session-materials/exercises.md#exercise-6)
## Exercises
-
+See [Exercises](./session-materials/exercises.md). Trainees show results on the page (update the DOM), not in the console.
-### Exercise 1
-
-Using async await
-
-1. `fetch` yes or no from this api: `https://yesno.wtf/api`. log out the answer
-
-### Exercise 2
-
-Using promises
-
-1. `fetch` yes or no from this api: `https://yesno.wtf/api`. log out the answer
-2. Try fetching a url that rejects e.g. `https://knajskdskj.jasdk`. Log out the error message
-
-### Exercise 3
-
-1. Create a promise that resolves after 4 seconds. Use this promise to log out the text 'hello' after 4 seconds.
-2. Now make the promise fail by rejecting it with an error message instead of resolving it, and log the error message to the console.
-
-### Exercise 4
-
-Create a function that returns a promise, that you can use like this:
-
-```js
-// YesNoFail4Seconds should wait 4 seconds before it does one of the following 3 things:
-// resolves with a yes
-// resolves with a no
-// or rejects
-// Look into Math.random()
-YesNoFail4Seconds()
- .then((data) => {
- console.log(`The answer is ${data}`);
- })
- .catch((error) => {
- console.log(error);
- });
-```
-
-The above example show how to consume the promise using promises. Now try consume the `YesNoFail4Seconds` using async/await
-
-### Exercise 5
-
-Using async await
-
-1. Fetch the astronauts
-2. After the astronauts has been fetched, fetch movies using [this api](https://gist.githubusercontent.com/pankaj28843/08f397fcea7c760a99206bcb0ae8d0a4/raw/02d8bc9ec9a73e463b13c44df77a87255def5ab9/movies.json)
-3. Log out the movies
-
-### Exercise 6
-
-Get the astronauts and the movies at the same time. Log out the movies and the battery status when both promises has been resolved.
+[Console order](./session-materials/console-order.md) – Optional “what is logged?” promise chaining.
## Code inspiration
@@ -108,22 +62,21 @@ Get the astronauts and the movies at the same time. Log out the movies and the b
// await waits until we have fetched the data from the api. Or said in another way await waits until fetch has resolved with the data from the api
// write async before a function for await to work. What does it mean that something is asynchronous?
-async function getAstronauts() {
+// JSONPlaceholder works reliably in the browser (same idea as Open Notify / astronauts, different URL).
+async function getJsonPlaceholderUser() {
// await waits until we have data from fetch before it runs the next line. No need for callbacks 🤯
console.log("Before we fetch data");
- const astronautsResponse = await fetch(
- "http://api.open-notify.org/astros.json",
- );
+ const response = await fetch("https://jsonplaceholder.typicode.com/users/1");
console.log(
"This is logged out after some time, even though the code looks synchronous! 🤯",
);
- const astronauts = await astronautsResponse.json();
+ const user = await response.json();
console.log("This is logged out after some time! 🤯");
- console.log(astronauts);
- return astronauts;
+ console.log(user);
+ return user;
}
-getAstronauts();
+getJsonPlaceholderUser();
```
### Promise consumption
@@ -138,10 +91,10 @@ The trainees should be able to answer these questions:
// How would you explain your mom what resolved and rejected means?
```js
-fetch("http://api.open-notify.org/astros.json")
- .then((astronautsResponse) => astronautsResponse.json())
- .then((astronauts) => {
- console.log(astronauts);
+fetch("https://jsonplaceholder.typicode.com/users/1")
+ .then((response) => response.json())
+ .then((user) => {
+ console.log(user);
})
.catch((error) => console.log(error));
@@ -215,19 +168,19 @@ console.log(test());
So writing `async` in front of a function makes it return a promise! The keyword `await` makes JavaScript wait until that promise resolved and returns its result.
```js
-async function getAstronauts() {
+async function getJsonPlaceholderUserSafe() {
try {
- const astronautsResponse = await fetch(
- "http://api.open-notify.org/astros.json",
+ const response = await fetch(
+ "https://jsonplaceholder.typicode.com/users/1",
);
- const astronauts = await astronautsResponse.json();
- return astronauts;
+ const user = await response.json();
+ return user;
} catch (err) {
- throw "Fetching the astronauts went wrong";
+ throw "Fetching the user went wrong";
}
}
-const astronauts = getAstronauts();
+const userPromise = getJsonPlaceholderUserSafe();
```
### Function that returns a promise
diff --git a/courses/frontend/advanced-javascript/week4/README.md b/courses/frontend/advanced-javascript/week4/README.md
index 67b810bd..75d2dd93 100644
--- a/courses/frontend/advanced-javascript/week4/README.md
+++ b/courses/frontend/advanced-javascript/week4/README.md
@@ -1,4 +1,4 @@
-# Classes & Advanced Promises (Week 4)
+# Classes & Object-Oriented Programming (Week 4)
In this session, you'll learn how to use JavaScript classes to create reusable templates for objects that share common properties and behaviors. By mastering classes and inheritance, you'll be able to organize your code more efficiently and implement object-oriented programming principles. These skills will help you write cleaner, more maintainable code and understand the differences between classes and objects in JavaScript.
@@ -6,13 +6,14 @@ In this session, you'll learn how to use JavaScript classes to create reusable t
- [Preparation](./preparation.md)
- [Session Plan](./session-plan.md) (for mentors)
+- [Exercises](./session-materials/exercises.md)
- [Assignment](./assignment.md)
## Session Learning Goals
By the end of this session, you will be able to:
-- [ ] Use **classes** to easily create similar objects.
+- [ ] Use **classes** to create objects with consistent structure and built-in behavior
- [ ] Declare a class using `class`, `constructor`, and `this`
- [ ] Instantiate objects from classes using `new`
- [ ] Use Methods and constructors
@@ -21,19 +22,30 @@ By the end of this session, you will be able to:
- [ ] Understand the difference between classes vs objects
```js
-// Example of declaring a Person class
-class Person {
- constructor(name, age) {
- this.name = name;
- this.age = age;
+class Comment {
+ constructor(username, text) {
+ this.username = username;
+ this.text = text;
+ this.likes = 0;
}
- greet() {
- console.log(`Hi, I'm ${this.name}`);
+ like() {
+ this.likes++;
+ this.render();
+ }
+
+ render() {
+ // data, behavior, and rendering live together
+ const div = document.createElement("div");
+ div.innerHTML = `
+ @${this.username}
+ ${this.text}
+
+ `;
+ return div;
}
}
-// Example of an actual person created from the Person class
-const alice = new Person("Alice", 25);
-alice.greet();
+const comment = new Comment("alice", "Great post!");
+document.body.appendChild(comment.render());
```
diff --git a/courses/frontend/advanced-javascript/week4/assignment.md b/courses/frontend/advanced-javascript/week4/assignment.md
index 34b00ad3..1374fbd2 100644
--- a/courses/frontend/advanced-javascript/week4/assignment.md
+++ b/courses/frontend/advanced-javascript/week4/assignment.md
@@ -1,27 +1,34 @@
# Assignment
-For this week's assignment we will create a web applications that generates a screenshot of a website based on a url. We will combine two API's one to generate the screenshot and one to allow the user to save the screenshot.
+For this week's assignment we will create a web application that generates a screenshot of a website based on a URL. We will combine two APIs: one to generate the screenshot and one to allow the user to save the screenshot.
We use [Rapid API](https://rapidapi.com/apishub/api/website-screenshot6/?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel) to generate a screenshot and the [crudcrud API](https://crudcrud.com/) to save the screenshot.
-Technical specifications.
+## Technical specifications
1. User can enter a URL for a website and it will send back a screenshot of the website using the website-screenshot API
2. User can hit a button to save the screenshot. It will then save the screenshot and the URL as a resource on crudcrud
3. User can get a list of all screenshots that they have saved
4. User can delete a screenshot that they have saved
-## Optional Tasks/Assignments
+### Class requirements
+
+1. **Model your UI as classes** with a `render()` method that puts content on the page.
+2. **Build an error system** with custom error classes that `extend Error`, each with a way to show a user-friendly message (e.g. `toUserMessage()`).
+3. **Handle errors** with `try/catch` and use `instanceof` to treat different error types differently.
+
+Look at your interface and think about what parts can be modeled as classes — if something has data and behavior that go together, or if it can be reused, make it a class. For example, you could create a `Screenshot` class that holds the URL and image data, knows how to render itself as a card on the page, and has a method for deleting itself from crudcrud.
-1. Create another resource called users which takes in an email and password. Create one user.
-2. Get back a list of users
-3. First show a login form
-4. If the email and password matches the one user we created we show the applications else we show an error message.
+For the error system, think about what kinds of errors can happen in your app — what if the user submits an empty URL? What if the API returns a bad response? What if the network is down? You might end up with classes like `ValidationError`, `ApiError`, or something else entirely — it's up to you.
+
+## Optional Tasks/Assignments
-Extra
+> **Note:** Users do not need to be stored in a database or API — just keep them in memory (e.g. an array of instances in your JavaScript). No need to persist them anywhere.
-1. Create another user
-2. When saving a screenshot also save the user email(or another unique identifier)
-3. Make sure we are only showing screenshots that the user that is logged in has uploaded
+1. Create a user object with an email and password. Keep it in a variable or array.
+2. Show a login form first.
+3. If the email and password match the user you created, show the application. Otherwise show an error message.
+4. Create another user. When saving a screenshot, also save the user email (or another unique identifier).
+5. Make sure you only show screenshots that the logged-in user has uploaded.
-Keep in mind the API key for the website-screenshot and the uuid for crudcrud should be in a secret.js file which is not committed to git
+Keep in mind the API key for the website-screenshot and the uuid for crudcrud should be in a secret.js file which is not committed to git.
diff --git a/courses/frontend/advanced-javascript/week4/session-materials/code-inspiration.md b/courses/frontend/advanced-javascript/week4/session-materials/code-inspiration.md
new file mode 100644
index 00000000..4df83aab
--- /dev/null
+++ b/courses/frontend/advanced-javascript/week4/session-materials/code-inspiration.md
@@ -0,0 +1,189 @@
+# Code inspiration
+
+Snippets aligned with the in-session [demo](./demo/README.md): same `Comment` shape (`username`, `text`), plain-object motivation, `render()` / `like()` / `hasSwearWord()`, then `Error` / `ValidationError` and a Web Components sketch. Use these on the board or as copy-paste shortcuts; the demo files are the full runnable version.
+
+## Motivation (plain objects)
+
+Why classes: repeated object literals are easy to get wrong; rendering and behavior live outside the data.
+
+```js
+const comment1 = {
+ username: "alice",
+ text: "Nice!",
+ date: new Date(),
+ likes: 0,
+};
+const comment2 = { userName: "bob", text: "Hi" }; // typo: userName → UI shows undefined
+const comment3 = { username: "carol", content: "Oops" }; // wrong key for text
+
+function renderComment(comment) {
+ const div = document.createElement("div");
+ div.className = "comment";
+ div.innerHTML = `
+ @${comment.username}
+ ${comment.text}
+
+ `;
+ return div;
+}
+
+function likeComment(comment) {
+ comment.likes++; // data changes, but the button on screen does not update
+}
+```
+
+## Constructor
+
+```js
+class Comment {
+ constructor(username, text) {
+ this.username = username;
+ this.text = text;
+ this.date = new Date();
+ this.likes = 0;
+ this.element = null;
+ }
+}
+```
+
+## Instance
+
+```js
+const c1 = new Comment("dave_dev", "Hello!");
+const c2 = new Comment("eve_codes", "Second comment");
+
+console.log(c1);
+```
+
+## Methods
+
+`render()` keeps DOM in sync with state; `like()` updates and re-renders; `hasSwearWord()` drives a CSS class (e.g. `comment--flagged`) for moderation-style UI.
+
+```js
+class Comment {
+ constructor(username, text) {
+ this.username = username;
+ this.text = text;
+ this.date = new Date();
+ this.likes = 0;
+ this.element = null;
+ }
+
+ like() {
+ this.likes++;
+ this.render();
+ }
+
+ hasSwearWord() {
+ const swearWords = ["crap", "damn", "stupid"];
+ const words = this.text.toLowerCase().split(" ");
+ return swearWords.some((swear) => words.includes(swear));
+ }
+
+ render() {
+ if (!this.element) {
+ this.element = document.createElement("div");
+ }
+
+ this.element.className = this.hasSwearWord()
+ ? "comment comment--flagged"
+ : "comment";
+
+ this.element.innerHTML = `
+
+ @${this.username}
+ ${this.date.toLocaleDateString()}
+
+ ${this.text}
+
+ `;
+
+ this.element
+ .querySelector(".like-btn")
+ .addEventListener("click", () => this.like());
+
+ return this.element;
+ }
+}
+
+document.getElementById("comments-class").appendChild(c1.render());
+```
+
+## Static methods
+
+A **static method** belongs to the class itself, not to instances. Useful for factory functions (creating instances from raw data) or utility operations.
+
+```js
+class Comment {
+ constructor(username, text) {
+ this.username = username;
+ this.text = text;
+ this.date = new Date();
+ this.likes = 0;
+ }
+
+ static fromJSON(data) {
+ return new Comment(data.username, data.text);
+ }
+
+ // ... render(), like(), etc.
+}
+
+// Called on the class, not on an instance:
+const apiData = { username: "grace_api", text: "Loaded from JSON!" };
+const comment = Comment.fromJSON(apiData);
+```
+
+**You already use static methods — `Promise` is a class!**
+
+```js
+// Instance methods (called on an instance):
+const p = new Promise((resolve) => resolve("done"));
+p.then((value) => console.log(value));
+p.catch((err) => console.log(err));
+
+// Static methods (called on the class itself):
+Promise.resolve("instant value");
+Promise.all([fetch("/a"), fetch("/b")]);
+Promise.race([fetch("/a"), fetch("/b")]);
+```
+
+## (Optional) Extending built-ins: Error and Web Components
+
+`Error` is a built-in class; custom errors use `extends` and `super()` like any other subclass. Web Components apply the same “class + lifecycle + HTML” idea to the platform.
+
+```js
+const err = new Error("something went wrong");
+console.log(err.message);
+console.log(err.stack);
+
+class ValidationError extends Error {
+ constructor(field, message) {
+ super(message);
+ this.name = "ValidationError";
+ this.field = field;
+ }
+
+ toUserMessage() {
+ return `❌ ${this.field}: ${this.message}`;
+ }
+}
+
+try {
+ throw new ValidationError("username", "Cannot be empty");
+} catch (error) {
+ console.log(error.toUserMessage());
+ console.log(error instanceof ValidationError);
+ console.log(error instanceof Error);
+}
+
+// Web Components — same pattern, browser APIs (not required to run in the demo):
+//
+// class CommentElement extends HTMLElement {
+// connectedCallback() {
+// this.innerHTML = `...`;
+// }
+// }
+// customElements.define("my-comment", CommentElement);
+//