Skip to content

A React app that lets users input text and displays a running list of inputs with individual character counts. Includes live updates, controlled inputs, and conditional rendering with styled-components.

Notifications You must be signed in to change notification settings

JyotsnaGuntha/Characters-Count

Repository files navigation

Character Counter App

This is a React JS application that helps users count the number of characters typed into an input field. It showcases the use of lists, keys, controlled inputs, and component structuring in React.

Refer to the image below:


Character Counter

🔧 Functionality Features

  • Add Input Feature: Users can type text into an input field and click the Add button to save it.
  • 🔢 Character Count Display: Each saved input displays the number of characters it contains.
  • 🆕 Live State Reset: After adding, the input field clears automatically.
  • 🈳 No User Inputs View: If no inputs are present, a placeholder image is shown.
  • 🔁 List Rendering: Uses dynamic rendering with the uuid package to assign unique keys.
  • 🎯 Responsive Layout: Mobile-first design that adapts to all screen sizes.

About

A React app that lets users input text and displays a running list of inputs with individual character counts. Includes live updates, controlled inputs, and conditional rendering with styled-components.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published