📝 Character Counter

A lightweight React.js application designed to count the number of characters in a given word or sentence. This project serves as a demonstration of clean React practices and usage of key libraries.

---

🚀 Project Purpose

This project was built to exhibit core React.js development skills, including component-based architecture, state management, and integration of third-party packages such as styled-components and uuid.

---

🧰 Tech Stack

• React.js
• JavaScript (ES6+)
• HTML5
• Styled-components (for styling)
• UUID (for unique key generation)
• Git (for version control)

---

✅ Features

• Accepts input from the user and displays the total number of characters upon pressing "Add".
• Displays a clear error message if:
  • The input field is submitted empty.
  • All characters are removed after initially typing something.

---

🧪 How to Use

1. Type a word or sentence into the input box.
2. Click the Add button.
3. View the number of characters instantly.
4. If the input box is empty or cleared, an error message will appear:
   "Please enter text".

---

Refer to the image below:

Design Files

Click to view

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - No User Inputs View
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px)

Set Up Instructions

Click to view

• Download dependencies by running npm install
• Start up the app using npm start

Resources

Image URLs

• https://assets.ccbp.in/frontend/react-js/no-user-inputs-img.png alt should be no user inputs

Font-families

• Roboto

Colors

Hex: #ffc533

Hex: #334155

Hex: #0f172a

Hex: #ffbf1f

Hex: #272c47

Hex: #ffffff

Hex: #475569

Hex: #1e293b

👤 Author

GitHub: @bhuvan-007-github

---