**Interacting with the DOM is a crucial part** of building a website. If we cannot interact with the DOM and the javascript we write cannot be used in a browser. **Connecting javascript to the browser opens up a new world of possibilities** where only the imagination is the limiting factor.

- Find the shortest word

- Find and count the Danish letters

Lets exercise our problem solving abilities!


Write a function that finds the shortest word of an array of words

notThisFunctionName(danishWords); // returns 'ø'

Find the individual number and the total number of Danish letters in a string.

notThisFunctionName(danishString2); // returns {total: 4, æ: 1, ø: 2, å: 1}

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**, fx Benjamin - The fullmoon wolf.

Create an input element, a button and a tag to display the spirit animal into.

When the user clicks the button, get the name the user wrote in the input field.

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. Fx 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.

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.

What if the user clicks the generate new spirit animal and there is no text in the input?

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?


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 :)

In the [homework/hyf-bay folder](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!

- 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)`

const products = getAvailableProducts();

So after calling the `renderProducts` function, the output should be like the output you can see here: https://codesandbox.io/s/hyf-bay-first-week-oml13

Here is a possible way to render the products

Javascript is getting difficult now and we are aware of that! Take some time to appreciate how far you have come that last 6 weeks. Instead of comparing yourself to others, compare yourself to where you were a some time ago. If you are seeing progress then you are doing it right 💪

- Doubling the number

- ⭐ Working with movies

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

- Try watch this video: https://www.youtube.com/watch?v=Urwzk6ILvPQ

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

- Read up on array functions [here](https://github.com/HackYourFuture-CPH/JavaScript/blob/main/javascript2/week2/readme.md#array-methods-map-filter-and-sort)

Say you would like to write a program that **doubles the odd numbers** in an array and **throws away the even number**.

Rewrite the above program using `map` and `filter` don't forget to use arrow functions.


8. Calculate the **average rating** of all the movies using [reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce). _Optional_

9. **Count the total number** of Good, Average and Bad movies using [reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce). A return could fx be `{goodMovies: 33, averageMovies: 45, goodMovies: 123}` _Optional_

**Continue work on your homework regarding the Hyfbay** from previous week. Please copy the files from last week into this weeks `hyf-homework` folder and continue working there. If you have not made last weeks homework the solution for it is included in [this weeks homework folder](homework/hyf-bay) in the `main.js` file.

A very normal usecase for a product site is that a **user wants to search for some product** or find products that are cheaper than a set price. Lets implement that functionality for a user!

2. `.filter` on the products array

3. `renderProducts` with the filtered array

A user needs to search for products. That means that we need to add an input element to the html.


Lets help a user to find cheap products! When the **user writes a maximum price** the products should be filtered to match that maximum price

_Hint: Break this task into smaller tasks!_


The website looks awful now, **but** luckily you have had css and html and know exactly what it takes to make this website shine!

Improve it how you see fit. Maybe add a footer, header, logo, title, styling, responsivity. Whatever you feel like would improve the site!

No matter how small or how big. Create some feature that would be **cool/helpful/quirky/funny**.

This task is more open ended! So you need to come up with fx how the user should interact with the functionality.

We want you to realise that **functions are just variables** in javascript. It is exactly the same as string or a number. This homework forces you into using functions in weird ways that forces you to think differently about functions.

- ⭐ Create a function to make delay in logging out text

- calling a function within a function

- ⭐ Log out location

- Implement runAfterDelay function

- Simulate double click with click event

- Implement joke creator

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

9. Create a function called `jokeCreator` that has three parameters: `shouldTellFunnyJoke` - boolean, `logFunnyJoke` - function and `logBadJoke` - function. If you set `shouldTellFunnyJoke` to `true` it should call the `logFunnyJoke` function that should log out a funny joke. And vice versa.

Create funtions that are used in these different ways:


Lets create a fun simple game :)

4. **Keep a counter** for how many times `l` and `s` was pressed.

5. **Now put it all together!** After the timeout is done figure out which of the counters is largest. Give some kind of feedback to the users indicating who won.

1. **Start a new game** functionality. Create some functionality so that the users can restart a game.

2. Try and give the site some **styling so it looks nice** :)

- What if no time was specified for the game?

- What if there were no key presses before the game ends?

If you wanna give the game some confetti like in the gif, check out [this library](https://www.npmjs.com/package/confetti-js)