Practice project to stay sharp: React Typing Game (Part 1)
I can’t stay sharp if I’m not practicing.
As time progresses, the information I learned in class, during practice exercises, and through personal projects slowly dissipates. For me, continuing to create small projects — even simple ones — is the best way to retain material. I am forced to implement the basics and keep a strong foundation. From there, I can expand the difficulty and scope of the project however I like.
My most recent practice project was inspired by Brad Traversy’s typing game tutorial, a part of his Udemy course called “20 Web Projects with Vanilla Javascript.” Though I derived the idea from Brad’s work, I will not be using the styling he created, nor will the words be hard-coded.
I updated the project for use in a React application, and I am making it dynamically playable through the Wordnik API, which allows me to randomly generate a word. This API is a great resource for all of your word-generating needs. It has a ton of customizable endpoints and functionalities — definitions, synonyms, parts of speech, the works! I will illustrate below how I started this project and will follow up in another blog as I style and expand.
To get functionality down first, I ignored styling and got my API calls working according to certain specifications. Before implementing the typing portion, I wanted to test the functionality of the API and set the difficulty constraints according to word length.
Here’s the very barebones display I’m setting up in a component I’m calling WordReceiver.
I created a simple dropdown menu with three difficulty options, which I will associate with different word length responses from Wordnik.
Reminder: Don’t forget to hide your API keys in a .env file placed in gitignore or through similar methods!
In the above code, I attribute the difficulty of words (arbitrarily) based on their length, then make the calls to Wordnik API through that interpolated information saved in state. The user can now choose one of the three levels from the drop down, then click a button to return an easy, medium, or hard word.
Knowing these elements worked, I implemented the typing portion.
I removed the button for generating words and made it a start button, which will now generate the first word in the game. After that, each API call for a new word will be triggered when a user types the word correctly.
This is as simple as comparing the two words — does the API word match the user input. For now, I have the typing portion contained in the same component, but as I expand the project, I will separate my functionality.
Here is all you need for the input information. Make sure you have autocomplete set to off, or you won’t have to finish typing! Also, auto-focus will keep your cursor within the input box and ready for typing.
This typeHandler function is triggered by an input change, which comes from typing. The function then compares whether this captured word matches the word from the API, and if so, resets the input box to empty and calls a new word.
Right now, this game isn’t very fun. But it does require you to get the word right before you are given a new one.
During the next blog, I will explain how I increased complexity of gameplay, separated functionality into various components, added a timer and score-keeper, and got some styling done.
