Frontend Mentor — Character Counter App

Challenge Difficulty Status React Tailwind CSS JavaScript

This is my solution to the Character Counter challenge on Frontend Mentor.

App Preview

• Character count (with or without spaces)
• Word and sentence count
• Set a character limit with over-limit warning
• Estimated reading time
• Letter density bar graph
• Multiple color themes
• Fully keyboard accessible
• Responsive across all screen sizes

• React
• Tailwind CSS
• Vite (or Create React App — update as needed)

This challenge pushed my JavaScript DOM manipulation skills — particularly around:

• Real-time input event handling for live counts
• Building a dynamic bar graph from letter frequency data without a charting library
• Managing multiple UI states (theme switching, character limit toggling) cleanly

No dependencies or build steps required.

git clone https://github.com/blordeus/character-counter-app.git
cd character-counter-app
open index.html

Or just open index.html directly in your browser.

• Live Demo ← add your deployed URL
• Frontend Mentor Challenge

Bryan Lordeus
Portfolio · Frontend Mentor · GitHub