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

Written by

javascriptdebugged

in

In the digital age, typing proficiency is a valuable skill. Whether you’re a student, a professional, or simply a casual user, the ability to type quickly and accurately can significantly boost your productivity and efficiency. But how do you measure your typing speed? How can you practice and improve? This is where a typing speed test application comes in handy. In this tutorial, we’ll build a simple, interactive typing speed test using React JS. This project is perfect for beginners and intermediate developers looking to hone their React skills while creating something practical and engaging.

Why Build a Typing Speed Test?

Creating a typing speed test offers several benefits:

  • Practical Application: You’ll learn how to build a real-world application that solves a common problem.
  • React Fundamentals: You’ll practice using React components, state management, event handling, and conditional rendering.
  • User Interface (UI) Design: You’ll gain experience in creating a user-friendly interface.
  • Problem-Solving: You’ll tackle challenges like tracking time, calculating words per minute (WPM), and providing feedback to the user.

This project is an excellent way to solidify your understanding of React concepts and build confidence in your ability to create interactive web applications.

Prerequisites

Before we begin, make sure you have the following:

  • Node.js and npm (or yarn) installed: You’ll need these to manage project dependencies.
  • A basic understanding of HTML, CSS, and JavaScript: Familiarity with these languages is essential for understanding the code.
  • A code editor: Visual Studio Code, Sublime Text, or any other editor you prefer.

Setting Up the Project

Let’s get started by creating a new React application using Create React App. Open your terminal and run the following command:

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

This will create a new React project named “typing-speed-test” and navigate you into the project directory. Next, let’s clean up the default files. Open the `src` directory and delete the following files:

  • App.css
  • App.test.js
  • index.css
  • logo.svg
  • reportWebVitals.js
  • setupTests.js

Then, modify `App.js` and `index.js` to look like this:

App.js:

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Typing Speed Test</h1>
      </header>
    </div>
  );
}

export default App;

index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Finally, create a new file named `App.css` in the `src` directory and add some basic styling:

.App {
  text-align: center;
  font-family: sans-serif;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

Run the application with `npm start` in your terminal. You should see a basic “Typing Speed Test” header in your browser.

Component Breakdown

Our typing speed test will consist of several components:

  • App.js: The main component that manages the overall application structure.
  • TypingArea.js: Displays the text to be typed and handles user input.
  • Timer.js: Displays the elapsed time.
  • Results.js: Displays the typing speed (WPM) and accuracy.

Creating the TypingArea Component

Let’s create the `TypingArea.js` component. Create a new file named `TypingArea.js` in the `src` directory. This component will be responsible for displaying the text to be typed and handling user input. Paste the following code:

import React, { useState, useEffect } from 'react';

function TypingArea({ text, onComplete }) {
  const [userInput, setUserInput] = useState('');
  const [currentIndex, setCurrentIndex] = useState(0);
  const [startTime, setStartTime] = useState(null);
  const [isStarted, setIsStarted] = useState(false);

  useEffect(() => {
    if (isStarted && currentIndex === text.length) {
      onComplete(calculateWPM());
    }
  }, [currentIndex, text.length, isStarted, onComplete]);

  const handleChange = (e) => {
    const value = e.target.value;
    setUserInput(value);
    if (!isStarted) {
      setIsStarted(true);
      setStartTime(Date.now());
    }

    if (value.length > 0) {
      if (value[value.length - 1] === text[currentIndex]) {
        setCurrentIndex(currentIndex + 1);
      }
    }
  };

  const calculateWPM = () => {
    if (!startTime) return 0;
    const timeInMinutes = (Date.now() - startTime) / 60000;
    const words = text.split(' ').length;
    return Math.round(words / timeInMinutes);
  };

  const textArray = text.split('');

  return (
    <div>
      <p>
        {textArray.map((char, index) => {
          let className = '';
          if (index < currentIndex) {
            className = char === userInput[index] ? 'correct' : 'incorrect';
          } else if (index === currentIndex) {
            className = 'current';
          }
          return (
            <span key={index} className={className}>
              {char}
            </span>
          );
        })}
      </p>
      <input
        type="text"
        value={userInput}
        onChange={handleChange}
        autoFocus
      />
    </div>
  );
}

export default TypingArea;

Let’s break down this code:

  • State Variables:
    • userInput: Stores the user’s input.
    • currentIndex: Tracks the current character the user should be typing.
    • startTime: Records the start time of the test.
    • isStarted: A boolean to indicate if the test has started.
  • useEffect Hook: This hook is used to check if the user has finished typing the entire text. When the `currentIndex` reaches the end of the `text`, it calls the `onComplete` function to notify the parent component and calculate the WPM.
  • handleChange Function: This function is called every time the user types in the input field. It updates the userInput state, starts the timer (if it hasn’t already started), and checks if the typed character matches the expected character.
  • calculateWPM Function: Calculates the words per minute (WPM) based on the elapsed time and the number of words in the text.
  • Rendering the Text: The code maps over the provided text and renders each character. It applies different CSS classes (correct, incorrect, current) to visually indicate the user’s progress and accuracy.

Now, let’s add some CSS to `App.css` to style the typing area:

.correct {
  color: green;
}

.incorrect {
  color: red;
  text-decoration: underline;
}

.current {
  text-decoration: underline;
  font-weight: bold;
}

Creating the Timer Component

Next, let’s create the `Timer.js` component. This component will display the elapsed time during the typing test. Create a new file named `Timer.js` in the `src` directory and add the following code:

import React, { useState, useEffect } from 'react';

function Timer({ startTime }) {
  const [elapsedTime, setElapsedTime] = useState(0);

  useEffect(() => {
    let interval;
    if (startTime) {
      interval = setInterval(() => {
        const now = Date.now();
        const time = now - startTime;
        setElapsedTime(time);
      }, 10);
    }
    return () => clearInterval(interval);
  }, [startTime]);

  const formatTime = (time) => {
    const minutes = Math.floor((time / 60000) % 60);
    const seconds = Math.floor((time / 1000) % 60);
    const milliseconds = Math.floor((time % 1000) / 10);
    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${milliseconds.toString().padStart(2, '0')}`;
  };

  return <div>Time: {formatTime(elapsedTime)}</div>;
}

export default Timer;

Here’s a breakdown of the `Timer` component:

  • State Variable:
    • elapsedTime: Stores the elapsed time in milliseconds.
  • useEffect Hook: This hook sets up an interval to update the elapsedTime every 10 milliseconds when the startTime is available. It also includes a cleanup function to clear the interval when the component unmounts or when startTime changes.
  • formatTime Function: Formats the elapsed time into a readable format (MM:SS.MS).
  • Rendering: Displays the formatted elapsed time.

Creating the Results Component

Now, let’s create the `Results.js` component. This component will display the user’s typing speed (WPM) and accuracy. Create a new file named `Results.js` in the `src` directory and add the following code:

import React from 'react';

function Results({ wpm }) {
  return (
    <div>
      <p>WPM: {wpm}</p>
      {/* Add accuracy calculation here later */}
    </div>
  );
}

export default Results;

This is a simple component that currently only displays the WPM. We can expand this later to include accuracy.

Integrating the Components in App.js

Now, let’s integrate these components into our `App.js` file. Replace the contents of `App.js` with the following code:

import React, { useState } from 'react';
import TypingArea from './TypingArea';
import Timer from './Timer';
import Results from './Results';
import './App.css';

function App() {
  const [wpm, setWpm] = useState(0);
  const [startTime, setStartTime] = useState(null);
  const text = "The quick brown rabbit jumps over the lazy frogs with a smile.";

  const handleComplete = (wpm) => {
    setWpm(wpm);
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>Typing Speed Test</h1>
      </header>
      <div className="typing-area-container">
        <TypingArea text={text} onComplete={handleComplete} />
        {startTime && <Timer startTime={startTime} />}
        <Results wpm={wpm} />
      </div>
    </div>
  );
}

export default App;

Here’s what’s happening in the updated `App.js`:

  • Import Statements: Imports the necessary components (TypingArea, Timer, Results) and the CSS file.
  • State Variables:
    • wpm: Stores the calculated WPM.
    • startTime: Stores the start time, used to start the timer.
  • Text: Defines the text the user will type.
  • handleComplete Function: This function is passed to the TypingArea component. When the typing is complete, the TypingArea component calls this function, passing the calculated WPM.
  • Rendering: Renders the components, passing the necessary props. The Timer component is conditionally rendered based on the startTime.

Also add the following CSS to `App.css`:

.typing-area-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

Testing and Refining

Now, run your application (`npm start`) and test it. You should be able to type the text, and the application should:

  • Highlight the current character.
  • Indicate correct and incorrect characters.
  • Start the timer when you begin typing.
  • Calculate and display the WPM after you finish typing.

Here are some things to consider when refining your application:

  • Accuracy Calculation: Implement accuracy calculation by comparing the user’s input with the original text.
  • Error Handling: Handle edge cases and potential errors.
  • User Interface (UI) Enhancements: Improve the visual design and user experience.
  • Different Text Options: Allow the user to choose from different text options or even enter their own text.
  • Difficulty Levels: Implement different difficulty levels by varying the length and complexity of the text.

Common Mistakes and How to Fix Them

Here are some common mistakes beginners make when building React applications and how to fix them:

  • Incorrect State Updates: Make sure you’re updating state correctly using the useState hook. Avoid directly modifying state variables. Instead, use the setter function provided by useState.
  • Missing Dependencies in useEffect: If you’re using useEffect with dependencies, make sure you include all the necessary dependencies in the dependency array. Otherwise, your effect might not run when it should.
  • Incorrect Key Props: When rendering lists of elements, always provide a unique key prop to each element. This helps React efficiently update the DOM.
  • Forgetting to Handle Events: Make sure you’re handling events (like onChange, onClick) correctly. Pass the event object (e) to the event handler function and use it to access event-related information.
  • Ignoring Component Lifecycle: Understand the component lifecycle (mounting, updating, unmounting) and use lifecycle methods (or the equivalent hooks) appropriately.

Adding Features and Improvements

Now that you have a basic typing speed test, let’s explore some ways to enhance it:

1. Accuracy Calculation

Let’s add accuracy calculation to the `Results` component. First, modify the `TypingArea` component to track the number of correct and incorrect characters. Then, pass these values to the `Results` component to calculate and display accuracy.

Modify the `TypingArea.js` component:

import React, { useState, useEffect } from 'react';

function TypingArea({ text, onComplete }) {
  const [userInput, setUserInput] = useState('');
  const [currentIndex, setCurrentIndex] = useState(0);
  const [startTime, setStartTime] = useState(null);
  const [isStarted, setIsStarted] = useState(false);
  const [correctChars, setCorrectChars] = useState(0);
  const [incorrectChars, setIncorrectChars] = useState(0);

  useEffect(() => {
    if (isStarted && currentIndex === text.length) {
      const wpm = calculateWPM();
      const accuracy = calculateAccuracy();
      onComplete(wpm, accuracy);
    }
  }, [currentIndex, text.length, isStarted, onComplete]);

  const handleChange = (e) => {
    const value = e.target.value;
    setUserInput(value);
    if (!isStarted) {
      setIsStarted(true);
      setStartTime(Date.now());
    }

    if (value.length > 0) {
      if (value[value.length - 1] === text[currentIndex]) {
        setCurrentIndex(currentIndex + 1);
        setCorrectChars(correctChars + 1);
      } else {
        setIncorrectChars(incorrectChars + 1);
      }
    }
  };

  const calculateWPM = () => {
    if (!startTime) return 0;
    const timeInMinutes = (Date.now() - startTime) / 60000;
    const words = text.split(' ').length;
    return Math.round(words / timeInMinutes);
  };

  const calculateAccuracy = () => {
    const totalChars = correctChars + incorrectChars;
    if (totalChars === 0) return 0;
    return Math.round((correctChars / totalChars) * 100);
  };

  const textArray = text.split('');

  return (
    <div>
      <p>
        {textArray.map((char, index) => {
          let className = '';
          if (index < currentIndex) {
            className = char === userInput[index] ? 'correct' : 'incorrect';
          } else if (index === currentIndex) {
            className = 'current';
          }
          return (
            <span key={index} className={className}>
              {char}
            </span>
          );
        })}
      </p>
      <input
        type="text"
        value={userInput}
        onChange={handleChange}
        autoFocus
      />
    </div>
  );
}

export default TypingArea;

Modify the `Results.js` component:

import React from 'react';

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

export default Results;

Modify the `App.js` component:

import React, { useState } from 'react';
import TypingArea from './TypingArea';
import Timer from './Timer';
import Results from './Results';
import './App.css';

function App() {
  const [wpm, setWpm] = useState(0);
  const [accuracy, setAccuracy] = useState(0);
  const [startTime, setStartTime] = useState(null);
  const text = "The quick brown rabbit jumps over the lazy frogs with a smile.";

  const handleComplete = (wpm, accuracy) => {
    setWpm(wpm);
    setAccuracy(accuracy);
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>Typing Speed Test</h1>
      </header>
      <div className="typing-area-container">
        <TypingArea text={text} onComplete={handleComplete} />
        {startTime && <Timer startTime={startTime} />}
        <Results wpm={wpm} accuracy={accuracy} />
      </div>
    </div>
  );
}

export default App;

2. Different Text Options

Allow the user to choose from different text options. You can create an array of text snippets and let the user select one. You could also add a feature to fetch text from an API.

3. Difficulty Levels

Implement different difficulty levels by varying the length and complexity of the text.

4. User Interface (UI) Enhancements

Improve the visual design and user experience. Consider adding progress bars, animations, and more informative feedback.

Key Takeaways

  • Component-Based Architecture: React applications are built using components, which makes the code modular and reusable.
  • State Management: The useState hook is crucial for managing component state and triggering re-renders when the state changes.
  • Event Handling: Handling events (like user input) is essential for creating interactive applications.
  • Conditional Rendering: You can conditionally render UI elements based on the state of your application.
  • Practice and Iteration: Building this project will enhance your React skills.

FAQ

Q: How can I improve my typing speed?

A: Practice regularly! Use typing tutor websites, focus on accuracy first, and gradually increase your speed. Consider using a typing test application like the one we built.

Q: What are the benefits of learning React?

A: React is a popular JavaScript library for building user interfaces. It offers a component-based architecture, efficient updates, and a large community, making it a great choice for web development.

Q: How can I deploy my React application?

A: You can deploy your React application using services like Netlify, Vercel, or GitHub Pages. These platforms provide simple deployment processes and free hosting options.

Q: What is WPM and how is it calculated?

A: WPM stands for Words Per Minute. It’s a measure of typing speed. It is calculated by dividing the number of words typed by the time taken (in minutes).

Q: What are some common React development tools?

A: Some essential tools include React Developer Tools (a browser extension for debugging), ESLint (for code linting), and Webpack or Parcel (for bundling your application).

Building a typing speed test with React provides a solid foundation in fundamental React concepts. This project allows developers to practice building components, manage state, handle events, and create a user-friendly interface. While this tutorial provided a simple implementation, the core principles can be applied to more complex projects. As you continue to build and experiment, remember that the most effective way to improve your React skills is through consistent practice and by tackling new challenges. This typing speed test is just the beginning of your journey into React development; with each line of code, you’re building not just an application, but also your confidence and expertise in the world of web development. Embrace the learning process, and enjoy the journey of creating increasingly sophisticated and engaging web applications.

More posts