Calculator

This is a solution to the first javascript fundamentals project on 'The Odin Project'.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• string together several operations and get the right answer, with each pair of numbers being evaluated at a time. For example, 12 + 7 - 5 * 3 = should yield 42. Your calculator should not evaluate more than a single pair of numbers at a time. Example: you press a number button (12), followed by an operator button (+), a second number button (7), and finally a second operator button (-). Your calculator should then do the following: first, evaluate the first pair of numbers (12 + 7), second, display the result of that calculation (19), and finally, use that result (19) as the first number in your new calculation, along with the next operator (-).

• Answers should be rounded with long decimals so that they don’t overflow the screen.

• Pressing = before entering all of the numbers or an operator could cause problems!

• Pressing “clear” should wipe out any existing data.. make sure the user is really starting fresh after pressing “clear”

• Display a snarky error message if the user tries to divide by 0… and don’t let it crash your calculator!

Screenshot

Links

• Live Site URL: View This Calculator Project Here

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Javascript

What I learned

• HTML Global Attributes
• CSS Grid layout
• CSS Variables
• Advanced DOM Manipulation
• .matches() method and the .target property.

To see how you can add code snippets, see below:

Continued development

• Improve the look and feel of the project.
• Add edge cases to the calculator functionality.

Useful resources

• CSS TRICKS - This helped me to learn CSS grids for layout. I really liked this pattern and will use it going forward. I'd recommend it to anyone still learning this concept.

• Jaybees TechTalk - This is an amazing YouTube channel which helped me understand a lot of concepts, He did the same curriculum(TOP) and documented everything so when I'm stuck, I just visit his channel.

• -

Author

• Github - Github
• Twitter - @cybr_coder

Acknowledgments

First off, I would give all the thanks to God for making everything possible. I would like to acknowledge The Odin Project for the great resource it is despite been free and open source.