If you struggle to do this weeks homework there are a couple of things to do:

- Try watch this: https://www.youtube.com/watch?v=T-HGdc8L-7w&t=565s

- Watch the class recording. If it for some reason is missing. Then watch these: [part 1](https://www.youtube.com/watch?v=KfEeUcT0PWY), [part 2](https://www.youtube.com/watch?v=jbnKWe92uv4), [part 3](https://www.youtube.com/watch?v=-lqbVK12lWM) [part 4](https://www.youtube.com/watch?v=E3Stsveg4rg)

- Read up on [classes](https://javascript.info/class)

Lets create lots of circles in different sizes and colors on a webpage!

In HTML5 there is an elements called canvas. It **works just like a real canvas.** You can paint elements like lines, circles and much more to the canvas.

First add the `canvas` element to your html. Now draw a circle on the `canvas` using js. Google is your friend here :)

When you have added a normal circle, try filling it out so it has a color. Again google time!

Lets create a class called `Circle`. The circle should be used like this:

const c1 = new Circle(50, 50, 20, 0, 2 * Math.PI, "#000000");

c1.draw();

Where the constructor should look like this: `constructor(x, y, r, startAngle, endAngle, fillColor)`

The circle should have one method: `draw` that **draws the circle to the canvas**. That means that creating an instance of the circle class will not draw the circle. **Drawing the circle** first happens when we **call the draw method.**

Test if the new class works by creating a circle and drawing it to the canvas. Try some different radiuses, positions and fill colors.

Every 100ms create a new circle instance and draw that to the canvas.

The circle should have random `x`, `y`, `radius` and `color`. For giving the `circle` a random color what should we do?? We should google off course!

What if we wanted the canvas to have the same width and height of the screen?

Instead of the circles just randomly appearing on the screen, make them appear around the cursor.

Lets use the github api to see **what repositories different users have**. You can use this url to get repositories for a specific github username, in this case the username `benna100`: `https://api.github.com/search/repositories?q=user:benna100`. Select 3 classmates github username that you want to show repositories for.

Fetch all the 3 classmates repositories **at the same time using Promise.all.** Remember the **all at once** exercise [here?](../week2/homework.md#visual-promise)

When you have the data for the different repositories, **render the fullname** of the repo, **url** of the repo, and **the owner** of the repo. See [github-repos](homework/github-repos.html) as an example of how the renderered repos should look. You are more than welcome to style it a bit nicer!

Let's get a bit more into creating classes!

class Product {

constructor(name, price) {

this.name = name;

this.price = price;

}

}

class ShoppingCart {

constructor() {

this.products = [];

}

addProduct(product) {

// Implement functionality here

}

removeProduct(product) {

// Implement functionality here

}

searchProduct(productName) {

// Implement functionality here

}

getTotal() {

// Implement functionality here

}

renderProducts() {

// Implement functionality here

}

getUser(user) {

// Implement functionality here

}

}

const shoppingCart = new ShoppingCart();

const flatscreen = new Product("flat-screen", 5000);

shoppingCart.addProduct(flatscreen);

So we have two classes. `Product` represents products. `ShoppingCart` represents a shopping cart.

Create the functionality for the `ShoppingCart` class.

- `addProduct` should add a product to the products array.

- `removeProduct` should remove a product from the products array.

- `getTotal` should get the total price of the products in the `shoppingcart`.

- `renderProducts` should render the products to html. You decide what to show and how.

- `searchProduct` should return an array of product that match the `productName` parameter

- `getUser` should return a promise with the data from this api: https://jsonplaceholder.typicode.com/users/1 (replace '1' with correct user).

Try and create some products and call the `addProduct` and the `removeProduct` functions to see if they work.

Call the `getUser` function to get a user. When the user has been fetched. Render the products using the `renderProducts` method. Also render the username and the total price of the products in the `shoppingcart`.

_Optional and a little tricky!_ Create a **searchbar where a user can search for a product.** Matching product are shown as an autocomplete. **Clicking a product** in the autocomplete **opens a modal** with product information.

The `Product` class should get a method called `convertToCurrency`. The function should have `currency` as a parameter. Depending on the **provided currency return the correct price** for the product. Add 3 or more curriencies. Or use an api for getting the price dependent on a currency that `convertToCurrency` uses.

const plant = new Product("plant", 50);

console.log(plant.convertToCurrency("dollars")); // 7.5

Be creative! Create some cool/weird/quirky functionality of either the `Product` class or the `ShoppingCart` class.

<br/>

Need to brush up on the homework hand-in process?<br/>

Check [this resource](https://github.com/HackYourFuture-CPH/Git/blob/main/homework_hand_in.md) to remember how to hand in the homework correctly!

<br/>

We hope that you enjoyed the last module of Javascript. Please fill out the survey [here](https://forms.gle/YhbmqeC1EHaCDV5e7) to give feedback to the mentors and the staff.