Skip to content
Submitted over 3 years ago

Calculator using Vue.js, scss, grid, custom properties, localStorage

Kristian Kalvå•360
@kkalvaa
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Calculator app
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

The calculator will respect your device's dark mode setting, and high contrast mode if set. You can manually change to a different theme, and the calculator will remember that choice in localStorage.

Community feedback

  • Chamu•13,130
    @ChamuMutezvaPosted over 3 years ago

    Well done, looking great.

    • replacing the operator with a zero can be confusing to the user, maybe keeping the operand or displaying the operator to the screen
    • 1 + 1 will give you the correct result 2 but to continue the operation from there will start giving you the wrong results.
    • When entering a floating number, the dot does not show until you press a number. That's confusing as some users will think that the dot is not working.
    • I cannot enter a floating number with more than 5 digits with some rounding happening during data entering
    1

Please log in to post a comment

Log in with GitHub

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