Calculator Project

This repository contains a comprehensive calculator application developed using HTML, CSS, and JavaScript. The HTML provides the structural layout, while the CSS adds aesthetic enhancements. The JavaScript enables fundamental mathematical operations such as addition, subtraction, multiplication, and division. It incorporates event listeners for both mouse and keyboard interactions, ensuring a seamless user experience. Robust error-handling functions are implemented to prevent issues such as division by zero and exceeding value limits, fostering user-friendliness and efficiency.

Main Features

• Responsive to both mouse and keyboard inputs
• Prevents division by zero
• Automatically removes trailing zeroes for clean output
• Resets the calculator automatically under specific conditions, such as encountering errors or infinite values
• Features a fully functional secondary display showing the ongoing equation
• Employs a main display that emulates a physical calculator's behavior
• Provides visual button feedback for intuitive usage
• Displays warnings on both screens under specific conditions
• Allows continued equations post pressing the equals sign
• Enables users to change operators during ongoing operations
• Dynamically scales text size based on the length of the characters in the main display
• Offers an interactive user interface for ease of use

Limitations

• Does not add commas for large numbers like a normal calculator does
• Limits the non-decimal number to 14 digits as BigInt was not utilized, using only the number data type
• Restricts to 34 digits when decimals are involved

Other explored concepts through research

• Utilized pseudo-classes in CSS
• Implemented Flex box for layout management
• Employed @keyframes and @font-face for customized styling in CSS
• Utilized Animation and Transition features in CSS
• Implemented clearTimeout() and setTimeout() in JavaScript for time-sensitive operations
• Utilized objects extensively in JavaScript
• Implemented mouse and keyboard events in JavaScript for enhanced interactivity

Applications Used

• Visual Studio Code
• Figma for design elements
• Git and GitHub for version control
• CodePen.io for testing and development
• Third-party code integrated for additional functionalities

Author

aroan-v

Credits

All credit goes to The Odin Project for helping me on this journey.