Build a Simple React JavaScript Interactive Interactive Text-Based Typing Speed Test: A Beginner’s Guide

Written by

learnmodernjavascript

in

Are you a developer looking to sharpen your skills? Or perhaps you’re simply curious about how fast you can type? In this tutorial, we’ll build a fun and engaging React-based typing speed test. This project is perfect for beginners and intermediate developers, providing a practical way to learn React concepts while creating something useful. We’ll cover everything from setting up your React environment to displaying results and handling user input. By the end, you’ll have a fully functional typing speed test application and a solid understanding of React fundamentals.

Why Build a Typing Speed Test?

Typing speed is a crucial skill in the digital age. Whether you’re coding, writing emails, or creating content, the faster you type, the more productive you become. This project offers a tangible way to improve your typing skills. It also serves as an excellent learning tool for React, allowing you to practice component creation, state management, event handling, and conditional rendering. Plus, it’s a lot of fun!

Prerequisites

Before we begin, make sure you have the following:

  • A basic understanding of HTML, CSS, and JavaScript.
  • Node.js and npm (or yarn) installed on your system.
  • A code editor (e.g., VS Code, Sublime Text).

Setting Up Your React Project

First, let’s create a new React project using Create React App. Open your terminal and run the following command:

npx create-react-app typing-speed-test
cd typing-speed-test

This command sets up a new React project named “typing-speed-test” and navigates you into the project directory. Next, start the development server:

npm start

This will open your app in your browser at http://localhost:3000.

Project Structure and Component Breakdown

Our typing speed test will consist of several components. Here’s a basic overview:

  • App.js: The main component that renders all other components and manages the overall state of the application.
  • TextDisplay.js: Displays the text the user needs to type.
  • TextInput.js: Handles user input.
  • Results.js: Displays the typing speed results.

Building the TextDisplay Component

Let’s start by creating the TextDisplay component. This component will display the text the user needs to type. Create a new file named TextDisplay.js inside the src directory and add the following code:


import React from 'react';

function TextDisplay({ text }) {
  return (
    <div className="text-display">
      <p>{text}</p>
    </div>
  );
}

export default TextDisplay;

In this component, we receive the text to be displayed as a prop. We then render it within a <p> tag. Next, let’s style it a bit. Add the following CSS to src/App.css:


.text-display {
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 5px;
  margin-bottom: 20px;
  text-align: center;
}

Creating the TextInput Component

Now, let’s create the TextInput component. This component will handle user input and track the typed text. Create a new file named TextInput.js in the src directory and add the following code:


import React from 'react';

function TextInput({ onTextChange, inputText }) {
  return (
    <div className="text-input">
      <input
        type="text"
        onChange={onTextChange}
        value={inputText}
        placeholder="Start typing here..."
      />
    </div>
  );
}

export default TextInput;

This component includes an input field. We pass two props: onTextChange (a function to handle input changes) and inputText (the current text in the input). Let’s add some CSS to src/App.css:


.text-input {
  margin-bottom: 20px;
}

.text-input input {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

Building the Results Component

Next, let’s create the Results component. This component will display the user’s typing speed results. Create a new file named Results.js in the src directory and add the following code:


import React from 'react';

function Results({ wpm, accuracy }) {
  return (
    <div className="results">
      <h3>Results:</h3>
      <p>WPM: {wpm}</p>
      <p>Accuracy: {accuracy}%</p>
    </div>
  );
}

export default Results;

This component receives wpm (words per minute) and accuracy as props and displays them. Add the following CSS to src/App.css:


.results {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

Connecting the Components in App.js

Now, let’s bring everything together in App.js. Replace the contents of src/App.js with the following code:


import React, { useState, useEffect, useRef } from 'react';
import './App.css';
import TextDisplay from './TextDisplay';
import TextInput from './TextInput';
import Results from './Results';

function App() {
  const [text, setText] = useState('');
  const [inputText, setInputText] = useState('');
  const [startTime, setStartTime] = useState(null);
  const [endTime, setEndTime] = useState(null);
  const [wpm, setWpm] = useState(0);
  const [accuracy, setAccuracy] = useState(0);
  const textRef = useRef('');

  // Sample text for the typing test
  const sampleText = "The quick brown fox jumps over the lazy dog.";

  useEffect(() => {
    textRef.current = sampleText;
    setText(sampleText);
  }, []);

  const handleTextChange = (event) => {
    setInputText(event.target.value);

    if (!startTime) {
      setStartTime(new Date());
    }

    // Calculate accuracy
    let correctChars = 0;
    for (let i = 0; i < event.target.value.length; i++) {
      if (event.target.value[i] === textRef.current[i]) {
        correctChars++;
      }
    }
    const accuracyCalc = (correctChars / event.target.value.length) * 100;
    setAccuracy(isNaN(accuracyCalc) ? 0 : accuracyCalc);

    // Calculate WPM
    if (event.target.value === textRef.current) {
      setEndTime(new Date());
      calculateWpm();
    }
  };

  const calculateWpm = () => {
    if (startTime && endTime) {
      const timeInSeconds = (endTime - startTime) / 1000;
      const words = text.split(' ').length;
      const wpmCalc = Math.round((words / (timeInSeconds / 60)));
      setWpm(wpmCalc);
    }
  };

  return (
    <div className="app">
      <TextDisplay text={text} />
      <TextInput onTextChange={handleTextChange} inputText={inputText} />
      <Results wpm={wpm} accuracy={accuracy} />
    </div>
  );
}

export default App;

Let’s break down what’s happening in App.js:

  • State Variables: We use useState hooks to manage the text to be typed (text), user input (inputText), start and end times, WPM (words per minute), and accuracy.
  • Sample Text: We define sampleText, the text the user will type.
  • useEffect Hook: This hook ensures the sample text is set when the component mounts. We use a useRef to store the sample text to avoid re-renders.
  • handleTextChange Function: This function is called every time the user types. It updates the inputText state, calculates accuracy, and starts the timer. If the user has finished typing, it calculates the WPM.
  • calculateWpm Function: Calculates the words per minute based on the start and end times and the length of the text.
  • Rendering: We render the TextDisplay, TextInput, and Results components, passing the necessary props.

Add the following CSS to src/App.css to style the main app container:


.app {
  max-width: 600px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-family: Arial, sans-serif;
}

Handling User Input and Calculating Results

The handleTextChange function is the core of the application. It does the following:

  • Updates the inputText state with the user’s input.
  • Starts the timer when the user begins typing.
  • Calculates the accuracy by comparing the typed text with the original text.
  • If the user has finished typing, it calculates the WPM and sets the end time.

The calculateWpm function computes the words per minute using the start and end times and the length of the text. It only calculates WPM if both start and end times are available.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • Incorrect State Updates: Make sure you are correctly updating the state variables using the set... functions provided by useState. Incorrect state updates can lead to unexpected behavior and bugs.
  • Timer Issues: Ensure the timer is started only once and that the end time is correctly set when the user finishes typing. Double-check your logic for starting and stopping the timer.
  • Accuracy Calculation Errors: Accurately calculate the accuracy by correctly comparing the user’s input with the original text. Consider edge cases, such as the user typing fewer characters than the original text.
  • Component Re-renders: Excessive re-renders can slow down your app. Use React.memo or useMemo where appropriate to optimize component performance.
  • Incorrect Text Comparison: Make sure you are correctly comparing the typed text with the original text. Case sensitivity and extra spaces can cause incorrect results. Consider trimming the input text to remove extra spaces.

Enhancements and Next Steps

Here are some ideas to enhance your typing speed test:

  • Add a timer: Display a countdown timer to show how much time the user has.
  • Implement different difficulty levels: Allow users to choose different text lengths or text complexity.
  • Add error highlighting: Highlight incorrect characters in the user’s input.
  • Save and display the user’s history: Store and display the user’s past scores.
  • Implement a reset button: Allow the user to reset the test and start again.
  • Make it mobile-responsive: Ensure the app looks good on different screen sizes.
  • Use external text sources: Fetch text from an API to provide a variety of texts for the user to type.

Key Takeaways

In this tutorial, you’ve learned how to build a basic typing speed test using React. You’ve learned how to manage state, handle user input, and display results. You’ve also learned about component structure, event handling, and conditional rendering. This project provides a solid foundation for understanding React and building more complex applications. Remember to practice these concepts and experiment with different features to deepen your understanding.

FAQ

Q: How can I improve the accuracy calculation?

A: Ensure you’re comparing the user’s input character by character with the original text. You can also trim the user’s input to remove extra spaces at the beginning or end.

Q: How can I add a reset button?

A: Add a button that resets all state variables to their initial values: inputText to an empty string, startTime and endTime to null, and wpm and accuracy to 0.

Q: How can I implement different difficulty levels?

A: Create a dropdown menu or buttons that allow the user to select the text length or complexity. Based on the selected level, fetch or generate a different text for the user to type.

Q: How can I highlight incorrect characters?

A: Compare the user’s input with the original text character by character. If a character doesn’t match, apply a different style (e.g., red background) to that character in the TextDisplay component.

Q: How can I make the app mobile-responsive?

A: Use CSS media queries to adjust the layout and font sizes for different screen sizes. Consider using a responsive CSS framework like Bootstrap or Tailwind CSS.

With the knowledge gained from this project, you’re well-equipped to tackle more complex React applications. The ability to break down a project into components, manage state, and handle user interaction is fundamental to any React developer. The principles you’ve learned here, from state management to component composition, are applicable to a wide range of projects. Continue to explore and experiment with React, and you’ll find yourself building increasingly sophisticated and engaging web applications.

More posts