/calculator

This browser calculator project is the final project of the foundations section in The Odin Project's curriculum.

Primary LanguageJavaScript

Calculator

Screenshot of the Calculator app.

Description

This browser calculator project is a part of The Odin Project's curriculum. The Odin Project provides a high quality web development education maintained by an open source community.

Main Features

  • Basic Mathematical Operations
  • Auxiliary Buttons: Sign Change, All Clear and Delete Button.
  • Operator Switching Ease: This feature empowers users to effortlessly switch between operators during their calculations. Once a number and an operator have been entered, users can seamlessly change the operator by tapping another operator button.
  • Cumulative Equals: The calculator's 'Cumulative Equals' feature allows you to repeatedly press the equals button after performing an operation. Each time you press equals, the calculator adds the last entered number to the current result, effectively creating a cumulative effect.
  • Decimal Numbers Support
  • Responsive Design: Consistent user experience across screens.

To Do:

  • Advanced Mathematical Operations
  • Keyboard Support

Tech

The project is built with:

  • HTML
  • Vanilla JavaScript
  • CSS

Tools:

  • VS Code
  • Git

Reflection

This project is the final project of the foundations section in The Odin Project's curriculum. Throughout this foundational phase we've covered the basics of web development and I've gained a strong grasp of the fundamental concepts. There is plenty more to explore and learn, but I'm able to create quite a bit at this point. I'm pretty comfortable working and building with HTML, Vanilla JavaScript and CSS and I'm looking forward to learning more, delving deeper into the more advanced topics and building more intricate and bigger projects.

Credits

  • The function getDisplayNumber is implemented following this Web Dev Simplified's tutorial. The getDisplayNumber function takes a numeric value as its argument and returns a formatted string that represents the number in a user-friendly display format with proper thousand separators contributing to an improved user experience and more understandable numerical representation.
  • The CSS reset used in the project is created by Joshua Comeau.

Happy coding!