diff --git a/courses/Foundation/assignment-projects/README.md b/courses/Foundation/assignment-projects/README.md
new file mode 100644
index 00000000..663c9b9a
--- /dev/null
+++ b/courses/Foundation/assignment-projects/README.md
@@ -0,0 +1,5 @@
+# Assignment Projects
+
+TODO
+
+We need to restructure/redesign the old javascript homework projects to fit with the new modules here. Leaving this stub for now, so we can point all old links here.
diff --git a/courses/Foundation/intro-to-frontend/README.md b/courses/Foundation/intro-to-frontend/README.md
index 21d1e41d..391c5f42 100644
--- a/courses/Foundation/intro-to-frontend/README.md
+++ b/courses/Foundation/intro-to-frontend/README.md
@@ -1,3 +1,7 @@
-# Introduction to Frontend
+# Intro to Frontend
-TODO
+Here you can find module content and assignments for the Intro to Frontend module.
+
+| Week | Topic | Preparation | Homework | Lesson plan |
+| ---- | ----------------------------------------------------------------------------- | ------------------------------------- | ------------------------------------- | ------------------------------------- |
+| 1. | [The browser environment, DOM, event listeners and making requests](./week1/) | [Preparation](./week1/preparation.md) | [Assignment](../assignment-projects/) | [Lesson plan](./week1/lesson-plan.md) |
diff --git a/courses/Foundation/intro-to-frontend/week1/README.md b/courses/Foundation/intro-to-frontend/week1/README.md
new file mode 100644
index 00000000..7216612b
--- /dev/null
+++ b/courses/Foundation/intro-to-frontend/week1/README.md
@@ -0,0 +1,171 @@
+# Intro to Frontend, Week 1
+
+## Learning goals
+
+Browser environment
+
+- [ ] HTML vs CSS vs JS
+- [ ] Client vs server
+- [ ] Where is the script tag being loaded
+
+DOM
+
+- [ ] What is it and what do developers use the DOM for?
+- [ ] DOM manipulation
+ - [ ] Get elements
+ - [ ] Insert elements
+ - [ ] Element manipulation (style, innerHTML, text)
+ - [ ] Window object
+ - [ ] Document object
+
+Event listeners
+
+- [ ] Document onload
+- [ ] Click, submit, change, input - Focus on usage
+
+Making requests
+
+- [ ] Fetch (No promise explanation! Focus on usage)
+
+## Relevant links
+
+- [Preparation](preparation.md)
+- [Assignment](../../assignment-projects/)
+- [Lesson plan](lesson-plan.md)
+
+## HTML interaction
+
+Interacting with the HTML DOM is done through the document object in the browser. With the document object we can get html elements and change them.
+
+For the next js part we use this html.
+
+```html
+
+
+
Javascript week 3
+
+
+
+
+
+```
+
+```js
+// use the querySelector to select elements just like in css
+const testIdElement = document.querySelector("#test-id");
+console.log(testIdElement); // logs the html element with id "test-id"
+
+// Change the inner html of the test-id element
+testIdElement.innerHTML = "test";
+// Change the background-color of the test-id element. Inline css changes is done via the style attribute on the element
+testIdElement.style.backgroundColor = "blue";
+
+// It is also possible to create html elements
+// Create a div element
+const div = document.createElement("div");
+// Change its inner html
+div.innerHTML = "We created this div!!!";
+
+// Lest append it to the div with the class queue
+const queueDiv = document.querySelector(".queue");
+queueDiv.appendChild(div);
+```
+
+## Code Commenting
+
+First the straightforward part: how do we place comments in our code?
+
+### HTML
+
+[W3Schools](https://www.w3schools.com/html/html_comments.asp)
+Comments
+
+```html
+
+
+
+```
+
+### CSS
+
+[MDN on CSS comments](https://developer.mozilla.org/en-US/docs/Web/CSS/Comments)
+
+```css
+/* Comment */
+
+/*
+A comment
+which stretches
+over several
+lines
+*/
+```
+
+### JavaScript
+
+Single line comments
+
+```js
+// Change heading:
+document.getElementById("myH").innerHTML = "My First Page";
+```
+
+Single line comments at end of the line:
+
+```js
+const x = 5; // Declare x, give it the value of 5
+```
+
+Writing js documentation: [JSDoc](https://usejsdoc.org/)
+
+### When to comment?
+
+Now for the hard part: when to comment? When you work for different companies, you will see different styles. Embrace something you like, and then learn to let go. Google on "when to comment code?" and you'll find a big bunch of different opinions.
+
+The general concept is, however, that it is there to help make the code more easy to understand. Note, however, that comments can also make code more difficult to understand when not applied properly.
+
+## Events
+
+Events in JavaScript are things like:
+A timer has just finished, a user clicked a button, our page has loaded,
+someone types into an input element or we have just gotten some data from a server.
+When these events happen, we usually want to add some functionality.
+For example, when a user clicks the like button (event), we want to increment the like counter and color the like button blue.
+Or when someone clicks "Close cookies" (event) we want to remove the cookie div.
+
+Lets first try to create some js that waits for 2 seconds and the console.logs out "2 seconds has elapsed!"
+
+In JavaScript we use an _event listener_ to listen:
+
+```javascript
+setTimeout(function () {
+ console.log("2 seconds has elapsed!");
+}, 2000);
+
+// Cool, now lets make a function as a variable:
+const fourSecondLog = function () {
+ console.log("4 seconds has elapsed!");
+};
+
+setTimeout(fourSecondLog, 4000);
+```
+
+Now lets try and log out "button clicked!" when a button is clicked.
+
+To check if a button gets clicked we use a what is called an _event listener_.
+
+Imagine a person listening to the click of a button and every time he hears a click he yells out "CLICKED".
+
+```javascript
+const buttonElement = document.querySelector("button");
+buttonElement.addEventListener("click", function () {
+ console.log("Button clicked!");
+});
+
+const buttonClicked = function () {
+ console.log("Button clicked as a variable!");
+};
+// Cool man! Lets try and add that function as a variable.
+buttonElement.addEventListener("click", buttonClicked);
+```
diff --git a/courses/Foundation/intro-to-frontend/week1/assets/carGenerator.js b/courses/Foundation/intro-to-frontend/week1/assets/carGenerator.js
new file mode 100644
index 00000000..d2c613ef
--- /dev/null
+++ b/courses/Foundation/intro-to-frontend/week1/assets/carGenerator.js
@@ -0,0 +1,42 @@
+/**
+ * Get random integer between two numbers, found here: https://stackoverflow.com/a/7228322
+ * @param {integer} min - The min number
+ * @param {integer} max - The max number
+ * @returns {Number} Random number between min and max
+ */
+function randomIntFromInterval(min, max) {
+ return Math.floor(Math.random() * (max - min + 1) + min);
+}
+
+/**
+ * Get an array with car objects with random color and speed
+ * @param {integer} numberOfCars - The number of cars
+ * @returns {array} Array containing the car objects
+ */
+function generateCars(numberOfCars) {
+ const cars = [];
+
+ const carMakes = ["Honda", "BMW", "Fiat", "Skoda", "Volvo"];
+ const carColors = [
+ "lightgrey",
+ "lightcyan",
+ "lightyellow",
+ "lightgreen",
+ "lightcoral",
+ "lightpink",
+ ];
+
+ for (let i = 0; i < numberOfCars; i++) {
+ const car = {};
+ const randomMakeIndex = randomIntFromInterval(0, carMakes.length - 1);
+ const randomColorIndex = randomIntFromInterval(0, carColors.length - 1);
+
+ car.make = carMakes[randomMakeIndex];
+ car.color = carColors[randomColorIndex];
+ car.speed = randomIntFromInterval(0, 100);
+
+ cars.push(car);
+ }
+
+ return cars;
+}
diff --git a/courses/Foundation/intro-to-frontend/week1/assets/giphy-search.gif b/courses/Foundation/intro-to-frontend/week1/assets/giphy-search.gif
new file mode 100644
index 00000000..e61311cd
Binary files /dev/null and b/courses/Foundation/intro-to-frontend/week1/assets/giphy-search.gif differ
diff --git a/courses/Foundation/intro-to-frontend/week1/assets/jsonformatter.PNG b/courses/Foundation/intro-to-frontend/week1/assets/jsonformatter.PNG
new file mode 100644
index 00000000..28ae35c7
Binary files /dev/null and b/courses/Foundation/intro-to-frontend/week1/assets/jsonformatter.PNG differ
diff --git a/courses/Foundation/intro-to-frontend/week1/lesson-plan.md b/courses/Foundation/intro-to-frontend/week1/lesson-plan.md
new file mode 100644
index 00000000..92a7c480
--- /dev/null
+++ b/courses/Foundation/intro-to-frontend/week1/lesson-plan.md
@@ -0,0 +1,210 @@
+# Lesson plan
+
+- Focus on having lots of in class exercises.
+- DON'T teach everything, let the students investigate topics on their own as well!
+- Focus on how to read documentation, google answers and google errors!!
+- Teach towards the students being able to solve the homework
+
+Remember to add the code you wrote in the class to the relevant class branch's class work folder. If the branch has not been created just create and push it :) If you don't have access, write to one from the core team. You can see an example below!
+
+To find examples of what teachers have taught before go to the class branches in the classwork folder, e.g. [class 07](https://github.com/HackYourFuture-CPH/JavaScript/tree/class07/JavaScript1/Week1/classwork)
+
+If you find anything that could be improved then please create a pull request! We welcome changes, so please get involved if you have any ideas!!!
+
+---
+
+- Browser environment
+
+ - HTML vs CSS vs JS
+ - Client vs server
+ - Where is the script tag being loaded
+ - Code debugging
+
+- DOM
+
+ - What is it and what do developers use the DOM for?
+ - DOM manipulation
+ - Get elements
+ - Create elements
+ - Insert elements - let students investigate `appendChild`, `insertBefore`
+ - Element manipulation (`style`, `innerHTML`, `text`)
+ - Document object
+ - [Code inspiration simple](#dom)
+ - [Code inspiration change logo](#change-logo)
+ - Exercises: [Favourite dishes](#favourite-dishes), [podcasts](#podcast), [image inserter](#image-inserter)
+
+- Event listeners - Focus on usage, no explanation of callback
+
+ - Click, mouseover, etc. Explain one and let students investigate another, like mouseover or mousemove
+ - Input Change, input
+ - Event parameter
+ - [Code inspiration](#event-listener)
+ - [Exercise simple](#simple-event-listener)
+ - [Exercise dark mode light mode](#light-mode-dark-mode)
+
+- Fetch (No promise explanation! Focus on usage)
+ - Focus on usage let the students copy the fetch script and use it from there. Promises are out of scope in this module.
+ - [Code inspiration](#fetch)
+ - [Exercise 1](#astronauts-in-space), [exercise 2](#dog-fan-website)
+
+Really try in this class to do short teaching and lots of exercises!
+
+## Flipped classroom videos
+
+[Flipped classroom videos](./preparation.md#flipped-classroom-videos)
+
+## Code inspiration
+
+### DOM
+
+```js
+const eventElement = document.querySelector(".events");
+eventElement.innerHTML = "Soccer training Wednesday";
+eventElement.style.backgroundColor = "blue";
+console.log(eventElement);
+
+const div = document.createElement("div");
+div.innerHTML = "new div";
+
+const body = document.querySelector("body");
+body.appendChild(div);
+```
+
+### Change logo
+
+```js
+function changeLogo() {
+ let logo = document.getElementById("logo");
+ logo.src =
+ "https://assets.fontsinuse.com/static/use-media-items/15/14246/full-2048x768/56fc6e1d/Yahoo_Logo.png?resolution=0";
+
+ let newTitle = document.createElement("h1");
+ newTitle.innerHTML = "My new title"; //
My new title
+
+ document.body.appendChild(newTitle);
+}
+
+changeLogo();
+```
+
+### Event listener
+
+```js
+// change the event type
+document.querySelector("button").addEventListener("click", function (event) {
+ // what does the event do?
+ console.log(event);
+ body.style.backgroundColor = "red";
+});
+```
+
+### Fetch
+
+```js
+fetch("https://yesno.wtf/api/")
+ .then((response) => response.json())
+ .then((yesOrNoData) => {
+ console.log(yesOrNoData);
+ // HERE IS WHERE YOU WRITE YOUR CODE!!!!!!!!
+ });
+```
+
+## Exercises
+
+### Favourite dishes
+
+Create an array of strings with your favourite dishes.
+
+With js select a `ul` in the DOM. You add the `ul` to the html file.
+
+Now loop through each element of the favourite dishes array, you create an `li` element and set the text to the favourite dish.
+
+Then append the `li` element to the `ul` element.
+
+### Podcast
+
+```js
+const podcasts = [
+ {
+ name: "The mystery om of Johan Klausen Varbourg",
+ imageUrl: "https://picsum.photos/536/354",
+ },
+ {
+ name: "Tips about dogs with small legs",
+ imageUrl: "https://picsum.photos/536/354",
+ },
+ {
+ name: "You, me, we and us",
+ imageUrl: "https://picsum.photos/536/354",
+ },
+ {
+ name: "Breakfast news - Dinner edition",
+ },
+];
+```
+
+1. Create a `ul`
+2. Loop through the podcasts
+3. For every podcast:
+ 1. Create an `li`
+ 2. Create an `h1` element
+ 3. Change the innerHTML of the `h1` to equal the name of the current podcast
+ 4. Append the `h1` to the `li`
+ 5. Now add an image to the `li` with the `src` set to the `imageUrl`. But only if the `imageUrl` key exists on the object!
+4. Append the `li` to the `ul`
+
+### Image inserter
+
+Create a function that has two parameters: `imageUrl` and `elementToAppendImageTo`. The function should create an img tag and set the `src` attribute of the img to the `imageUrl` parameter. The function should then append the `img` to the `elementToAppendImageTo` - html element.
+
+```js
+// Should append a img tag to the body with the picture from 'https://picsum.photos/536/354'
+notThisFunctionName(
+ "https://picsum.photos/536/354",
+ document.querySelector("body"),
+);
+```
+
+### Simple event listener
+
+When clicking a button, change the text on the button to say "Button clicked"
+
+### Light mode dark mode
+
+Clicking a button should toggle the background color of the body and the text color in the page.
+If the background is white and the text is black, then clicking the button will make the background dark and the text white and vice versa
+
+_Optional_ also make the text on the button change.
+
+### Astronauts in space
+
+Use [this api](http://api.open-notify.org/astros.json) to fetch how many astronauts are currently in spaces.
+
+Add the following text to the DOM, using the data about astronauts:
+
+```text
+There are NUMBER_OF_ASTRONAUTS astronauts in space, they are:
+ASTRONAUT_NAME1
+ASTRONAUT_NAME2
+ASTRONAUT_NAME3
+ASTRONAUT_NAME4
+ASTRONAUT_NAME5
+```
+
+An example with 2 astronauts could be:
+
+```text
+There are 2 astronauts in space, they are:
+Benjamin Hughes
+Jørgen Pedersen
+```
+
+### Dog fan website
+
+Let's create a site for dog lovers using this API:
+
+1. Get a random dog image and display it in the browser
+2. Get a new image every 2 sec.
+3. Get the list of all breeds from
+4. Display a random image of a breed from the list
+5. Display the name of the breed under the image
diff --git a/courses/Foundation/intro-to-frontend/week1/optional-homework.md b/courses/Foundation/intro-to-frontend/week1/optional-homework.md
new file mode 100644
index 00000000..6b23e733
--- /dev/null
+++ b/courses/Foundation/intro-to-frontend/week1/optional-homework.md
@@ -0,0 +1,189 @@
+# Optional Homework
+
+> [!WARNING]
+> These are optional homework exercises that you can complete on top of your [assignment project](../../assignment-projects/), if you wish. There is no requirement for these to be reviewed, but feel free to ask a mentor if you wish for some feedback.
+
+## So why this homework?
+
+**Interacting with the DOM is a crucial part** of building a website. If we cannot interact with the DOM then the javascript we write cannot change what we see in the browser. **Connecting javascript to the browser opens up a new world of possibilities** where only the imagination is the limiting factor.
+
+## Overview of homework
+
+## 1. Problem solving cardio
+
+Lets exercise our problem solving abilities!
+
+
+
+### 1.1. codeWars!
+
+Complete these Katas:
+
+- [8kyu Remove First and Last Character](https://www.codewars.com/kata/56bc28ad5bdaeb48760009b0)
+- [8kyu Counting sheep...](https://www.codewars.com/kata/54edbc7200b811e956000556)
+- [7kyu String ends with?](https://www.codewars.com/kata/51f2d1cafc9c0f745c00037d)
+- [7kyu Odd or Even?](https://www.codewars.com/kata/5949481f86420f59480000e7)
+
+### 1.2. Find and count the Danish letters
+
+Find the individual number and the total number of Danish letters in a string.
+
+```js
+const danishString = "Jeg har en blå bil";
+notThisFunctionName(danishString); // returns {total: 1, å: 1}
+
+const danishString2 = "Blå grød med røde bær";
+notThisFunctionName(danishString2); // returns {total: 4, æ: 1, ø: 2, å: 1}
+```
+
+## 2. Spirit animal name generator
+
+Let's create a page where **a user writes his name** in an input element. The user then clicks a button. The user will now **receive a spirit animal name**, e.g. Benjamin - The full moon wolf.
+
+### 2.1. Markup time!
+
+Create an input element, a button and a tag to display the spirit animal into.
+
+### 2.2. Setting up the events
+
+When the user clicks the button, get the name the user wrote in the input field.
+
+### 2.3. Spirit animal part
+
+Now we can get the users name, next step is to **add the spirit animal string** and display that the users name, a dash and then the spirit animal. e.g. Name: Peter: Peter - The crying butterfly
+For creating the spirit animal create an array with 10 string representing spirit animals. Now get a random item in the array that will represent the spirit animal.
+
+### 2.4. New spirit animal
+
+Now a user tells us that he wants a new spirit animal. No problem we say. Let's create functionality where a user can press a button and then get a new spirit animal.
+
+### 2.5. No input
+
+What if the user clicks the generate new spirit animal and there is no text in the input?
+
+### 2.6. Event types - _Optional and a little tricky_
+
+Give the user the possibility to select **when the spirit animal should be created**. Should it be when the user clicks the button or when the user hovers the input field or when text is written in the input field?
+
+How can we give a user multiple options to select from in html? Maybe time for google!
+
+An example is: A user select that she only wants to generate a spirit animal when the input is hovered. That means that if the user writes her name in the input and clicks the button nothing happens. BUT when she hovers the input, NOW a new spirit animal is generated.
+
+
+
+## 3. hyfBay - get the okay'est products here
+
+We have been **hired for a company** to do a SPA - Single Page App for them. It is a website where a user can search for products. The products can also be **filtered and sorted** based on what products the user wants to see.
+
+We are going to be building this website step by step, so have patience :)
+
+### 3.1. Lets get started!
+
+In the [optional-homework/hyf-bay folder](optional-homework/hyf-bay) there is a project template you should continue working on. So copy all the files into your `hyf-homework/javascript/javascript2/week1` folder.
+
+The `index.html` is very basic. It simply loads two javascript files and include some css. The two javascript files are `hyfBayHelpers.js` and the `main.js`. `hyfBayHelpers.js` contains a function (`getAvailableProducts`) that we can use to get an array of products. In the `main.js` we will be writing all our code!
+
+### 3.2. Requirements
+
+- Using the `getAvailableProducts` array we will render an html list of products
+- The list should contain `title`, `price` and `rating`
+- The list of products should be generated through calling a function called `renderProducts(products)`
+
+#### Example
+
+```js
+const products = getAvailableProducts();
+
+function renderProducts(products) {
+ // your code here
+}
+
+renderProducts(products); // This should create the ul and the li's with the individual products details
+```
+
+So after calling the `renderProducts` function, the output should be like the output you can see here:
+
+#### So how can I do that?
+
+Here is a possible way to render the products
+
+1. In the html create a `ul` that will contain all the products. Select that `ul` using `document.querySelector`
+2. For each `product` in the `products` array:
+ 1. [create an `li`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement)
+ 2. Set the innerHTML of that `li` to the contain the title, price and rating
+ 3. [Append the `li`](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild) to the `ul`
+
+## 4. Weather app
+
+Lets create a **weather app** that based on a **users location** can find the relevant weather for that user.
+
+If you get stuck, read up on [fetch](https://javascript.info/fetch) and [JSON](https://javascript.info/json).
+
+### Sign up for api key
+
+Go to and **sign up for an api key**. This key we will use for getting access to the weather api.
+
+### First call to the weather api
+
+We are going to be using the current weather api:
+
+To get some data from the api go to , where `YOUR_APP_ID` is substituted with the key you signed up for in the first step.
+
+If you go to the [above url](https://api.openweathermap.org/data/2.5/weather?q=copenhagen&appid=YOUR_APP_ID) and see some weather json data then congrats 🎉.
+
+If not, try and **read the error 💻** and see if you can figure out what went wrong. Or ask in the slack group :)
+
+### Fetch weather data from a city
+
+Create a javascript file and an html file and import the javascript file in the html file.
+
+**Fetch weather json data** from the api using a city a user has specified: Add an **input element** and **a button** to the html. When the button is clicked, get the text from the input (which should be a city name) and fetch the relevant weather data from that city.
+
+Remember to show some **loading text**. What if a user **writes nothing in the input?**
+
+### Display the data
+
+This data should be showed in your app:
+
+- The chosen city
+- Temperature
+- Icon for the weather type
+- Wind speed
+- How cloudy it is
+- When sunrise and sunset is
+- _Optional_ a map showing where the city is located
+
+You decide how the data should be displayed. You could maybe be inspired by googling for "weather app ui".
+
+### Your feature here
+
+Now its your time to **come up with a feature**. No matter how big or small.
+
+### Use my current position _optional_
+
+Investigate the [geo location api](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API). Add a button to your page, clicking this button will **get the users current position**. Use that position to fetch weather data from that position.
+
+Hint: We have to change the weather api url, so we are not using city but position. Look into the documentation!
+
+### Save my location _optional_
+
+Imagine if a user did not have to either write a city or click the get my position button, but could just save the location. Lets do that!
+
+When a user has gotten a location through either the input element or the geo location api, save that location using [localstorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). Localstorage is a **way to save data** even when you close the browser.
+
+Now when loading the page and there is a city in the localstorage, use that to get the current weather.
+
+
+
+## 5. Giphy api
+
+Create a site where a **user can search for any word**. When searching a word the application will **find a gif** using the **searched word** using the giphy api:
+Here is how it is going to work: The user can write some text indicating the gif he is looking for, click a button and then a gif will be found (using the searched word) and the gif will be displayed to the user.
+
+Add an input element, where the user can specify how many gif results the user wants.
+
+Try break this problem into **smaller problems** and write down how you are going to solve the problem **BEFORE you start coding.**
+
+If you get stuck, read up on [fetch](https://javascript.info/fetch) and [JSON](https://javascript.info/json).
+
+
diff --git a/courses/Foundation/intro-to-frontend/week1/optional-homework/hyf-bay/hyfBayHelpers.js b/courses/Foundation/intro-to-frontend/week1/optional-homework/hyf-bay/hyfBayHelpers.js
new file mode 100644
index 00000000..a981c968
--- /dev/null
+++ b/courses/Foundation/intro-to-frontend/week1/optional-homework/hyf-bay/hyfBayHelpers.js
@@ -0,0 +1,72 @@
+/* DON'T MODIFY ANY OF THIS CODE!!! */
+
+window.getAvailableProducts = function () {
+ function getRandomInt(min, max) {
+ min = Math.ceil(min);
+ max = Math.floor(max);
+ return Math.floor(Math.random() * (max - min + 1)) + min;
+ }
+
+ function getRandomItem(availableProductNames) {
+ return availableProductNames[
+ getRandomInt(0, availableProductNames.length - 1)
+ ];
+ }
+
+ function getRandomProductName() {
+ const preWords = [
+ "Used",
+ "Fantastic",
+ '"Used"',
+ "Broken",
+ "Beautiful",
+ "Wet",
+ "Green",
+ "Sloppy",
+ "Dirty",
+ ];
+ const productNames = [
+ "Carrot",
+ "Drone",
+ "Giftcard",
+ "Puppy",
+ "Car",
+ "Shirt",
+ "Milk",
+ "Chalk",
+ "Fish fingers",
+ "Socks",
+ "Chocolate",
+ "Toothbrush",
+ "Computer",
+ "Nokia",
+ "Cologne",
+ ];
+
+ let chosenProductName = getRandomItem(productNames);
+ const shouldHavePreWord = getRandomInt(0, 10) > 6;
+
+ if (shouldHavePreWord) {
+ const preWord = preWords[getRandomInt(0, preWords.length - 1)];
+ chosenProductName = `${preWord} ${chosenProductName}`;
+ }
+
+ return chosenProductName;
+ }
+
+ const numberOfAvailableProducts = getRandomInt(0, 30);
+ const availableProducts = Array.apply(
+ null,
+ Array(numberOfAvailableProducts),
+ ).map(() => {
+ const name = getRandomProductName();
+ return {
+ id: `${name}${getRandomInt(0, 100000)}`,
+ name,
+ price: getRandomInt(0, 10000),
+ rating: getRandomInt(1, 10),
+ };
+ });
+
+ return availableProducts;
+};
diff --git a/courses/Foundation/intro-to-frontend/week1/optional-homework/hyf-bay/index.html b/courses/Foundation/intro-to-frontend/week1/optional-homework/hyf-bay/index.html
new file mode 100644
index 00000000..07f60fe4
--- /dev/null
+++ b/courses/Foundation/intro-to-frontend/week1/optional-homework/hyf-bay/index.html
@@ -0,0 +1,14 @@
+
+ HyfBay
+
+
+
+
+
+
+
+
+
diff --git a/courses/Foundation/intro-to-frontend/week1/optional-homework/hyf-bay/main.css b/courses/Foundation/intro-to-frontend/week1/optional-homework/hyf-bay/main.css
new file mode 100644
index 00000000..9f6b12f1
--- /dev/null
+++ b/courses/Foundation/intro-to-frontend/week1/optional-homework/hyf-bay/main.css
@@ -0,0 +1,20 @@
+body {
+ font-family: "Open Sans", sans-serif;
+ background-color: #f9fbfd;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+body,
+h1,
+h2 {
+ margin: 0;
+}
+
+ul {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
diff --git a/courses/Foundation/intro-to-frontend/week1/optional-homework/hyf-bay/main.js b/courses/Foundation/intro-to-frontend/week1/optional-homework/hyf-bay/main.js
new file mode 100644
index 00000000..e584d34c
--- /dev/null
+++ b/courses/Foundation/intro-to-frontend/week1/optional-homework/hyf-bay/main.js
@@ -0,0 +1,4 @@
+console.log("Script loaded");
+
+const products = getAvailableProducts();
+console.log(products);
diff --git a/courses/Foundation/intro-to-frontend/week1/preparation.md b/courses/Foundation/intro-to-frontend/week1/preparation.md
new file mode 100644
index 00000000..44f6962e
--- /dev/null
+++ b/courses/Foundation/intro-to-frontend/week1/preparation.md
@@ -0,0 +1,15 @@
+# Preparation
+
+- [Basic DOM manipulations (img src, innerHTML)](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/DOM_manipulation.md) (5 min)
+- [Code Debugging Using the Browser](https://javascript.info/debugging-chrome) (5 min)
+- [Code commenting](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/code_commenting.md) (2 min)
+- [Attaching an event](https://www.w3schools.com/jsref/met_element_addeventlistener.asp) (5 min)
+
+_Please go through the material and come to class prepared!_
+
+## Flipped classroom videos
+
+- [Executing Javascript in the browser environment](https://youtu.be/k8PEyCe3vK0)
+- [Interacting with the DOM using Javascript](https://youtu.be/YvHQIaKtOl8)
+- [DOM event listeners using Javascript](https://youtu.be/DwzApTvTngI)
+- [Fetching data from API using fetch - Javascript](https://youtu.be/pL_zEzunBKU)