This is a reaction tester written in Javascript. It is forked from code by Rob Percival from ‘The Complete Web Developer Course’. In the game, the user has to click on different sized shapes to try to beat their fastest reaction time.

For this project I started by creating some simple HTML for the title, intro text, buttons and values along with a containing div for the gameboard.

To make things a little more aesthetic, I styled the background of the gameboard using CSS patterns created by LeaVerou and gave the buttons a flat transparent style.

For the Javascript I began by setting some variables to hold the reaction times then created a makeShape function to create the boxes and an click event handler to log and output the reaction time of the user.

I then developed the game by adding functions which allowed the boxes to be different shapes and sizes and set a random timeout so they would appear after different time intervals.

I also needed the boxes to appear at different sections of the screen and I wanted it to be responsive so the shapes would stay within the gameboard even when the browser was resized. To do this, I used the ‘$(window).width’ function to check the size of the viewport and compared this to the max width of a box which allows the program to calculate where the boxes can legally be placed on any screen width.

Finally, I added a JQuery click handler on the buttons to add/remove classes to make it clear which one was active during the game.