# Assignment
## 1. Codewars!
* [7 kyu Product Array (Array Series #5)](https://www.codewars.com/kata/5a905c2157c562994900009d/javascript)
## 2. Functions!
The warmup is a **little abstract**, it will get more concrete later on!
1. Display the text `Called after 2.5 seconds` on the page 2.5 seconds after the script is loaded.
2. Create a function that takes 2 parameters: `delay` and `stringToLog`. Calling this function should display the `stringToLog` on the page after `delay` seconds. Call the function you have created with some different arguments. 
3. Create a button in html. When clicking this button, use the function you created in the previous task to display the text `Called after 5 seconds` on the page 5 seconds after the button is clicked.
4. Create two functions and assign them to two different variables. One function displays `Earth` on the page, the other displays `Saturn`. Now create a new third function that has one parameter: `planetLogFunction`. The only thing the third function should do is call the provided parameter function. Try calling the third function once with the `Earth` function and once with the `Saturn` function.
5. Create a button with the text "Log location". When this button is clicked, display the user's location (latitude, longitude) on the page using this [browser API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API).
6. *Optional* Now show that location on a map using e.g. the [Google maps api](https://developers.google.com/maps/documentation/javascript/tutorial)
7. Create a function called `runAfterDelay`. It has two parameters: `delay` and `callback`. When called the function should wait `delay` seconds and then call the provided callback function. Add an input in the HTML for the delay (in seconds) and a button; when the button is clicked, read the delay from the input and call `runAfterDelay` with that delay and a callback that displays something on the page.
8. Check if the user has double-clicked on the page. A double click is two clicks within 0.5 seconds. If a double click is detected, display the text "double click!" on the page.
9. Create a function called `jokeCreator` that has three parameters: `shouldTellFunnyJoke` (boolean), `logFunnyJoke` (function), and `logBadJoke` (function). If `shouldTellFunnyJoke` is `true` it should call `logFunnyJoke`, which displays a funny joke on the page. Otherwise it should call `logBadJoke`, which displays a bad joke on the page.
## 3. Function as a variable
Create functions that are used in these different ways:
* Create an array with 3 items. All items should be functions. Iterate through the array and call all the functions.
* Create a function as a const and try creating a function normally. Call both functions. You can read more about this in [What is the difference between a function expression vs declaration in JavaScript?](https://stackoverflow.com/questions/1013385/what-is-the-difference-between-a-function-expression-vs-declaration-in-javascrip)
* Create an object that has a key whose value is a function. Try calling this function.
Yes I know that was a little tough, now on to the fun part 🎉
## 4. The fastest presser in this realm
Let's create a fun simple game :)
Here is the setup of the game: **Two users compete** about who can **press a key the most times** within a set time!
A user specifies how long time the game should be, and presses **"start game!"**. When the button is pressed it is about pressing either `l` or `s` on the keyboard. The user that has the highest number of keypresses after the time is up, wins 🎉
Here is a gif of how the site should work:
You can implement it exactly like you want to, but here is my recommended order:
1. **Create an input and a button in html**. When the button is clicked, get the value of the input. This value will be the amount of time the game should run.
2. **Set a timeout for the time specified by the user.** After that time has run out, display a message on the page (e.g. "Time's up!").
3. **Create an event listener** so you can call a function **when any key is pressed**. Now grab the actual key that was pressed. e.g. was it a `j` or an `i`. We are interested in `s` and `l`. Here Google is your friend!
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.
## Optional Assignments
### 5. Extra features
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** :)
3. **Custom feature**. Add something unique to the game! If you don't know how to implement it, just describe what it should do!
4. **Countdown to end of game** - *optional*. Have a countdown that simply counts down until the game is done.
Here are some general things to consider:
* What if a user starts pressing a key before the game is started, what should happen?
* What if the game is a draw? Are both winners? None winners? Maybe indicate to the user that is was a draw.
* What if no time was specified for the game?
* What if there were no key presses before the game ends?
### 6. Confetti
If you wanna give the game some confetti like in the gif, check out [this library](https://www.npmjs.com/package/confetti-js)
Use the library in your page by adding this line before you load your main.js:
```js
```
---
# Agent Instructions: 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:
```
GET https://program.hackyourfuture.dk/course-content/frontend/advanced-javascript/week2/assignment.md?ask=
```
The question should be specific, self-contained, and written in natural language.
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.