You will be working in the index.js file.

Using classes help with structuring code. It is one of many **design patterns**. Second it **connects everything** you have learned in js: functions, properties, methods, keys, arrays.

In HTML5 there is an elements called canvas. It works just like a canvas. You can paint elements 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.

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.

Test if the new class works by creating a circle and drawing it to the canvas.

Every half second create a new circle class and draw that to the canvas.

The circle should have random `x`, `y`, `radius` and `color`.

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.

Get `movies` using this api: https://gist.githubusercontent.com/pankaj28843/08f397fcea7c760a99206bcb0ae8d0a4/raw/02d8bc9ec9a73e463b13c44df77a87255def5ab9/movies.json

Show the movie poster and the title for the first 20 movies from the above api. To get a movie poster for a movie, use this api: https://developers.themoviedb.org/3/getting-started/introduction You need to investigate a bit how to get the poster for a given movie. But help each other in the class and ask questions if you struggle too much.

Think about `promise.all` and using chaining of `.then`.

Here is an example of how the output should be:


hint: This task is difficult, so find someone to work with!

Let's get a bit more into creating classes!

class Product {

constructor(name, price) {

this.name = name;

this.price = price;

class ShoppingCart {

constructor(products) {

this.products = products;

}

addProduct(product) {

// Implement functionality here

}

removeProduct(product) {

// Implement functionality here

}

getTotal() {

// Implement functionality here

}

renderProducts() {

// Implement functionality here

}

getUser() {

// Implement functionality here

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

const shoppingCart = new ShoppingCart([flatscreen]);

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

Create the functionality for the `ShoppingCart` class.

Try and call the `addProduct` and the `removeProduct` functions. Call the `getUser` function to get a user. When the user has been fetched. Render the total price of the Shoppingcar, the username and the products in the shopping cart.

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

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