Typing_Speed_Test

The Typing Test application is a web-based tool designed to enhance users' typing skills through engaging and interactive typing exercises. Built with HTML, CSS, and JavaScript, this application allows users to practice typing accuracy and speed in a user-friendly environment. Users can type predefined paragraphs while the application tracks their performance, displaying metrics such as raw typing speed, accuracy, words per minute (WPM), and characters per minute (CPM), along with the number of mistakes made during the test.

Additionally, the application provides a result verdict after each test, summarizing the user's performance and highlighting areas for improvement. The backend server, built with Node.js and Express, connects to a MySQL database to store and retrieve users' highest WPM scores. With an intuitive interface featuring real-time feedback and the ability to restart tests, the Typing Test application aims to provide an effective platform for individuals looking to improve their typing efficiency and overall keyboard skills.

---

To download and run your Typing Test application files from your GitHub repository on your local machine, follow these steps:

Step 1: Clone the Repository

1. Open Terminal (Command Prompt or Git Bash):

• On Windows, you can use Command Prompt or Git Bash.
• On macOS or Linux, use the Terminal.

2. Navigate to the Desired Directory: Use the cd command to change to the directory where you want to clone your repository.

cd path/to/your/directory

3. Clone the Repository: Use the git clone command followed by the URL of your GitHub repository.

git clone https://github.com/your_username/Typing_Speed_Test.git

Replace your_username with your GitHub username.

Step 2: Install Dependencies

1. Navigate to the Cloned Directory:

cd Typing_Speed_Test

2)Install Node.js and NPM (if not already installed): Ensure you have Node.js and npm (Node Package Manager) installed on your machine. You can download it from nodejs.org.

3. Install Project Dependencies: Run the following command to install the required dependencies listed in your package.json file:

npm install

Step 3: Set Up the Database

1. Set Up MySQL: Ensure you have MySQL installed and running on your machine.

2. Create a Database: Use a MySQL client (like MySQL Workbench or command line) to create a database for your application.

CREATE DATABASE test;

3. Run the Schema: Execute the schema.sql file in your MySQL database to create the necessary tables:

SOURCE path/to/Typing_Speed_Test/database/schema.sql;

Step 4: Configure Database Connection

1. Update Database Credentials: In backend/server.js, ensure the MySQL connection settings (host, user, password, database) match your local MySQL setup.

const db = mysql.createConnection({
    host: 'localhost',
    user: 'user_', 
    password: 'password_', 
    database: 'typing_test' 
});

Step 5: Run the Application

1. Start the Server: In your terminal, run the following command to start the backend server:

node backend/server.js

Make sure you're in the project directory when running this command.

2. Open the Frontend: Open your web browser and navigate to:

http://localhost:3000

Replace 3000 with the port number specified in your server.js file if it’s different.

Step 6: Start Typing!

• Begin a typing test by following the on-screen instructions.
• After completing the test, view your metrics and see if you achieved a new highest WPM.
• Use the "Try Again" button to reset and start a new test session.

Conclusion You should now be able to use your Typing Test application locally. If you encounter any issues, ensure that all dependencies are installed correctly, and your MySQL database is set up as required.

---

Technologies Used:

• Node.js: Backend server runtime.
• Express.js: Web framework for Node.js.
• MySQL: Database for storing high scores.
• HTML5: Structure of the web application.
• CSS3: Styling and layout.
• JavaScript: Frontend logic and interactivity.
• Boxicons: Icon library for visual enhancements.

---

Project Structure and File Features

1. backend/server.js :

• Purpose: Manages the backend of the application, handling HTTP requests and MySQL interactions, specifically for fetching and updating the highest WPM data.
• Features:
  • Sets up an Express server to handle routing.
  • Connects to a MySQL database to store and retrieve high scores.
  • Defines API endpoints:
    • GET /api/highest-wpm: Fetches the highest WPM from the database.
    • POST /api/highest-wpm: Updates the highest WPM in the database when a new record is achieved.
  • Serves static frontend files to the client.

2. frontend/index.html

• Purpose: The main HTML document for the Typing Test application.
• Features:
  • Structures the user interface, including the input field for typing, display areas for metrics (WPM, CPM, mistakes, remaining time), and the highest WPM.
  • Includes links to the CSS stylesheet and JavaScript files.
  • Contains a header with a logo and application title.
  • Provides a "Try Again" button to reset the test.

3. frontend/style.css

• Purpose: Styles the HTML elements to ensure a visually appealing and responsive design.
• Features:
  • Resets default browser styles for consistency.
  • Styles the layout, colors, fonts, and responsive behavior of the application.
  • Highlights active, correct, and incorrect typed characters with distinct colors.
  • Styles the header and navbar for a polished look.
  • Includes animations for visual feedback during typing.

4. frontend/js/script.js

• Purpose: Implements the core functionality of the Typing Test, managing user interactions, timing, and performance metrics.
• Features:
  • Handles user input and tracks typing progress.
  • Manages the countdown timer and calculates metrics like WPM, CPM, accuracy, and RAW WPM.
  • Fetches the highest WPM from the backend and updates it when a new high score is achieved.
  • Provides real-time feedback and displays a result verdict after each test.
  • Allows users to reset the test and start a new session.

5. frontend/js/paragraph.js

• Purpose: Stores an array of sample paragraphs used for the typing tests.
• Features:
  • Contains 50 predefined paragraphs to provide varied typing content.
  • Randomly selects a paragraph for each test session to ensure a different experience every time.

6. database/schema.sql

• Purpose: Defines the database schema for storing high scores.
• Features:
  • Creates the typing_test database.
  • Defines the highscores table with columns for id and highest_wpm.
  • Inserts an initial record with a highest_wpm of 0 to ensure there is always a baseline score.

7. frontend/typing_test_logo.ico

• Purpose: The favicon for the Typing Test application.
• Features:
  • Displays a small icon in the browser tab, enhancing the application's branding and making it easily recognizable.

8. package.json

• Purpose: Manages project dependencies and scripts.
• Features:
  • Lists the necessary Node.js packages required for the backend (e.g., Express, MySQL2).
  • Defines scripts to start the server and manage other development tasks.

---

Key Metrics

• Raw WPM (Words Per Minute): Measures the total number of words typed, disregarding mistakes, providing a basic speed metric.
• WPM (Words Per Minute): Calculates the number of correctly typed words per minute, adjusted for accuracy.
• CPM (Characters Per Minute):Tracks the number of characters typed per minute, excluding mistakes.
• Accuracy: Determines the percentage of correctly typed characters out of the total characters typed, reflecting typing precision.
• Mistakes: Counts the number of errors made during the typing session, aiding in identifying areas for improvement.
• Remaining Time: Displays the countdown timer indicating how much time is left in the current typing session, with the color changing to red in the last 10 seconds to alert users.
• Highest WPM Tracking: Stores and displays the user's highest WPM score across tests.
• Result Verdict: Provides personalized feedback based on performance metrics, offering insights and suggestions to guide users in improving their typing skills.
• Random Paragraph Selection: Dynamically selects a random paragraph from a pool of 50 different paragraphs for each test, ensuring variety in practice.
• User-Friendly Interface: The application has a clean and intuitive interface, designed to be easily navigable for users of all skill levels.
• Navbar with Logo: Includes a visually appealing navbar featuring a logo and application name, enhancing the overall design.
• Favicon Integration: A custom favicon adds a polished and professional touch to the browser tab.

---

Screenshots & Demo

typing_test_demo.mp4