# 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. ![second task](https://1850235804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fv5mADMeH7axh0TSGyUQy%2Fuploads%2Fgit-blob-6baafce96180e7f7b510946c79992f891b8d7d7a%2Fcarbon.png?alt=media) 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. ![second task](https://1850235804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fv5mADMeH7axh0TSGyUQy%2Fuploads%2Fgit-blob-073f2f4d6d7c3007360d9f6173ebfe12536fc517%2Fbutton-delay.gif?alt=media) 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. ![second task](https://1850235804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fv5mADMeH7axh0TSGyUQy%2Fuploads%2Fgit-blob-df5cf3f3426802e417e7156be19ea8288c84f033%2Fplanet-log.png?alt=media) 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). ![second task](https://1850235804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fv5mADMeH7axh0TSGyUQy%2Fuploads%2Fgit-blob-9fd98bc65988d1ff3eee92dc892946f174e685c8%2Flog-location.gif?alt=media) 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. ![second task](https://1850235804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fv5mADMeH7axh0TSGyUQy%2Fuploads%2Fgit-blob-3e107e2c37fce896718b14ea12c1b2324025dfed%2Frun-after-delay.png?alt=media) 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 🎉 ![phew](https://media.giphy.com/media/EDt1m8p5hqXG8/giphy.gif) ## 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: ![Fastest presser game demo](https://1850235804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fv5mADMeH7axh0TSGyUQy%2Fuploads%2Fgit-blob-72226655b1be6af41aaae02d96dcced9a78e1e4c%2Ffastest-clicker.gif?alt=media) 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 ```