Character Counter

src/plays/character-counter/CharacterCounter.css

@@ -0,0 +1,85 @@
+.character-counter-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  min-height: 500px;
+  padding: 2rem;
+  background-color: #f0f2f5;
+}
+
+.counter-card {
+  background: #fff;
+  padding: 30px;
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  width: 100%;
+  max-width: 700px;
+}
+
+.counter-title {
+  margin-bottom: 20px;
+  color: #1a202c;
+  font-size: 1.5rem;
+}
+
+.counter-textarea {
+  width: 100%;
+  height: 250px;
+  padding: 15px;
+  border: 2px solid #e2e8f0;
+  border-radius: 8px;
+  font-size: 16px;
+  line-height: 1.5;
+  outline: none;
+  transition: border-color 0.2s;
+  color: black;
+}
+
+.counter-textarea:focus {
+  border-color: #4a90e2;
+}
+
+.stats-container {
+  display: flex;
+  justify-content: space-between;
+  margin: 25px 0;
+  gap: 10px;
+}
+
+.stat-item {
+  flex: 1;
+  background: #f8fafc;
+  padding: 15px;
+  border-radius: 8px;
+  text-align: center;
+  border: 1px solid #edf2f7;
+}
+
+.stat-num {
+  display: block;
+  font-size: 1.8rem;
+  font-weight: bold;
+  color: #4a90e2;
+}
+
+.stat-label {
+  font-size: 0.75rem;
+  color: #718096;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.reset-btn {
+  background-color: #e53e3e;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 600;
+  transition: opacity 0.2s;
+}
+
+.reset-btn:hover {
+  opacity: 0.9;
+}

src/plays/character-counter/CharacterCounter.jsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import './CharacterCounter.css';
+
+const CharacterCounter = () => {
+  const [text, setText] = useState('');
+
+  const charCount = text.length;
+  const wordCount = text.trim() === '' ? 0 : text.trim().split(/\s+/).filter(Boolean).length;
+  const readingTime = Math.ceil(wordCount / 200);
+
+  return (
+    <div className="character-counter-wrapper">
+      <div className="counter-card">
+        <h2 className="counter-title">Character & Word Counter</h2>
+
+        <textarea
+          className="counter-textarea"
+          placeholder="Start typing or paste your text here..."
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+        />
+
+        <div className="stats-container">
+          <div className="stat-item">
+            <span className="stat-num">{charCount}</span>
+            <span className="stat-label">Characters</span>
+          </div>
+          <div className="stat-item">
+            <span className="stat-num">{wordCount}</span>
+            <span className="stat-label">Words</span>
+          </div>
+          <div className="stat-item">
+            <span className="stat-num">{readingTime} min</span>
+            <span className="stat-label">Reading Time</span>
+          </div>
+        </div>
+
+        <button className="reset-btn" onClick={() => setText('')}>
+          Clear All
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default CharacterCounter;

src/plays/character-counter/Readme.md

@@ -0,0 +1,22 @@
+# Character Counter
+
+A simple, real-time character and word counter built with React. This play helps users analyze the length of their text and estimate reading time.
+
+### 🚀 Features
+- **Real-time Counting**: Counts characters (including spaces) and words as you type.
+- **Accurate Word Logic**: Uses Regex to ensure multiple spaces or new lines don't inflate the word count.
+- **Reading Time Estimation**: Calculates the average time a human would take to read the text (based on 200 wpm).
+- **Clear Action**: A one-click button to reset the text area.
+
+### 💻 React Concepts Used
+- **useState Hook**: To manage the string state of the text input.
+- **Event Handling**: Capturing `onChange` events to trigger re-calculations.
+- **Derived State**: Calculating counts directly during the render for better performance.
+
+### 🛠️ How to use
+1. Type or paste your text into the provided text area.
+2. View the statistics updated instantly in the cards below.
+3. Click "Clear All" to start fresh.
+
+---
+**Author**: IamAnkit19

src/plays/character-counter/meta.json

@@ -0,0 +1,13 @@
+{
+  "id": "character-counter",
+  "name": "Character Counter",
+  "description": "A clean tool to calculate character and word count in real-time.",
+  "language": "js",
+  "level": "Beginner",
+  "tags": "useState, Regex",
+  "author": "IamAnkit19",
+  "github_id": "IamAnkit19",
+  "cover": "https://placehold.co/600x400?text=Character+Counter",
+  "blog": "",
+  "video": ""
+}