Calculator App

This is my solution to the Calculator Project on The Odin Project via Calculator app challenge on Frontend Mentor.

Table of contents

• Calculator App
  • Table of contents
  • Overview
    • The goals
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Continued development
    • Useful resources
  • Author

Overview

The goals

• Perform mathmatical operations like addition, subtraction, multiplication, and division
• Adjust the color theme based on user preference
• Users can get floating point numbers

Screenshot

Links

• View code solution
• Live site preview

My process

Built with

• Semantic HTML5 markup
• CSS Flexbox, Grid & Custom properties
• Vanila JavaScripts

What I learned

• Create a clickable button, with box shadow that disappear when clicked.

.key {
  box-shadow: 0 0.15rem #000;
}

.key:active {
  box-shadow: none;
  transform: translateY(0.15rem);
}

Continued development

• Add keyboard support

Useful resources

• CSS-Tricks' Guide to Grid - This helped me to layout the keyboard. I really liked this pattern and will use it going forward.
• Fireship' Video on CSS Theme Switcher w/ CSS variables and JavaScript.
• Karim Merchant' Medium Post on Calculator UI - I'd recommend it to anyone want to learn more about this concept.

Author

• Github - Long Nguyen