Group 5: Project- Typing Speed Test

Updated: 30 Jul 2026, 10:43:27

Project Name : Typing Speed Test

Project Structure

Typing-Speed-Test/
│
├── index.html
├── style.css
├── script.js
├── quotes.js
└── README.txt

Features Included

⌨️ 60-second typing test
📝 Random typing quotes
📊 Words Per Minute (WPM) calculation
🎯 Accuracy calculation
🔄 Restart button
💾 Pure HTML, CSS, and JavaScript (no frameworks)

`File 1: index.html`

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typing Speed Test</title>

<body>

<h1>⌨️ Typing Speed Test</h1>

<div class="stats">
<span id="time">60</span>s |
WPM: <span id="wpm">0</span> |
Accuracy: <span id="acc">100</span>%
</div>

<button id="restart">
Restart Test
</button>

</div>

<h2>On-Job Training Project</h2>

<p>
This project was successfully completed during
<strong>On-Job Training (OJT)</strong> by the following
ITI trainees.
</p>

<div class="trainee-card">
<h3>1. Trainee Name 1</h3>
<p>COPA Trade</p>
</div>

<div class="trainee-card">
<h3>2. Trainee Name 2</h3>
<p>COPA Trade</p>
</div>

<div class="trainee-card">
<h3>3. Trainee Name 3</h3>
<p>COPA Trade</p>
</div>

<div class="trainee-card">
<h3>4. Trainee Name 4</h3>
<p>COPA Trade</p>
</div>

<div class="trainee-card">
<h3>5. Trainee Name 5</h3>
<p>COPA Trade</p>
</div>

</div>

<div class="copyright">
© 2026 Typing Speed Test • Developed during
On-Job Training (OJT)
</div>

</footer>

</body>

</html>

`File 2: style.css`

/* ===================================
Global Styles
=================================== */

body {
font-family: Arial, sans-serif;
background: #eef2f7;
margin: 0;
padding: 0;
}

.container {
max-width: 800px;
margin: 40px auto;
background: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

textarea {
width: 100%;
height: 140px;
padding: 10px;
font-size: 16px;
resize: vertical;
box-sizing: border-box;
}

.stats {
margin: 10px 0;
font-weight: bold;
font-size: 18px;
}

button {
padding: 10px 16px;
font-size: 16px;
cursor: pointer;
}

/* ===================================
OJT Footer Section
=================================== */

.ojt-footer {
margin-top: 60px;
background: #1f2937;
color: #ffffff;
text-align: center;
padding: 40px 20px;
}

.ojt-footer h2 {
margin-bottom: 10px;
font-size: 28px;
}

.ojt-footer p {
max-width: 700px;
margin: 0 auto 30px;
color: #d1d5db;
line-height: 1.6;
}

/* ===================================
Trainee Cards
=================================== */

.trainee-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 20px;
max-width: 1000px;
margin: auto;
}

.trainee-card {
background: #ffffff;
color: #333333;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease;
}

.trainee-card:hover {
transform: translateY(-5px);
}

.trainee-card h3 {
margin-bottom: 8px;
color: #1565c0;
font-size: 18px;
}

.trainee-card p {
margin: 0;
color: #666666;
font-size: 15px;
}

/* ===================================
Copyright
=================================== */

.copyright {
margin-top: 35px;
padding-top: 15px;
font-size: 14px;
color: #bdbdbd;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* ===================================
Responsive Design
=================================== */

@media (max-width: 768px) {

.container {
margin: 20px;
padding: 15px;
}

textarea {
height: 120px;
}

.stats {
font-size: 16px;
}

.ojt-footer h2 {
font-size: 24px;
}

.trainee-grid {
grid-template-columns: 1fr;
}
}

`File 3: script.js`

// Get DOM elements
const q = document.getElementById("quote");
const inp = document.getElementById("input");

const tm = document.getElementById("time");
const w = document.getElementById("wpm");
const ac = document.getElementById("acc");

let started = false;
let id;

/* ==========================
Initialize Test
========================== */
function init() {

// Display random quote
q.textContent = quotes[
Math.floor(Math.random() * quotes.length)
];

// Reset input
inp.value = "";
inp.disabled = false;

// Reset statistics
tm.textContent = 60;
w.textContent = 0;
ac.textContent = 100;

started = false;

clearInterval(id);

}

/* ==========================
Calculate WPM & Accuracy
========================== */
function calc() {

const txt = inp.value;

let correctChars = 0;

// Count correct characters
for (let i = 0; i < txt.length; i++) {

if (txt[i] === q.textContent[i]) {
correctChars++;
}

}

// Accuracy
ac.textContent = txt.length
? Math.round((correctChars / txt.length) * 100)
: 100;

// Time elapsed
const minutes =
(60 - Number(tm.textContent)) / 60 || (1 / 60);

// Word count
const words = txt
.trim()
.split(/\s+/)
.filter(Boolean).length;

// WPM
w.textContent = Math.round(words / minutes);

}

/* ==========================
Start Typing Test
========================== */
inp.addEventListener("input", () => {

if (!started) {

started = true;

id = setInterval(() => {

tm.textContent = Number(tm.textContent) - 1;

calc();

if (Number(tm.textContent) <= 0) {

clearInterval(id);

inp.disabled = true;

}

}, 1000);

}

calc();

});

/* ==========================
Restart Button
========================== */
document
.getElementById("restart")
.onclick = init;

/* ==========================
Start Application
========================== */
init();

`File 4: quotes.js`

const quotes = [
"Practice makes perfect.",
"JavaScript makes web pages interactive.",
"Typing quickly takes regular practice.",
"Small projects build big skills.",
"Stay focused and keep learning."
];

`Fie 5: README.txt`

Typing Speed Test using HTML, CSS and JavaScript. Run with Live Server.

About Author

Swarnim Raj

Author & Career Content Writer

Experienced education and career writer at Infokept Career Hub, creating simple, research-based guides for students and government job aspirants.

Group 5: Project- Typing Speed Test

Project Structure

Features Included

File 1: index.html

File 2: style.css

File 3: script.js

File 4: quotes.js

Fie 5: README.txt