Facebook Pixel

Word Counter

React.js
medium
30 mins

Build a Word Frequency Counter that dynamically analyzes user input text and displays how often each word appears. The counter is case-insensitive, ignores special characters, and sorts the output in descending order of frequency.

Things to do

  • Create a textarea where users can type or paste any text.
  • Every time the text changes, update the word count list in real-time.
  • Case-insensitive word matching
  • Ignore symbols, numbers, punctuation, and extra white spaces.
  • Sorts words by their frequency (most used on top)
  • Each word should be shown with the number of times it occurs (e.g., hello: 3 Times).

Example

Input:

React, React Testing NamasteDev!

Output:

react count: 2 namastedev count: 1 testing count: 1

How it Works

  1. User types into the textarea
  2. On each character change:
  • Text is cleaned: punctuation is removed, all words are lowercased.
  • Words are split and counted.
  • Results are sorted by frequency and displayed as a list.

Testing Instructions

Please use the following data-testid attributes in your React component:

  • textarea β†’ for the textarea input
  • result-list β†’ for the textarea input
  • word-{word} β†’ for each word e.g "word-react"

Reference UI

wordCounter

Preview what you need to build

Companies:

swiggy
pinterest
flipkart

Solve Similar questions πŸ”₯

Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.