Typing Test » Javascriptfundamentals

In the digital age, typing speed is a crucial 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. Imagine being able to assess your typing skills on the fly, identify areas for improvement, and track your progress over time. This is where a dynamic, interactive typing speed test component in React.js comes into play. This tutorial will guide you through building such a component, providing a hands-on learning experience for beginners to intermediate React developers.

Why Build a Typing Speed Test?

Creating a typing speed test component offers several benefits:

Practical Skill Enhancement: It provides a direct way to practice and improve typing skills.
Real-time Feedback: Offers immediate feedback on speed (words per minute – WPM) and accuracy.
Learning React: It’s a great project for learning and practicing core React concepts like state management, event handling, and component lifecycle.
Portfolio Piece: A well-crafted typing speed test component can be a valuable addition to your portfolio, showcasing your React skills.

Prerequisites

Before we begin, ensure you have the following:

Node.js and npm (or yarn) installed: These are essential for managing project dependencies.
Basic understanding of JavaScript and React: Familiarity with components, JSX, and state management is helpful.
A code editor: Visual Studio Code, Sublime Text, or any editor of your choice.

Setting Up the Project

Let’s start by creating a new React project using Create React App. Open your terminal and run the following commands:

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

This will create a new React project named “typing-speed-test”. Now, let’s clean up the project by removing unnecessary files and modifying `App.js` to get started.

Component Structure

We’ll structure our component with these main parts:

Quote Display: Displays the text the user needs to type.
Input Field: Where the user types.
Timer: Tracks the time elapsed.
Results Display: Shows WPM and accuracy after the test.

Step-by-Step Implementation

1. Setting Up the State

Open `src/App.js` and import the `useState` hook from React. We’ll define the following state variables:

`text`: The text to be typed.
`userInput`: The user’s input.
`timeRemaining`: The time remaining for the test.
`isRunning`: A boolean to indicate if the test is running.
`wordsPerMinute`: The calculated WPM.
`accuracy`: The calculated accuracy.
`startTime`: The start time of the test.

import React, { useState, useRef } from 'react';
import './App.css';

function App() {
  const [text, setText] = useState('');
  const [userInput, setUserInput] = useState('');
  const [timeRemaining, setTimeRemaining] = useState(60);
  const [isRunning, setIsRunning] = useState(false);
  const [wordsPerMinute, setWordsPerMinute] = useState(0);
  const [accuracy, setAccuracy] = useState(0);
  const [startTime, setStartTime] = useState(null);
  const inputRef = useRef(null);

  // ... (rest of the component)
}

2. Fetching a Quote

Let’s add a function to fetch a random quote from an API. We’ll use the `useEffect` hook to fetch a quote when the component mounts. You can use a free API like `https://api.quotable.io/random`.

  useEffect(() => {
    async function fetchQuote() {
      try {
        const response = await fetch('https://api.quotable.io/random');
        const data = await response.json();
        setText(data.content);
      } catch (error) {
        console.error('Error fetching quote:', error);
        setText('Failed to load quote. Please refresh the page.');
      }
    }

    fetchQuote();
  }, []);

3. Handling User Input

Create a function `handleInputChange` to update the `userInput` state as the user types. Also, start the timer when the user starts typing.

  const handleInputChange = (e) => {
    const inputText = e.target.value;
    setUserInput(inputText);

    if (!isRunning) {
      setIsRunning(true);
      setStartTime(Date.now());
    }
  };

4. Implementing the Timer

Use the `useEffect` hook to manage the timer. This effect runs every second (using `setInterval`) as long as the test is running and the `timeRemaining` is greater than 0. It decrements `timeRemaining`. When time runs out, it calculates the results.

  useEffect(() => {
    let intervalId;

    if (isRunning && timeRemaining > 0) {
      intervalId = setInterval(() => {
        setTimeRemaining((prevTime) => prevTime - 1);
      }, 1000);
    } else if (timeRemaining === 0) {
      setIsRunning(false);
      calculateResults();
    }

    return () => clearInterval(intervalId);
  }, [isRunning, timeRemaining]);

5. Calculating Results

Create a `calculateResults` function to calculate WPM and accuracy. This function should be called when the timer runs out. It uses the user’s input, the original text, and the time elapsed to compute the results.


  const calculateResults = () => {
    const words = userInput.trim().split(' ');
    const correctWords = text.trim().split(' ');
    const correctChars = text.split('').filter((char, index) => userInput[index] === char).length;
    const totalChars = text.length;

    const timeInMinutes = (Date.now() - startTime) / 60000;
    const wpm = Math.round((words.length / timeInMinutes) || 0);
    const accuracyPercentage = Math.round((correctChars / totalChars) * 100) || 0;

    setWordsPerMinute(wpm);
    setAccuracy(accuracyPercentage);
  };

6. Resetting the Test

Implement a `resetTest` function to reset all states to their initial values, allowing the user to start a new test.


  const resetTest = () => {
    setUserInput('');
    setTimeRemaining(60);
    setIsRunning(false);
    setWordsPerMinute(0);
    setAccuracy(0);
    setStartTime(null);
    // Refetch a new quote
    fetchQuote();
  };

7. Rendering the UI

Build the UI using JSX. Include the quote display, the input field, the timer, and the results display. Make sure to conditionally render the results based on whether the test has finished.


  return (
    <div className="container">
      <h1>Typing Speed Test</h1>
      <div className="quote-display">
        {text}
      </div>
      <textarea
        ref={inputRef}
        className="input-field"
        value={userInput}
        onChange={handleInputChange}
        disabled={!isRunning && timeRemaining !== 60}
      />
      <div className="timer">
        Time: {timeRemaining}
      </div>
      {wordsPerMinute > 0 && (
        <div className="results">
          <p>WPM: {wordsPerMinute}</p>
          <p>Accuracy: {accuracy}%</p>
        </div>
      )}
      <button className="reset-button" onClick={resetTest}>Reset</button>
    </div>
  );
}

8. Adding Styling (App.css)

Create a `App.css` file in the `src` directory and add basic styling. Here is an example:


.container {
  width: 80%;
  margin: 50px auto;
  text-align: center;
  font-family: sans-serif;
}

.quote-display {
  font-size: 1.5rem;
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.input-field {
  width: 100%;
  padding: 10px;
  font-size: 1.2rem;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  resize: none; /* Prevent resizing */
}

.timer {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.results {
  font-size: 1.2rem;
  margin-bottom: 20px;
}

.reset-button {
  padding: 10px 20px;
  font-size: 1rem;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.reset-button:hover {
  background-color: #3e8e41;
}

9. Final `App.js` Code

Here’s the complete `App.js` file, incorporating all the components and functionalities discussed above:


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

function App() {
  const [text, setText] = useState('');
  const [userInput, setUserInput] = useState('');
  const [timeRemaining, setTimeRemaining] = useState(60);
  const [isRunning, setIsRunning] = useState(false);
  const [wordsPerMinute, setWordsPerMinute] = useState(0);
  const [accuracy, setAccuracy] = useState(0);
  const [startTime, setStartTime] = useState(null);
  const inputRef = useRef(null);

  useEffect(() => {
    async function fetchQuote() {
      try {
        const response = await fetch('https://api.quotable.io/random');
        const data = await response.json();
        setText(data.content);
      } catch (error) {
        console.error('Error fetching quote:', error);
        setText('Failed to load quote. Please refresh the page.');
      }
    }

    fetchQuote();
  }, []);

  useEffect(() => {
    let intervalId;

    if (isRunning && timeRemaining > 0) {
      intervalId = setInterval(() => {
        setTimeRemaining((prevTime) => prevTime - 1);
      }, 1000);
    } else if (timeRemaining === 0) {
      setIsRunning(false);
      calculateResults();
    }

    return () => clearInterval(intervalId);
  }, [isRunning, timeRemaining]);

  const handleInputChange = (e) => {
    const inputText = e.target.value;
    setUserInput(inputText);

    if (!isRunning) {
      setIsRunning(true);
      setStartTime(Date.now());
    }
  };

  const calculateResults = () => {
    const words = userInput.trim().split(' ');
    const correctWords = text.trim().split(' ');
    const correctChars = text.split('').filter((char, index) => userInput[index] === char).length;
    const totalChars = text.length;

    const timeInMinutes = (Date.now() - startTime) / 60000;
    const wpm = Math.round((words.length / timeInMinutes) || 0);
    const accuracyPercentage = Math.round((correctChars / totalChars) * 100) || 0;

    setWordsPerMinute(wpm);
    setAccuracy(accuracyPercentage);
  };

  const resetTest = () => {
    setUserInput('');
    setTimeRemaining(60);
    setIsRunning(false);
    setWordsPerMinute(0);
    setAccuracy(0);
    setStartTime(null);
    fetchQuote();
  };

  return (
    <div className="container">
      <h1>Typing Speed Test</h1>
      <div className="quote-display">
        {text}
      </div>
      <textarea
        ref={inputRef}
        className="input-field"
        value={userInput}
        onChange={handleInputChange}
        disabled={!isRunning && timeRemaining !== 60}
      />
      <div className="timer">
        Time: {timeRemaining}
      </div>
      {wordsPerMinute > 0 && (
        <div className="results">
          <p>WPM: {wordsPerMinute}</p>
          <p>Accuracy: {accuracy}%</p>
        </div>
      )}
      <button className="reset-button" onClick={resetTest}>Reset</button>
    </div>
  );
}

export default App;

Common Mistakes and How to Fix Them

Here are some common mistakes and how to address them:

Incorrect State Updates: Make sure you are correctly updating state variables using the `useState` hook and that your components re-render after state changes.
Timer Not Working: Double-check your `useEffect` hook for the timer. Ensure the dependencies are correct (e.g., `isRunning`, `timeRemaining`), and that you’re clearing the interval when the component unmounts or the timer stops.
Incorrect Results Calculation: Verify your WPM and accuracy calculations. Ensure you’re handling edge cases (e.g., empty input, division by zero).
UI Not Updating: If the UI doesn’t update, verify that you are correctly using state variables in your JSX and that the components are re-rendering after a state change.
API Errors: Handle potential errors when fetching quotes from the API using `try…catch` blocks. Provide a user-friendly message if the quote fails to load.

Key Takeaways

State Management: The project highlights the importance of state management using the `useState` hook.
Event Handling: You’ve learned to handle user input and trigger actions based on those inputs.
Side Effects with useEffect: The `useEffect` hook is essential for managing the timer and fetching data.
Component Composition: You’ve built a component by breaking it down into smaller, manageable parts.

SEO Best Practices

To optimize this article for search engines:

Keywords: Naturally incorporate keywords like “React typing speed test,” “React tutorial,” “typing speed,” and “WPM calculator.”
Headings: Use headings (H2, H3, H4) to structure the content logically.
Short Paragraphs: Break up the text into short, easy-to-read paragraphs.
Meta Description: Write a concise meta description (around 150-160 characters) summarizing the article’s content and including relevant keywords. For example: “Learn how to build a dynamic typing speed test component in React.js with this beginner-friendly tutorial. Includes step-by-step instructions, code examples, and common mistake fixes.”
Image Alt Text: Use descriptive alt text for images to improve accessibility and SEO.

FAQ

Can I customize the time for the typing test? Yes, you can easily change the `timeRemaining` state’s initial value to adjust the test duration.
How can I add more quotes to the test? You can fetch quotes from a larger API or create a local array of quotes and randomly select one.
How can I style the component? You can customize the styling by modifying the CSS in the `App.css` file.
How can I make the input field more user-friendly? You can improve the input field by adding features like highlighting the current word being typed or providing visual feedback on errors.

By following this tutorial, you’ve successfully built a fully functional typing speed test component using React.js. This project not only enhances your React skills but also provides a practical tool for improving typing proficiency. Remember to experiment with the code, add new features, and tailor it to your specific needs. With practice and continuous learning, you’ll be well on your way to mastering React and creating engaging user experiences. The journey of a thousand miles begins with a single line of code, and now, you’ve written many more, laying the foundation for your continued growth as a React developer.

Tag: Typing Test

Build a Dynamic React Component for a Simple Interactive Typing Speed Test