Taken from Create React App documentation: Loader animation based off of W3School's loader SCSS file is converted to CSS using VS Code extension Live Sass Compiler. Fetch API is used and data fetched is in JSON format. This sets the state of App into a loading state and remains that way until the data has been fetched and formatted properly. Words are fetched from free, third-party REST API called Bacon Ipsum.Īt the start of each test, the Start-Button component calls the startTest() function in the App component.

startTest: Function to trigger start of testīutton which when clicked triggers start of test Where do the words come from?.

Also renders the form for the user to type in during the test. Words to be typed along with current word that must be typed.

wordsAfter: All words after the current word that has to be typed.

wordsBefore: All words before the current word that has to be typed.

wordToType: Current word user has to type to be counted towards wordsTyped.

incrementWordsTyped: Function which increments wordsTyped by 1.

User's WPM based on most recent test taken.

testLoading: boolean condition stating whether API data is being fetched.testActive: boolean condition stating whether test is currently in session.wordsTyped: Number of words user has typed during test.wordsList: List of words user has to type.Official link: Basic component structure App

Max's React Typing Speed WPM Test How to useĬlick here, read the instructions, and click start to begin.

Wpm typing speed test