<!-- Main Container -->
<div class="main">

 <!-- Heading -->
 <h1>Character Counter</h1>

 <!-- Description -->
 <p>
 Count characters, words, sentences, paragraphs, and lines in real time.
 Check your text against social media limits.
 </p>

 <!-- Textarea Input -->
 <textarea class="textarea" placeholder="Write here..."></textarea>

 <!-- Stats Section -->
 <div class="gridContainer">

 <div class="gridItem">
 <h5 class="totalCharacter">0</h5>
 <p>Characters</p>
 </div>

 <div class="gridItem">
 <h5 class="totalSpaces">0</h5>
 <p>Spaces</p>
 </div>

 <div class="gridItem">
 <h5 class="totalWords">0</h5>
 <p>Words</p>
 </div>

 <div class="gridItem">
 <h5 class="totalSentence">0</h5>
 <p>Sentence</p>
 </div>

 <div class="gridItem">
 <h5 class="totalParagraphs">0</h5>
 <p>Paragraphs</p>
 </div>

 <div class="gridItem">
 <h5 class="totalLines">0</h5>
 <p>Lines</p>
 </div>

 <div class="gridItem">
 <h5 class="readingTime">0</h5>
 <p>Reading Time</p>
 </div>

 </div>

 <!-- Social Media Limits Section -->
 <h2>Social Media & SEO Limits</h2>

 <div class="feedback">

 <!-- Twitter -->
 <div class="platformContent">
 <div class="title">
 <p>X / Twitter Post</p>
 <p class="count" data-limit="280">280 left (0 / 280)</p>
 </div>
 <div class="indicator">
 <p class="indicatorLevel"></p>
 </div>
 </div>

 <!-- Instagram -->
 <div class="platformContent">
 <div class="title">
 <p>Instagram Caption</p>
 <p class="count" data-limit="2200">2200 left (0 / 2200)</p>
 </div>
 <div class="indicator">
 <p class="indicatorLevel"></p>
 </div>
 </div>

 </div>
</div>

/* Reset */
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

/* Fonts */
body {
 font-family: Arial;
 background: black;
}

/* Main box */
.main {
 max-width: 600px;
 margin: 50px auto;
 background: #a3a3a3;
 padding: 20px;
 border-radius: 10px;
}

/* Textarea */
.textarea {
 width: 100%;
 height: 150px;
 padding: 10px;
 resize: none;
}

/* Grid */
.gridContainer {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
 gap: 10px;
}

.gridItem {
 background: white;
 padding: 10px;
 text-align: center;
 border-radius: 8px;
}

/* Indicator */
.indicator {
 width: 100%;
 height: 10px;
 background: #ddd;
}

.indicatorLevel {
 width: 0%;
 height: 10px;
 background: green;
 transition: 0.3s;
}

// Get elements
let textareaEl = document.querySelector(".textarea");
let totalCharacterEl = document.querySelector(".totalCharacter");
let totalSpacesEl = document.querySelector(".totalSpaces");
let totalWordsEl = document.querySelector(".totalWords");
let totalSentenceEl = document.querySelector(".totalSentence");
let totalParagraphsEl = document.querySelector(".totalParagraphs");
let totalLinesEl = document.querySelector(".totalLines");
let readingTimeEl = document.querySelector(".readingTime");
const platformsContentsEl = document.querySelectorAll(".platformContent");

// Listen input
textareaEl.addEventListener("input", counter);

// Main function
function counter() {

 let text = textareaEl.value;

 // Characters
 let textLength = text.length;
 totalCharacterEl.innerText = textLength;

 // Spaces
 const spaceCount = (text.match(/ /g) || []).length;
 totalSpacesEl.innerText = spaceCount;

 // Words
 const wordCount = text.trim()
 ? text.trim().split(/\s+/).length
 : 0;
 totalWordsEl.innerText = wordCount;

 // Sentences
 const sentenceCount = (text.match(/[.!?]+/g) || []).length;
 totalSentenceEl.innerText = sentenceCount;

 // Paragraphs
 const paragraphCount = text.trim()
 ? text.split(/\n\s*\n/).filter(p => p.trim()).length
 : 0;
 totalParagraphsEl.innerText = paragraphCount;

 // Lines
 const lineCount = text.trim()
 ? text.split("\n").length
 : 0;
 totalLinesEl.innerText = lineCount;

 // Reading time
 const words = wordCount;
 const totalSeconds = Math.ceil((words / 200) * 60);
 const minutes = Math.floor(totalSeconds / 60);
 const seconds = totalSeconds % 60;

 readingTimeEl.innerText = `${minutes}m ${seconds}s`;

 // Platforms
 platformsContentsEl.forEach(platform => {

 const countEl = platform.querySelector(".count");
 const indicator = platform.querySelector(".indicatorLevel");

 const limit = parseInt(countEl.dataset.limit);
 const remaining = limit - textLength;

 if (remaining >= 0) {
 countEl.innerText = `${remaining} left (${textLength}/${limit})`;
 indicator.style.background = "green";
 } else {
 countEl.innerText = `${Math.abs(remaining)} over (${textLength}/${limit})`;
 indicator.style.background = "red";
 }

 let percent = (textLength / limit) * 100;
 if (percent > 100) percent = 100;

 indicator.style.width = percent + "%";
 });
}