JavaScript/Exercises/ReactionTime

Check your reation time

HTML + CSS
The app shows a grid of 16 green areas. When the game starts, two of these fields change their color to red. Try to click them as fast as possible. Your reaction time is shown at the bottom.

First, we need an HTML file plus CSS to realize the user interface. It shall contain:
 * A caption.
 * A 4 x 4 grid with 16 areas.
 * A button to start the game.
 * A feedback area where the reaction time is shown.

The HTML might look like this:

JavaScript
Next, we have to implement the game's functionality within JavaScript. We need:
 * Variables to store the start and end timestamp.
 * Event handler(s) to react on 'click' events to the areas. It's helpful if all areas use the same event handler instead of having 16 individual event handlers.
 * An event handler to react to the 'Start' button.
 * A function that randomly selects an area and changes its color to red.
 * A function that counts how many areas are red.

The JavaScript part may look like this:

Extensions
You can extend the app in different ways.
 * Make it more complicated by using more areas, smaller areas, or more than two red areas.
 * Show a list of all attempts, possibly sorted by the reaction time.