Character Counter Web App (HTML, CSS, JavaScript)

🚀 Introduction

This is a Character Counter Web Application built using HTML, CSS, and JavaScript.
It provides real-time text analysis including characters, words, sentences, paragraphs, lines, and reading time.

It also tracks social media & SEO limits with visual progress indicators.

---

🧩 Features

• Live character counting
• Word, sentence, paragraph, line counters
• Reading time estimator
• Social media limits tracking
• Over-limit detection
• Progress bar indicator

---

🧱 HTML (Structure)

<!-- 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>

---

🎨 CSS (Styling)

/* 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;
}

---

⚙️ JavaScript (Logic)

// 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 + "%";
  });
}

---

🏁 Conclusion

This project helped me understand real-time DOM manipulation, text processing, and UI state management using JavaScript.

---

📝 Note

This project documentation has been structured with the assistance of AI tools to ensure clarity and a professional presentation.