Skip to content

blordeus/character-counter-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Frontend Mentor — Character Counter App

Challenge Difficulty Status React Tailwind CSS JavaScript

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

📸 Preview

App Preview

✅ Features

  • 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

🛠️ Built With

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

💡 What I Learned

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

🚀 Getting Started

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.

🔗 Links

👤 Author

Bryan Lordeus
Portfolio · Frontend Mentor · GitHub

Releases

No releases published

Packages

 
 
 

Contributors