https://github.com/balakrish001/character-counter-reactjs

Character Counter -The app should initially display an empty input and a "No User Inputs" view. Upon adding a non-empty input, it should display the input in the list, show the character count, and reset the input field
https://github.com/balakrish001/character-counter-reactjs

html-css-javascript reactjs uuid-generator

Last synced: 16 days ago
JSON representation

Character Counter -The app should initially display an empty input and a "No User Inputs" view. Upon adding a non-empty input, it should display the input in the list, show the character count, and reset the input field

• Host: GitHub
• URL: https://github.com/balakrish001/character-counter-reactjs
• Owner: Balakrish001
• Created: 2024-09-17T05:26:43.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-09-17T05:35:13.000Z (4 months ago)
• Last Synced: 2024-11-13T11:41:07.794Z (3 months ago)
• Topics: html-css-javascript, reactjs, uuid-generator
• Language: JavaScript
• Homepage:
• Size: 180 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
The goal of this coding exam is to quickly get you off the ground with **Lists and Keys** in React JS.

### 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](https://assets.ccbp.in/frontend/content/react-js/character-counter-no-user-inputs-lg-output.png)

- [Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px)](https://assets.ccbp.in/frontend/content/react-js/character-counter-lg-output.png)

### Set Up Instructions

Click to view

- Download dependencies by running `npm install`

- Start up the app using `npm start`

### Completion Instructions

Functionality to be added




The app must have the following functionalities

- Initially, the value of the user input element should be empty and [No User Inputs View](https://assets.ccbp.in/frontend/content/react-js/character-counter-no-user-inputs-lg-output.png) should be displayed.

- When a non-empty value is provided in the user input element and the **Add** button is clicked,

  - A new user input item should be added to the list of user inputs.

  - The count of characters of the value provided in the user input element should be displayed.

  - The value inside the user input element should be updated to its initial value.

### Important Note

Click to view




**The following instruction is required for the tests to pass**

- Use the `uuid` package to generate the unique id.

### Resources

Image URLs

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

Colors




Hex: #ffc533

Hex: #334155

Hex: #0f172a

Hex: #ffbf1f

Hex: #272c47

Hex: #ffffff

Hex: #475569

Hex: #1e293b


Font-families

- Roboto