From 4d872016cdd99c132f885db24449f65dc579a8f4 Mon Sep 17 00:00:00 2001 From: Aaditya Agarwal <146380217+psy-duck1@users.noreply.github.com> Date: Sun, 12 Oct 2025 18:22:20 +0530 Subject: [PATCH] Add Word Counter Web App in Javascript --- Javascript/Word Counter/README.md | 52 +++++++++++++++++ Javascript/Word Counter/index.html | 24 ++++++++ Javascript/Word Counter/script.js | 29 ++++++++++ Javascript/Word Counter/style.css | 89 ++++++++++++++++++++++++++++++ 4 files changed, 194 insertions(+) create mode 100644 Javascript/Word Counter/README.md create mode 100644 Javascript/Word Counter/index.html create mode 100644 Javascript/Word Counter/script.js create mode 100644 Javascript/Word Counter/style.css diff --git a/Javascript/Word Counter/README.md b/Javascript/Word Counter/README.md new file mode 100644 index 0000000..d4fdb6d --- /dev/null +++ b/Javascript/Word Counter/README.md @@ -0,0 +1,52 @@ + +# 🧮 Word Counter Web App + +A simple and responsive web application that counts **words**, **characters**, and **sentences** in real-time as you type — featuring an elegant **Dark / Light Mode toggle**. + +*** + +## ✨ Features + +- 📝 Real-time counting of: + - Words + - Characters + - Sentences +- 🌗 Toggle between **Light Mode** and **Dark Mode** +- 💻 Responsive, minimal user interface +- ⚡ Lightweight — built using pure HTML, CSS, and JavaScript (no frameworks) + +*** + +## 🧩 File Structure + +``` +Word Counter/ +│ +├── index.html # Main HTML file +├── style.css # Styling (Light/Dark mode) +├── script.js # JavaScript logic for counting and theme toggle +└── README.md # Project documentation +``` + + +*** + +## 🚀 How to Use + +1. **Clone** or **download** this repository: +2. Open the `index.html` file in any browser. +3. Type or paste your text into the text box. +4. Watch the live counts of words, characters, and sentences update instantly. +5. Click the 🌙 Night Mode / ☀️ Light Mode button to toggle between themes. + +*** + +## 🛠️ Tech Stack + +- **HTML5** – Structure +- **CSS3** – Styling and themes +- **JavaScript (Vanilla)** – Logic and interactivity. + +*** + +Enjoy using the Text Counter Web App for all your writing and editing needs! \ No newline at end of file diff --git a/Javascript/Word Counter/index.html b/Javascript/Word Counter/index.html new file mode 100644 index 0000000..fc7633e --- /dev/null +++ b/Javascript/Word Counter/index.html @@ -0,0 +1,24 @@ + + + + + + Text Counter + + + +
+

Text Counter

+ + + +
+
Words: 0
+
Characters: 0
+
Sentences: 0
+
+
+ + + + diff --git a/Javascript/Word Counter/script.js b/Javascript/Word Counter/script.js new file mode 100644 index 0000000..10608ce --- /dev/null +++ b/Javascript/Word Counter/script.js @@ -0,0 +1,29 @@ +const textInput = document.getElementById('textInput'); +const wordCount = document.getElementById('wordCount'); +const charCount = document.getElementById('charCount'); +const sentenceCount = document.getElementById('sentenceCount'); +const themeToggle = document.getElementById('themeToggle'); + +// 🔢 Count words, characters, and sentences +textInput.addEventListener('input', () => { + const text = textInput.value.trim(); + + const words = text.length ? text.split(/\s+/).filter(Boolean).length : 0; + const chars = text.length; + const sentences = text.length ? text.split(/[.!?]+/).filter(s => s.trim().length > 0).length : 0; + + wordCount.textContent = words; + charCount.textContent = chars; + sentenceCount.textContent = sentences; +}); + +// 🌙 Toggle between dark and light mode +themeToggle.addEventListener('click', () => { + document.body.classList.toggle('dark-mode'); + + if (document.body.classList.contains('dark-mode')) { + themeToggle.textContent = '☀️ Light Mode'; + } else { + themeToggle.textContent = '🌙 Night Mode'; + } +}); diff --git a/Javascript/Word Counter/style.css b/Javascript/Word Counter/style.css new file mode 100644 index 0000000..a40ce9e --- /dev/null +++ b/Javascript/Word Counter/style.css @@ -0,0 +1,89 @@ +/* Default (Light Mode) */ +body { + font-family: 'Segoe UI', Arial, sans-serif; + background-color: #f5f5f5; + color: #222; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + margin: 0; + transition: background 0.4s, color 0.4s; +} + +.container { + width: 80%; + max-width: 700px; + text-align: center; +} + +textarea { + width: 100%; + height: 150px; + padding: 10px; + border-radius: 8px; + border: 1px solid #ccc; + font-size: 16px; + background-color: #fff; + color: #000; + resize: none; + outline: none; + transition: background 0.4s, color 0.4s, border 0.4s; +} + +.stats { + margin-top: 20px; + display: flex; + justify-content: center; + gap: 20px; + font-size: 18px; + flex-wrap: wrap; +} + +.stat { + background: #e0e0e0; + padding: 10px 20px; + border-radius: 10px; + transition: background 0.4s, color 0.4s; +} + +#themeToggle { + background: #0078d7; + color: #fff; + border: none; + padding: 8px 14px; + border-radius: 8px; + cursor: pointer; + margin-bottom: 15px; + transition: background 0.3s; +} + +#themeToggle:hover { + background: #005ea6; +} + +/* 🌙 Dark Mode */ +.dark-mode { + background-color: #121212; + color: #f1f1f1; +} + +.dark-mode textarea { + background-color: #1e1e1e; + color: #f1f1f1; + border: 1px solid #333; +} + +.dark-mode .stat { + background: #2c2c2c; +} + +.dark-mode #themeToggle { + background: #333; + color: #fff; +} + +.dark-mode #themeToggle:hover { + background: #444; +}