A basic Typing Game

A simple typing game developed in HTML, CSS and JavaScript

typing game

A simple typing game developed following the lessons and tutorials made available via the Microsoft, Web Dev For Beginners repo on GitHub. Development leverages basic HTML, CSS and JavaScript to allow a user to dynamically place various plants within a virtual terrarium.

This basic typing game presents the user with a input text box, and a start button. Once the user selects the start button, a single quote from Sherlock Holmes, with the first work highlighted. As each word is successfully typed, the next relevant word is highlighted.

image of typing game

An implementation of the typing game is currently hosted as a Static Web App in Azure. A Static Web App was selected, due to the static nature of the front end solution, and the ability to integrate directly with GitHub native workflows to build and deploy the application.

Local Storage is used to store the best completion time, for each specific quote. Upon completion of the quote, a JavaScript function compares the completion time against any existing time for that quote and presents a custom message based on the outcome. Local Storage is used as this is persistant beyond the length of the initial session (when the page is closed).

The source code and related repository for this implementation of the typing game is available on GitHub.