Speed Typing Game

Project Overview


The objective for this project was to develop an easy and competitive speed typing game that essentially tests the user’s typing skills as in how many words they can type out in under 30 seconds of time. The game is simple, the user would start the game by clicking the “START” button which will then display a given word that the user would have to type out. 



This is the starting screen of the speed typing game. The screen displays a simple instructions modal that gives a small insight of what the game is about and how to play which I created using the Bootstrap card attribute for a div class. Right below, we have the main content, firstly with the “START” button, which would call a function to begin the game by providing a given word to type out and start the 30 second timer once the user clicks the button. The functions that are being called by this button includes 2 specific actions. 1 function of starting the timer which is encoded by JavaScript by creating a simple variable to set the interval of 30 and to decrease by 1 every second. This function also creates a space section for the area that the words will be generated below. The second function would be essentially pulling the words from a separate JavaScript file that is filled with words in an array and is being randomly selected and displayed on screen throughout this function. 


This is the main section, essentially the typing or playing screen where all the action would take place. When the user clicks “START”, the word will be provided right below as mentioned and the user would then need to correctly type out the word to gain a point, which will be added on the score counter on the left side. The background color behind the given word will change to a light purple color if the user is entering the correct letter of the word, and would generate a new word when the user has successfully typed out the word. 


This is the game ending screen for the speed typing game, which is a simple alert screen that displays the number of words that the user has successfully typed in under 30 seconds. This function is being generated through the timer function which is essentially the countdown timer function. When the timer hits the 0 second, the page will alert with a pop up and get the score data from the variable that is counting the number of words that were successfully entered. 

Scroll to top