Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted 9 months ago

Character Counter built with REACT | VITE | JSX - MikDra1

react, vite, styled-components
P
MikDra1โ€ข7,430
@MikDra1
A solution to the Character counter challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


What are you most proud of, and what would you do differently next time?

๐Ÿ’ป Hello Frontend Mentor Community,

This is my solution for Character Counter.

  • Scored 97,75% on Google Pagespeed Insights! ๐Ÿš€
  • Solution with 100% W3C validation accuracy! ๐ŸŒŸ

  • You should be able to:

  • Analyze the character, word, and sentence counts for their text

  • Exclude/Include spaces in their character count

  • Set a character limit

  • Receive a warning message if their text exceeds their character limit

  • See the approximate reading time of their text

  • Analyze the letter density of their text

  • Select their color theme

  • View the optimal layout for the interface depending on their device's screen size

  • See hover and focus states for all interactive elements on the page

  • Additionally:

  • Your preferred theme will be saved in localStorage, ensuring that your chosen theme is applied automatically whenever you revisit my site.

๐Ÿ› ๏ธ Built with:

  1. HTML โœจ
  2. CSS ๐ŸŽจ
  3. JavaScript ๐Ÿงพ
  4. React โš›๏ธ
  5. Vite.js ๐Ÿ’ก
  6. Context API ๐Ÿ›’
  7. Styled-Components ๐Ÿ’…
  • Fully responsive design crafted with a mobile-first approach ๐Ÿ’ป
  • Enjoyed every moment coding this! ๐Ÿ˜Ž
  • Feedback is always welcomeโ€”letโ€™s grow together! ๐ŸŒฑ
  • Completed 34 out of 43 Junior Challenges so farโ€”keeping up the momentum! ๐Ÿ”ฅ
  • Completed 2 out of 11 Junior Premium Challenges ๐Ÿ”ฅ
  • ๐Ÿ‘จโ€๐Ÿ’ป Join me on my coding journey as I tackle advanced challenges and add innovative touches to every project.
Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on MikDra1's solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
ยฉ Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License