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

My calculator app

Muhammad Gad•260
@GADMuhammad
A solution to the Calculator app 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?

I'm most proud of successfully completing the calculator app challenge from Frontend Mentor, especially how I implemented the different themes and the responsive design, ensuring a smooth user experience across various devices. The logic for handling different calculations and edge cases also worked seamlessly, which was a significant achievement.

Next time, I would focus on optimizing the code further for better performance and perhaps add some more advanced features, like the ability to handle more complex mathematical operations or a history feature to keep track of previous calculations. Additionally, I would consider improving the user interface even more to make it visually appealing and intuitive.

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

One of the main challenges I encountered was ensuring the accuracy of the calculations, especially when dealing with edge cases and various operator precedence. To overcome this, I thoroughly tested the app with a wide range of inputs and edge cases to identify any issues. I also reviewed and refined the calculation logic to handle these scenarios correctly.

Another challenge was implementing the different themes and ensuring that the design remained consistent and responsive across all devices. I overcame this by using CSS variables for theme management and media queries to adjust the layout for different screen sizes. Additionally, I made extensive use of browser developer tools to test and debug the UI on various devices.

Finally, ensuring the app was accessible and user-friendly was important. I addressed this by incorporating ARIA roles and ensuring keyboard navigation was smooth, enhancing the overall user experience for all users.

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

I would like help with the following specific areas of my project:

  1. Code Optimization: Suggestions on how to optimize the JavaScript code for better performance, especially regarding calculation logic and handling state changes.

  2. Advanced Features: Guidance on implementing more advanced features, such as a history of previous calculations or support for more complex mathematical functions.

  3. UI/UX Enhancements: Feedback on improving the user interface and user experience, including visual design and intuitive interactions.

  4. Testing: Advice on best practices for testing the application, including setting up automated tests for both unit and end-to-end testing to ensure reliability and robustness.

  5. Error Handling: Improvements in error handling to gracefully manage invalid inputs or unexpected user actions without breaking the application.

  6. Accessibility: Enhancing accessibility, including ensuring the app is fully navigable via keyboard, providing appropriate ARIA roles and labels, and improving color contrast for better readability.

Any insights or recommendations in these areas would be greatly appreciated to further enhance the quality, functionality, and accessibility of the calculator app.

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 Muhammad Gad'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
Frontend Mentor logo

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

Frontend Mentor

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

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

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit 1st-party linked stylesheets, and styles within <style> tags.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.