<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Character Counter</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body{
background:linear-gradient(135deg,#0f172a,#1e293b,#111827);
}
textarea{
resize:none;
}
::-webkit-scrollbar{
width:8px;
}
::-webkit-scrollbar-thumb{
background:#64748b;
border-radius:999px;
}
.stat-card{
transition:.25s ease;
}
.stat-card:hover{
transform:translateY(-4px);
}
</style>
</head>
<body class="min-h-screen text-white">
<div class="max-w-7xl mx-auto px-5 py-10">
<!-- Header -->
<div class="text-center mb-10">
<h1 class="text-4xl md:text-5xl font-bold">
Character Counter
</h1>
<p class="text-slate-400 mt-3 max-w-2xl mx-auto">
Count characters, words, sentences, paragraphs, spaces, and estimate reading time instantly as you type.
</p>
</div>
<!-- Main Card -->
<div class="bg-slate-800/70 backdrop-blur-xl rounded-3xl shadow-2xl border border-slate-700 overflow-hidden">
<!-- Toolbar -->
<div class="flex flex-wrap gap-3 p-6 border-b border-slate-700">
<button id="pasteBtn"
class="px-5 py-3 rounded-xl bg-slate-700 hover:bg-slate-600 transition">
📋 Paste
</button>
<button id="copyBtn"
class="px-5 py-3 rounded-xl bg-emerald-600 hover:bg-emerald-500 transition">
📄 Copy
</button>
<button id="sampleBtn"
class="px-5 py-3 rounded-xl bg-indigo-600 hover:bg-indigo-500 transition">
Sample Text
</button>
<button id="clearBtn"
class="px-5 py-3 rounded-xl bg-red-600 hover:bg-red-500 transition">
🗑 Clear
</button>
</div>
<!-- Text Area -->
<div class="p-6">
<textarea
id="text"
placeholder="Start typing or paste your text here..."
class="w-full h-80 md:h-96 rounded-2xl bg-slate-900 border border-slate-700 p-5 text-base focus:ring-2 focus:ring-cyan-500 focus:outline-none"></textarea>
</div>
<!-- Statistics -->
<div class="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-8 gap-5 p-6 pt-0">
<div class="stat-card bg-slate-900 rounded-2xl p-5 text-center">
<div id="characters" class="text-3xl font-bold text-cyan-400">0</div>
<div class="text-slate-400 mt-2 text-sm">Characters</div>
</div>
<div class="stat-card bg-slate-900 rounded-2xl p-5 text-center">
<div id="charactersNoSpace" class="text-3xl font-bold text-emerald-400">0</div>
<div class="text-slate-400 mt-2 text-sm">No Spaces</div>
</div>
<div class="stat-card bg-slate-900 rounded-2xl p-5 text-center">
<div id="spaces" class="text-3xl font-bold text-orange-400">0</div>
<div class="text-slate-400 mt-2 text-sm">Spaces</div>
</div>
<div class="stat-card bg-slate-900 rounded-2xl p-5 text-center">
<div id="words" class="text-3xl font-bold text-violet-400">0</div>
<div class="text-slate-400 mt-2 text-sm">Words</div>
</div>
<div class="stat-card bg-slate-900 rounded-2xl p-5 text-center">
<div id="sentences" class="text-3xl font-bold text-pink-400">0</div>
<div class="text-slate-400 mt-2 text-sm">Sentences</div>
</div>
<div class="stat-card bg-slate-900 rounded-2xl p-5 text-center">
<div id="paragraphs" class="text-3xl font-bold text-yellow-400">0</div>
<div class="text-slate-400 mt-2 text-sm">Paragraphs</div>
</div>
<div class="stat-card bg-slate-900 rounded-2xl p-5 text-center">
<div id="lines" class="text-3xl font-bold text-red-400">0</div>
<div class="text-slate-400 mt-2 text-sm">Lines</div>
</div>
<div class="stat-card bg-slate-900 rounded-2xl p-5 text-center">
<div id="readingTime" class="text-3xl font-bold text-sky-400">0</div>
<div class="text-slate-400 mt-2 text-sm">Read (min)</div>
</div>
</div>
<!-- Progress -->
<div class="px-6 pb-6">
<div class="flex justify-between text-sm text-slate-400 mb-2">
<span>Character Limit (1000)</span>
<span id="limitText">0 / 1000</span>
</div>
<div class="w-full bg-slate-700 rounded-full h-4 overflow-hidden">
<div id="progressBar"
class="h-full bg-cyan-500 rounded-full transition-all duration-300"
style="width:0%">
</div>
</div>
</div>
</div>
</div>
<script>
const textarea=document.getElementById("text");
const limit=1000;
function update(){
const text=textarea.value;
const characters=text.length;
const charactersNoSpace=text.replace(/\s/g,'').length;
const spaces=(text.match(/ /g)||[]).length;
const words=text.trim()?text.trim().split(/\s+/).length:0;
const sentences=text.trim()?Math.max((text.match(/[.!?]+/g)||[]).length,1):0;
const paragraphs=text.trim()?text.split(/\n\s*\n/).filter(p=>p.trim()).length:0;
const lines=text===""?0:text.split(/\n/).length;
const reading=(words/200).toFixed(2);
document.getElementById("characters").textContent=characters;
document.getElementById("charactersNoSpace").textContent=charactersNoSpace;
document.getElementById("spaces").textContent=spaces;
document.getElementById("words").textContent=words;
document.getElementById("sentences").textContent=sentences;
document.getElementById("paragraphs").textContent=paragraphs;
document.getElementById("lines").textContent=lines;
document.getElementById("readingTime").textContent=reading;
const percent=Math.min((characters/limit)*100,100);
const bar=document.getElementById("progressBar");
bar.style.width=percent+"%";
if(percent<70){
bar.className="h-full bg-cyan-500 rounded-full transition-all duration-300";
}else if(percent<90){
bar.className="h-full bg-yellow-500 rounded-full transition-all duration-300";
}else{
bar.className="h-full bg-red-500 rounded-full transition-all duration-300";
}
document.getElementById("limitText").textContent=`${characters} / ${limit}`;
}
textarea.addEventListener("input",update);
document.getElementById("clearBtn").onclick=()=>{
textarea.value="";
update();
};
document.getElementById("sampleBtn").onclick=()=>{
textarea.value=`Character Counter is a simple yet powerful online tool that instantly counts characters, words, spaces, sentences, paragraphs, and lines while you type.
It is ideal for writers, students, bloggers, social media managers, developers, and anyone working with text.`;
update();
};
document.getElementById("copyBtn").onclick=()=>{
navigator.clipboard.writeText(textarea.value);
const btn=document.getElementById("copyBtn");
btn.innerHTML="✅ Copied";
setTimeout(()=>{
btn.innerHTML="📄 Copy";
},1500);
};
document.getElementById("pasteBtn").onclick=async()=>{
try{
const txt=await navigator.clipboard.readText();
textarea.value=txt;
update();
}
catch{
alert("Clipboard access denied.");
}
};
update();
</script>
</body>
</html>