Submitted 10 days ago

Interactive Calculator with Theme Switching

#pure-css

Asia Ashraf•390

@asia272

Preview site View code

This is a solution for...Calculator app

HTML
CSS
JS

3intermediate

Design comparison

SolutionDesign

Solution retrospective

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

I'm proud of successfully implementing dynamic theming using CSS variables and JavaScript. It was exciting to see how CSS variables could be manipulated with JavaScript to provide a seamless user experience. Next time, I would optimize the JavaScript code further to make the theme toggling even more efficient and scalable.

What challenges did you encounter, and how did you overcome them?

Applying multiple themes with CSS variables → Used :root variables and dynamically switched themes via JavaScript. Implementing a safe calculation function → Avoided using eval(), instead used match() to extract tokens and processed calculations step by step. Handling division by zero → Added error handling to prevent mathematical errors and displayed appropriate error messages.

What specific areas of your project would you like help with?

Any feedback would be appreciated.

Community feedback

Eniola•90
@EniloladePosted 5 days ago
Wow, well done, but imagine if you could use keys on the keyboard for calculation instead of clicking alone.
Marked as helpful
0
Asia Ashraf•390
@asia272Posted 5 days ago
Thank you, @Enilolade! That's a great suggestion! Implementing keyboard support for calculations would definitely improve the user experience. I'll look into adding this feature in the next update. Appreciate your feedback!
0
Muhammad Awais•1,100
@muhammadawaislaalPosted 2 days ago
its fantastic
1

Please log in to post a comment

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