devmalik7 · devmalik7 · Oct 23, 2025 · Oct 12, 2025 · Oct 21, 2025
diff --git a/Javascript/Word Counter/README.md 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!
diff --git a/Javascript/Word Counter/index.html b/Javascript/Word Counter/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Text Counter</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="container">
+    <h2>Text Counter</h2>
+    <button id="themeToggle">🌙 Night Mode</button>
+    <textarea id="textInput" placeholder="Type or paste your text here..."></textarea>
+
+    <div class="stats">
+      <div class="stat">Words: <span id="wordCount">0</span></div>
+      <div class="stat">Characters: <span id="charCount">0</span></div>
+      <div class="stat">Sentences: <span id="sentenceCount">0</span></div>
+    </div>
+  </div>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/Javascript/Word Counter/script.js 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
@@ -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;
+}