In today’s fast-paced digital world, typing is no longer just a skill – it's a necessity. Whether you're a student, professional, freelancer, or gamer, having strong typing skills can significantly boost your productivity and confidence. That's why we've created a free, mobile-friendly typing test website designed for everyone — from beginners to pros.
Our typing test website is designed to give you real-time feedback, help you improve your typing accuracy, and challenge you to become faster every day. Here’s what makes it stand out:
All you need to do is visit the site, start typing, and your results will be calculated in real-time!
Whether you're on a PC, tablet, or mobile device, our site adapts beautifully to any screen size. No lags, no weird layouts – just smooth, efficient typing tests.
Stay updated with new typing challenges, speed tips, and competitions. Follow us on:
🔹 Facebook
🔹 Instagram
🔹 LinkedIn
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typespeed - Master Your Typing Speed</title>
<meta name="description" content="Test and improve your typing speed and accuracy with TypeSwift. Get real-time feedback, track your progress, and practice with diverse prompts.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
<style>
:root {
--bg-color: #f4f7fc;
--text-color: #333;
--primary-color: #367BF5;
--secondary-color: #4A00E0;
--accent-color: #8E2DE2;
--success-color: #2ecc71;
--error-color: #e74c3c;
--light-gray: #e9ecef;
--border-radius: 12px;
--shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}
body {
font-family: 'Poppins', sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
line-height: 1.7;
overflow-x: hidden;
}
.background-gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
z-index: -2; /* Ads ke peeche */
}
.container {
max-width: 1200px;
margin: auto;
position: relative;
z-index: 2;
}
/* === Ad Placeholders Styling === */
.ad-placeholder {
background-color: #e9ecef;
display: flex;
justify-content: center;
align-items: center;
color: #6c757d;
font-size: 1rem;
font-weight: 500;
border: 2px dashed #ced4da;
margin: 15px auto;
text-align: center;
}
/* Top & Bottom Banners */
.ad-top-banner, .ad-bottom-banner {
width: 100%;
max-width: 728px;
height: 90px;
}
.ad-in-content {
width: 100%;
max-width: 728px;
min-height: 90px;
}
/* Left & Right Side Banners */
.ad-side {
width: 160px; /* Standard Skyscraper Width */
height: 600px; /* Standard Skyscraper Height */
position: fixed;
top: 50%;
transform: translateY(-50%);
z-index: 1;
}
.ad-left-sidebar {
left: 20px;
}
.ad-right-sidebar {
right: 20px;
}
/* === Main Layout === */
.page-wrapper {
margin-top: 80px; /* Header ki height ke liye */
}
header {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.18);
padding: 1rem 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
header .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo { font-size: 1.8rem; font-weight: 700; color: #fff; text-decoration: none; }
.logo span { font-weight: 300; }
nav ul { list-style: none; display: flex; }
nav ul li { margin-left: 30px; }
nav ul li a { color: #fff; text-decoration: none; font-weight: 600; }
#hero {
padding: 2rem 0;
text-align: center;
min-height: calc(100vh - 120px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.typing-test-area {
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(15px);
border-radius: var(--border-radius);
padding: 2rem;
box-shadow: var(--shadow);
border: 1px solid rgba(255, 255, 255, 0.18);
width: 100%;
max-width: 850px;
}
.content-section { padding: 80px 0; }
.section-title { text-align: center; font-size: 2.8rem; margin-bottom: 50px; font-weight: 700; }
.section-title .highlight { color: var(--primary-color); }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.feature-item { background-color: #fff; padding: 30px; text-align: center; border-radius: var(--border-radius); }
.feature-icon { width: 70px; height: 70px; margin: 0 auto 20px; background-image: linear-gradient(45deg, var(--primary-color), var(--accent-color)); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #fff; }
.feature-item h3 { color: var(--primary-color); margin-bottom: 10px; font-size: 1.5rem; }
#about { background-color: #fff; }
#about p { text-align: center; max-width: 800px; margin: 0 auto; color: #666; font-size: 1.1rem; }
footer { background-color: #2c3e50; color: #bdc3c7; text-align: center; padding: 2.5rem 0; position: relative; z-index: 2; }
footer .highlight { color: #fff; font-weight: 600; }
/* Responsive Adjustments */
@media (max-width: 1300px) {
.ad-side {
display: none; /* Side ads ko choti screens par hide karein */
}
}
@media (max-width: 768px) {
header .container { flex-direction: column; gap: 15px; }
#hero .main-title { font-size: 2.5rem; }
.section-title { font-size: 2.2rem; }
}
/* --- BAAQI STYLES JAISA KE PEHLE THE --- */
.time-selection{margin-bottom:1.5rem;display:flex;justify-content:center;gap:10px}.time-btn{background:rgba(255,255,255,0.3);border:1px solid transparent;color:#fff;padding:8px 16px;border-radius:6px;cursor:pointer;font-weight:600}.time-btn.active{background:#fff;color:var(--primary-color)}.sentence-display{font-size:1.5rem;margin-bottom:1.5rem;padding:20px;background:rgba(255,255,255,0.2);border-radius:8px;min-height:100px;text-align:left;color:#2c3e50;line-height:1.6}.sentence-display span.correct{color:var(--success-color)}.sentence-display span.incorrect{color:var(--error-color);text-decoration:underline}.sentence-display span.current{background-color:rgba(54,123,245,0.3);border-radius:2px}#typing-input{width:100%;padding:15px;font-size:1.2rem;border-radius:8px;border:1px solid transparent;background:rgba(255,255,255,0.4);color:#333}.stats-controls{display:flex;justify-content:space-between;align-items:center;margin-top:20px;flex-wrap:wrap;gap:15px}.stats{display:flex;gap:15px;font-size:1rem;flex-wrap:wrap}.stat-item{background:rgba(0,0,0,0.1);padding:10px 15px;border-radius:8px;color:#fff}.stat-item span{font-weight:700}.btn{padding:12px 30px;border:none;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:600}.btn-primary{background-image:linear-gradient(to right,var(--accent-color) 0%,var(--secondary-color) 51%,var(--accent-color) 100%);background-size:200% auto;color:#fff}.btn-secondary{background:rgba(255,255,255,0.4);color:#333}.result-message{margin-top:25px;font-size:1.3rem;font-weight:600;min-height:1.5em;color:#fff}
</style>
</head>
<body>
<div class="background-gradient"></div>
<!-- === LEFT SIDE AD === -->
<div class="ad-placeholder ad-side ad-left-sidebar">
<!--160*600 ads--> <br>
<!-- Left Side Ad Code Yahan Paste Karein -->
</div>
<!-- === RIGHT SIDE AD === -->
<div class="ad-placeholder ad-side ad-right-sidebar">
<!--160*600 ads--> <br>
<!-- Right Side Ad Code Yahan Paste Karein -->
</div>
<header>
<div class="container">
<a href="#" class="logo">Type<span>Swift</span></a>
<nav>
<ul>
<li><a href="#hero">Home</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</div>
</header>
<div class="page-wrapper">
<main>
<!-- === TOP BANNER AD === -->
<div class="ad-placeholder ad-top-banner">
<!--7280*90 ads--> <br>
<!-- Top Banner Ad Code Yahan Paste Karein -->
</div>
<section id="hero">
<div class="container">
<h2 class="main-title">Master the Keyboard. Conquer the Clock.</h2>
<p class="subtitle">The ultimate platform to boost your typing speed and accuracy.</p>
<div class="typing-test-area">
<div id="time-selection" class="time-selection">
<button class="time-btn" data-time="30">30s</button>
<button class="time-btn active" data-time="60">60s</button>
<button class="time-btn" data-time="120">120s</button>
</div>
<div id="sentence-display" class="sentence-display">Select time and click "Start" to begin...</div>
<textarea id="typing-input" placeholder="Type here..." disabled rows="3"></textarea>
<div class="stats-controls">
<div class="stats">
<div class="stat-item">WPM: <span id="wpm">0</span></div>
<div class="stat-item">Accuracy: <span id="accuracy">100</span>%</div>
<div class="stat-item">Time: <span id="timer">60</span>s</div>
</div>
<div class="buttons">
<button id="start-btn" class="btn btn-primary">Start</button>
<button id="reset-btn" class="btn btn-secondary" style="display:none;">Reset</button>
</div>
</div>
<div id="result-message" class="result-message"></div>
</div>
</div>
</section>
<section id="features" class="content-section">
<div class="container">
<h2 class="section-title">Why <span class="highlight">Choose</span> Us?</h2>
<div class="features-grid">
<div class="feature-item"><!-- Feature 1 --></div>
<div class="feature-item"><!-- Feature 2 --></div>
<div class="feature-item"><!-- Feature 3 --></div>
</div>
</div>
</section>
<!-- === IN-CONTENT AD === -->
<div class="ad-placeholder ad-in-content">
<!--native banner ads--> <br>
<!-- Native / In-Content Ad Code Yahan Paste Karein -->
</div>
<section id="about" class="content-section" style="background-color: #fff;">
<div class="container">
<h2 class="section-title">About <span class="highlight">TypeSpeed</span></h2>
<p>TypeSpeed is a modern typing test platform built for everyone...</p>
</div>
</section>
<!-- === BOTTOM BANNER AD === -->
<div class="ad-placeholder ad-bottom-banner">
<!--7280*90 ads--> <br>
<!-- Bottom Banner Ad Code Yahan Paste Karein -->
</div>
</main>
<footer>
<div class="container">
<p>© <span id="current-year"></span> TypeSpeed. All Rights Reserved. Designed with <span class="highlight">Passion</span>.</p>
</div>
</footer>
</div>
<script>
// JavaScript bilkul pehle jaisa hai, usmein koi tabdeeli nahi.
// Use the same JavaScript from the previous correct answer.
document.addEventListener('DOMContentLoaded', () => {
const sentences=["The quick brown fox jumps over the lazy dog.","Pack my box with five dozen liquor jugs.","How vexingly quick daft zebras jump!","Bright vixens jump; dozy fowl quack.","The five boxing wizards jump quickly.","A wizard's job is to vex chumps quickly in fog.","JavaScript is a versatile programming language.","Practice makes perfect, especially in typing.","Coding is an art, a science, and a craft.","The rain in Spain stays mainly in the plain.","To be or not to be, that is the question.","Fast typists can often type over 100 words per minute.","Accuracy is just as important as speed.","Challenge yourself daily to see improvements."];
const sentenceDisplay=document.getElementById('sentence-display');
const typingInput=document.getElementById('typing-input');
const timerDisplay=document.getElementById('timer');
const wpmDisplay=document.getElementById('wpm');
const accuracyDisplay=document.getElementById('accuracy');
const startBtn=document.getElementById('start-btn');
const resetBtn=document.getElementById('reset-btn');
const resultMessage=document.getElementById('result-message');
const timeSelection=document.getElementById('time-selection');
const timeButtons=timeSelection.querySelectorAll('.time-btn');
const currentYearSpan=document.getElementById('current-year');
currentYearSpan.textContent=(new Date).getFullYear();
let timeLimit=60;
let timeRemaining=timeLimit;
let currentSentence="";
let timerInterval;
let testActive=!1;
let cumulativeTypedEntries=0;
let cumulativeErrors=0;
timeButtons.forEach(button=>{button.addEventListener('click',()=>{if(testActive)return;timeLimit=parseInt(button.getAttribute('data-time'));timeButtons.forEach(btn=>btn.classList.remove('active'));button.classList.add('active');resetTest()})});
startBtn.addEventListener('click',startTest);
resetBtn.addEventListener('click',resetTest);
typingInput.addEventListener('input',handleTyping);
function startTest(){if(testActive)return;resetState();testActive=!0;loadNewSentence();typingInput.disabled=!1;typingInput.focus();startBtn.style.display='none';resetBtn.style.display='inline-block';timeButtons.forEach(btn=>btn.disabled=!0);timerInterval=setInterval(updateTimer,1e3)}
function endTest(){testActive=!1;clearInterval(timerInterval);typingInput.disabled=!0;const timeElapsedInMins=timeLimit/60;const grossTypedEntries=cumulativeTypedEntries+typingInput.value.length;const totalErrors=cumulativeErrors+countCurrentErrors();const grossWPM=grossTypedEntries/5/timeElapsedInMins;const finalWPM=Math.round(grossWPM>0?grossWPM:0);wpmDisplay.textContent=finalWPM;const correctChars=grossTypedEntries-totalErrors;const finalAccuracy=grossTypedEntries>0?Math.round(correctChars/grossTypedEntries*100):100;accuracyDisplay.textContent=finalAccuracy;resultMessage.innerHTML=`Test Over! <br> Your Score: <strong>${finalWPM} WPM</strong> with <strong>${finalAccuracy}%</strong> accuracy.`;startBtn.textContent="Try Again";startBtn.style.display='inline-block';resetBtn.style.display='none';timeButtons.forEach(btn=>btn.disabled=!1)}
function resetTest(){clearInterval(timerInterval);resetState();typingInput.disabled=!0;sentenceDisplay.innerHTML='Select time and click "Start" to begin...';startBtn.textContent="Start";startBtn.style.display='inline-block';resetBtn.style.display='none';timeButtons.forEach(btn=>btn.disabled=!1)}
function handleTyping(){if(!testActive)return;const typedValue=typingInput.value;const sentenceChars=sentenceDisplay.querySelectorAll('span');sentenceChars.forEach((charSpan,index)=>{const typedChar=typedValue[index];charSpan.classList.remove('correct','incorrect','current');if(typedChar==null){if(index===typedValue.length)charSpan.classList.add('current')}else if(typedChar===charSpan.innerText){charSpan.classList.add('correct')}else{charSpan.classList.add('incorrect')}});if(typedValue.length===currentSentence.length){cumulativeTypedEntries+=currentSentence.length;cumulativeErrors+=countCurrentErrors();loadNewSentence()}}
function updateTimer(){timeRemaining--;timerDisplay.textContent=timeRemaining;if(timeRemaining<=0){endTest()}}
function loadNewSentence(){currentSentence=sentences[Math.floor(Math.random()*sentences.length)];sentenceDisplay.innerHTML='';currentSentence.split('').forEach(char=>{const charSpan=document.createElement('span');charSpan.innerText=char;sentenceDisplay.appendChild(charSpan)});typingInput.value='';if(sentenceDisplay.firstChild){sentenceDisplay.firstChild.classList.add('current')}}
function countCurrentErrors(){const typedValue=typingInput.value;let errors=0;currentSentence.slice(0,typedValue.length).split('').forEach((char,index)=>{if(char!==typedValue[index])errors++});return errors}
function resetState(){testActive=!1;timeRemaining=timeLimit;timerDisplay.textContent=timeRemaining;wpmDisplay.textContent=0;accuracyDisplay.textContent=100;typingInput.value='';resultMessage.textContent='';cumulativeTypedEntries=0;cumulativeErrors=0}
resetTest()
});
</script>
</body>
</html>
0 Comments