AI Automation & Agents  

Building a Real-Time Typing Speed Test Website Using HTML, CSS, JavaScript, and Make.com

In today’s era of AI-driven productivity and automation, combining traditional coding with no-code platforms opens up exciting possibilities for developers. To explore this hybrid approach, I built a Real-Time Typing Speed Test Website using HTML, CSS, and JavaScript, integrated with Make.com to automate workflows and email responses β€” without any server-side code.

πŸ”— Live Project: https://classy-cendol-725815.netlify.app/

Project Overview

This Typing Speed Test Website allows users to measure their typing speed and accuracy in real time while demonstrating how automation can simplify backend tasks. The project integrates:

  • A public API for dynamic text generation.

  • Make.com (an AI-powered no-code automation tool) for automating email notifications.

By merging front-end logic with AI-driven automation, the project eliminates the need for manual server management while maintaining seamless user interaction.

Technology Stack

  • HTML5 – Defines the web structure and navigation sections such as Home, Leaderboard, Help, About, and Contact.

  • CSS3 – Adds responsive design, styling, and animations to ensure visual consistency across all devices.

  • JavaScript – Handles all logical operations including text fetching, timer, WPM & accuracy calculation, and user event tracking.

  • Bacon Ipsum API – Generates random text dynamically for each typing test using simple API calls.

  • Make.com – Acts as the automation engine that uses AI and no-code logic to process form submissions, trigger workflows, and send real-time emails.

How AI Automation Fits In

Make.com, powered by AI and workflow intelligence, bridges the gap between frontend interaction and backend automation.
In this project, the Contact Us form is connected to a Make.com Webhook. When a user submits their details:

  1. The Webhook detects the trigger automatically.

  2. Make.com processes the data using its automation logic.

  3. The workflow sends an email notification directly to my inbox through a Gmail module.

This is a simple yet powerful example of AI-assisted workflow orchestration, replacing manual scripts or traditional backend code with visual automation.

Workflow example:
Webhook (Trigger) β†’ AI Automation via Make.com β†’ Gmail (Action)

Core Functionalities

1. Real-Time Typing Analytics

  • WPM (Words Per Minute): Calculated by analyzing correctly typed words in a given duration.

  • Accuracy: Computed by comparing the total correct characters against all characters typed.

  • Timer: Automatically starts when typing begins and stops after 60 seconds.

2. Dynamic Content with API

The Bacon Ipsum API provides fresh, random text each time a user starts a test:

fetch("https://baconipsum.com/api/?type=all-meat&paras=1")
  .then(response => response.json())
  .then(data => textDisplay.textContent = data[0]);

This ensures that each typing challenge is unique, engaging, and unpredictable.

3. AI-Driven Email Automation

Once the user submits the contact form, Make.com AI-powered engine executes a pre-defined flow β€” automatically analyzing the form input and routing it to my inbox instantly.

No backend scripts. No manual checks. Just smart automation.

Why Use AI Automation Here

  • No Server Dependency: Make.com removes the need for traditional backend code.

  • Faster Prototyping: Workflows are built visually β€” no extra coding required.

  • Real-Time Efficiency: AI-driven triggers ensure instant actions, like sending notifications or storing analytics.

  • Scalability: The same automation can later be expanded for analytics, user feedback reports, or leaderboard tracking.

Challenges & Solutions

The biggest challenges involved handling CORS issues and ensuring synchronous performance between API requests and typing logic.
With proper promise chaining and efficient asynchronous JavaScript handling, real-time accuracy was achieved without lag or glitches.

Future AI Enhancements

  • Use Make.com AI modules for automated data insights and user performance reports.

  • Connect Firebase or Google Sheets for leaderboard tracking and analytics.

  • Add Dark Mode, custom test durations, and local storage for personalized results.

  • Implement AI-based feedback to analyze typing errors and suggest improvements automatically.

Conclusion

This project showcases how AI automation and web development can work together to create smarter, faster, and more connected applications.
By combining HTML, CSS, and JavaScript for interactivity, the Bacon Ipsum API for dynamic text, and Make.com for backend AI-driven automation, this project achieves full-stack functionality β€” without a traditional backend.

🌐 Try the project live: https://classy-cendol-725815.netlify.app/

Membership not found