Skip to content

assignment.md

Latest commit

 

History

History
94 lines (55 loc) · 5.87 KB

assignment.md

File metadata and controls

94 lines (55 loc) · 5.87 KB
Raw

Assignment

1. Codewars!

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

  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

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

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

second task

  1. Optional Now show that location on a map using e.g. the Google maps api

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

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

  2. 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:

Yes I know that was a little tough, now on to the fun part 🎉

phew

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

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

Use the library in your page by adding this line before you load your main.js:

<script src="https://cdn.jsdelivr.net/npm/confetti-js@0.0.13/dist/index.min.js"></script>