> For the complete documentation index, see [llms.txt](https://program.hackyourfuture.dk/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://program.hackyourfuture.dk/course-content/frontend/advanced-javascript/week1/exercises.md).

# Exercises

Work in the [Listings demo](https://github.com/HackYourFuture-CPH/hyf-assignment-template/blob/main/courses/frontend/advanced-javascript/week1/listings-demo). Open **index.html** in your browser to run the demo, and open **index.js** in your IDE to implement the tasks. In `index.js`, search for **`Task`** (e.g. Task 1.1, Task 2)—each task has a comment with explicit instructions about what code to write. This document describes the **end-result** you’re aiming for and how the exercise is set up. The generation of random listings and the render helpers (cards, price list) are already implemented; you only need to call them and add the logic that uses `.forEach()`, `.map()`, and `.filter()`.

## Task 1: Generate and show listings (`forEach`)

**What should happen:** When the user clicks **Generate listings (37) — Task 1**, 37 random listings are generated and displayed as cards on the page.

**Listing** (each object in the generated array):

| Property     | Type      | Description                                                 |
| ------------ | --------- | ----------------------------------------------------------- |
| `type`       | string    | e.g. `"House"`, `"Apartment"`, `"Shed"`, `"Dorm"`, `"Farm"` |
| `facilities` | string\[] | e.g. `["Parkering", "Have"]`                                |
| `price`      | number    | 1–10000                                                     |
| `hasGarden`  | boolean   |                                                             |
| `size`       | number    | m², 12–1000                                                 |
| `img`        | string    | image URL                                                   |

You implement the logic that (1) triggers generation and (2) renders the listings by iterating over the array and adding one card per listing. The code that builds each card and prepares the view is already there; you use `listings.forEach(...)` to show every listing.

## Task 2: Show prices (`map`)

**What should happen:** After generating listings, when the user clicks **Show prices — Task 2**, a list of all listing prices appears (e.g. comma-separated) in the prices area.

You implement getting an array of prices from the current listings and passing it to the helper that displays numbers. Use `.map()` to turn the list of listings into a list of prices.

## Task 3: Filter buttons (`filter`)

**What should happen:** When the user clicks one of the filter buttons, the page shows only the matching listings (or their prices).

* **Cheap listings — Task 3a:** Only “cheap” listings are shown as cards. You decide what “cheap” means (e.g. price below a certain number). Use `.filter()` and then the same render-as-cards logic as in Task 1.
* **Expensive prices — Task 3b:** Only the *prices* of “expensive” listings are shown (as numbers). Use `.filter()` to get expensive listings, then `.map()` to get their prices, and the helper that displays numbers.
* **With parking — Task 3c:** Only listings that have “Parkering” in their facilities are shown as cards. Use `.filter()` on the facilities.

## Task: Arrow functions

Rewrite the code you wrote for Tasks 1–3 to use arrow function syntax instead of `function`.

## Task 4: Advanced filters (Listing project)

**What should happen:** The user can set type, min price, min size, facilities, and garden in the Advanced filters form. When they click **Apply filters — Task 4**, only listings that match *all* selected criteria are shown as cards.

You implement **filterListings(listings, filter)**. Reading the form and building the `filter` object is already done; you receive an object with only the fields the user set. Return only listings that match every property present in `filter`. If a property is missing from `filter`, don’t filter by it.

**Filter** (object passed to `filterListings`; only set fields are present):

| Property     | Type      | Meaning                                                       |
| ------------ | --------- | ------------------------------------------------------------- |
| `type`       | string    | `listing.type` must equal this.                               |
| `minPrice`   | number    | `listing.price` must be ≥ this.                               |
| `minSize`    | number    | `listing.size` must be ≥ this (m²).                           |
| `hasGarden`  | boolean   | If `true`, `listing.hasGarden` must be `true`.                |
| `facilities` | string\[] | `listing.facilities` must include every string in this array. |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://program.hackyourfuture.dk/course-content/frontend/advanced-javascript/week1/exercises.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.