Build a Simple Vue.js Interactive Web-Based Typing Speed Test: A Beginner’s Guide

Written by

javascriptdebugged

in

In today’s fast-paced digital world, typing speed is a crucial skill. Whether you’re a student, a professional, or just someone who enjoys online activities, the ability to type quickly and accurately can significantly boost your productivity and efficiency. That’s where a typing speed test comes in. It helps you measure your typing speed (words per minute, or WPM) and accuracy, allowing you to track your progress and identify areas for improvement. This tutorial will guide you through building a simple, interactive typing speed test application using Vue.js, a popular JavaScript framework known for its ease of use and component-based architecture.

Why Build a Typing Speed Test?

Creating a typing speed test is a fantastic way to learn Vue.js fundamentals. It combines several essential concepts: data binding, event handling, conditional rendering, and component composition. By building this project, you’ll gain practical experience in these areas and solidify your understanding of how Vue.js works. Moreover, you’ll have a functional application that you can customize and expand upon to further your learning. This project also provides a tangible way to improve your typing skills, making it a win-win situation.

Prerequisites

Before we dive in, make sure you have the following:

  • A basic understanding of HTML, CSS, and JavaScript.
  • Node.js and npm (or yarn) installed on your computer.
  • A code editor (like Visual Studio Code, Sublime Text, or Atom).

Setting Up Your Vue.js Project

Let’s start by setting up a new Vue.js project using the Vue CLI (Command Line Interface). If you don’t have the Vue CLI installed, you can install it globally by running the following command in your terminal:

npm install -g @vue/cli

Once the Vue CLI is installed, create a new project by running:

vue create typing-speed-test

During the project creation process, you’ll be prompted to choose a preset. Select “Default ([Vue 3] babel, eslint)” or manually select features that suit your needs. For this tutorial, the default preset will suffice. Navigate into your project directory:

cd typing-speed-test

And then start the development server:

npm run serve

This will start a development server, and you should be able to view your basic Vue.js application in your web browser, typically at http://localhost:8080.

Project Structure

Your project structure should look something like this:

typing-speed-test/
├── node_modules/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── assets/
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue
│   ├── main.js
│   └── App.vue
├── .gitignore
├── babel.config.js
├── package-lock.json
├── package.json
└── README.md

We will primarily be working within the src directory, specifically in App.vue and creating new components in the components folder.

Building the Typing Speed Test Component

Let’s create a new component called TypingTest.vue within the components directory. This will be the core of our application. Create a new file named TypingTest.vue in the src/components/ directory and add the following code:

<template>
  <div class="typing-test">
    <h2>Typing Speed Test</h2>
    <p class="quote">{{ quote }}</p>
    <input
      type="text"
      class="user-input"
      v-model="userInput"
      @input="handleInput"
      :disabled="!isActive"
    />
    <div class="stats">
      <p>WPM: {{ wpm }}</p>
      <p>Accuracy: {{ accuracy }}%</p>
      <button @click="startTest" v-if="!isActive">Start Test</button>
      <button @click="resetTest" v-else>Reset</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      quote: "The quick brown rabbit jumps over the lazy frogs with a smile.", // Replace with a real quote API
      userInput: '',
      startTime: null,
      endTime: null,
      isActive: false,
      correctChars: 0,
      totalChars: 0,
    };
  },
  computed: {
    wpm() {
      if (!this.startTime || !this.endTime || this.userInput.trim().length === 0) {
        return 0;
      }
      const timeInMinutes = (this.endTime - this.startTime) / 60000;
      const words = this.userInput.trim().split(' ').length;
      return Math.round(words / timeInMinutes);
    },
    accuracy() {
      if (this.totalChars === 0) {
        return 100;
      }
      return Math.round((this.correctChars / this.totalChars) * 100);
    },
  },
  methods: {
    startTest() {
      this.isActive = true;
      this.userInput = '';
      this.startTime = new Date();
      this.correctChars = 0;
      this.totalChars = 0;
    },
    resetTest() {
      this.isActive = false;
      this.userInput = '';
      this.startTime = null;
      this.endTime = null;
    },
    handleInput() {
      this.totalChars = this.userInput.length;
      if (!this.startTime) {
        this.startTest();
      }
      this.calculateAccuracy();
      if (this.userInput.trim() === this.quote.substring(0, this.userInput.length).trim() && this.userInput.length > 0) {
          this.correctChars = this.userInput.length;
      }
      if (this.userInput.trim() === this.quote.trim()) {
        this.endTime = new Date();
        this.isActive = false;
      }
    },
    calculateAccuracy() {
    if (this.userInput.length > 0) {
        const quoteSubstring = this.quote.substring(0, this.userInput.length);
        let correctCount = 0;
        for (let i = 0; i < this.userInput.length; i++) {
            if (this.userInput[i] === quoteSubstring[i]) {
                correctCount++;
            }
        }
        this.correctChars = correctCount;
    }
  }
  },
};
</script>

<style scoped>
.typing-test {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: center;
}

.quote {
  font-size: 1.2em;
  margin-bottom: 10px;
  word-wrap: break-word;
}

.user-input {
  width: 100%;
  padding: 10px;
  font-size: 1em;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
}

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

button:hover {
  background-color: #3e8e41;
}
</style>

Let’s break down this code:

  • Template: This section defines the structure of our component. It includes:
    • An h2 heading for the title.
    • A p element to display the quote to be typed.
    • An input field where the user will type. The v-model directive binds the input’s value to the userInput data property, and the @input event listener calls the handleInput method every time the user types. The :disabled directive disables the input field when the test is not active.
    • A div with the class “stats” to display the WPM and accuracy, and buttons to start and reset the test.
  • Script: This section contains the JavaScript logic for our component.
    • data(): This function returns an object containing the component’s reactive data:
      • quote: The text the user will type. (Ideally, this would be fetched from an API for a more dynamic experience. We’ll use a static quote for simplicity in this example.)
      • userInput: Stores the text the user types.
      • startTime: Records the start time of the test.
      • endTime: Records the end time of the test.
      • isActive: A boolean flag to indicate whether the test is active.
      • correctChars: Counts the number of correctly typed characters.
      • totalChars: Counts the total number of characters typed.
    • computed: This section defines computed properties:
      • wpm: Calculates the words per minute based on the time taken and the number of words typed.
      • accuracy: Calculates the typing accuracy.
    • methods: This section defines the methods used in the component:
      • startTest(): Initializes the test by setting isActive to true, resetting the userInput, and recording the start time.
      • resetTest(): Resets the test by setting isActive to false, clearing the input field, and resetting the start and end times.
      • handleInput(): This method is called whenever the user types in the input field. It updates the totalChars, calls calculateAccuracy() and checks if the user has finished typing the quote. If the user has finished, it stops the test by setting isActive to false.
      • calculateAccuracy(): Calculates the accuracy of the user’s typing.
    • Style: This section contains the CSS styles for the component to make it visually appealing.

Integrating the Component in App.vue

Now, let’s integrate the TypingTest.vue component into our main application component, App.vue. Open src/App.vue and modify it as follows:

<template>
  <div id="app">
    <TypingTest />
  </div>
</template>

<script>
import TypingTest from './components/TypingTest.vue';

export default {
  components: {
    TypingTest,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Here’s what changed:

  • We import the TypingTest component using import TypingTest from './components/TypingTest.vue';.
  • We register the TypingTest component in the components object.
  • We use the <TypingTest /> tag within the template to render the component.

Testing and Refining

At this point, you should be able to run your application (npm run serve) and see the typing speed test interface. Try typing the provided quote and see the WPM and accuracy update in real-time. You might need to adjust the CSS to fit your preferences.

Common Mistakes and Solutions

Here are some common mistakes and how to fix them:

  • Incorrect Data Binding: If the userInput doesn’t update, double-check that you’re using v-model correctly in your input field and that the data property is defined in your component’s data().
  • Event Handling Issues: Ensure your event listeners (e.g., @input) are correctly attached to the appropriate elements and that the methods they call are defined in the methods section of your component.
  • Calculation Errors: Carefully review the logic for calculating WPM and accuracy. Ensure you’re handling edge cases like zero time or empty input fields.
  • CSS Styling Problems: If the component doesn’t look right, inspect the browser’s developer tools to identify any CSS conflicts or errors. Use specific selectors to override default styles.

Enhancements and Next Steps

This is a basic implementation, and there are many ways to enhance this application:

  • Quote API Integration: Replace the static quote with a dynamic one fetched from a quote API (e.g., Quotable API). This will make the test more engaging. You can use the fetch API or a library like Axios to make the API requests.
  • Error Handling: Implement error handling for API requests and user input.
  • User Interface Improvements: Add more visual feedback, such as highlighting the current word being typed or showing a progress bar.
  • User Accounts and History: For a more advanced project, consider adding user accounts to store typing test results and track progress over time. This would involve setting up a backend (e.g., using Node.js with Express, or a serverless function) to store and retrieve user data.
  • Difficulty Levels: Implement different difficulty levels by adjusting the length or complexity of the quotes.
  • Customization Options: Allow users to customize the test, such as choosing the quote length or the time limit.

Key Takeaways

In this tutorial, you’ve learned how to build a simple, interactive typing speed test using Vue.js. You’ve gained experience in:

  • Creating and structuring Vue.js components.
  • Using data binding (v-model) to connect user input to your application’s data.
  • Handling events (@input, @click) to respond to user interactions.
  • Using computed properties to derive values from your data.
  • Adding conditional rendering (v-if) to control the display of elements.

FAQ

  1. How do I run the Vue.js application?

    After creating the project with vue create, navigate into the project directory (e.g., cd typing-speed-test) and run npm run serve. This will start the development server, and you can view the application in your browser (usually at http://localhost:8080).

  2. How can I change the quote?

    In the TypingTest.vue component, modify the quote data property in the data() function. For a more dynamic approach, integrate with a quote API.

  3. How do I add more features?

    Consider adding user accounts, different difficulty levels, or customization options. These enhancements will require additional components, data management, and potentially backend integration.

  4. How do I style the application?

    You can add CSS styles within the <style scoped> block of each component or create a global CSS file for styles that apply across the application.

  5. Where can I learn more about Vue.js?

    The official Vue.js documentation is an excellent resource: https://vuejs.org/. There are also numerous online tutorials, courses, and communities available.

Building this typing speed test is a great starting point for exploring the power and flexibility of Vue.js. As you experiment with different features and enhancements, you’ll gain a deeper understanding of the framework and its capabilities. Remember to break down the problem into smaller, manageable parts, test your code frequently, and consult the Vue.js documentation when needed. The journey of a thousand lines of code begins with a single component, and with each line you write, you’ll become a more proficient Vue.js developer. Keep coding, keep learning, and keep building! You’ll be amazed at the applications you can create with Vue.js.

More posts