member-mudi-calculator. A JavaScript Calculator Project

This project is part of the Foundations Course from The Odin Project. The goal is to build an on-screen calculator using JavaScript, HTML, and CSS, applying the concepts learned throughout the course.

Table of Contents

• Introduction
• Project Requirements
• Features
• Usage
• Technologies Used
• Challenges and Learnings
• Future Improvements

Introduction

This calculator allows users to perform basic arithmetic operations like addition, subtraction, multiplication, and division. The project consolidates knowledge of JavaScript functions, DOM manipulation, and event handling.

Project Requirements

The calculator must include the following features:

1. Basic Math Operations: Addition, Subtraction, Multiplication, Division.
2. Operate Function: A function that takes an operator and two numbers, then returns the result of applying the operator.
3. User Interface: Buttons for each digit and operation, a display for showing the result.
4. Clear Functionality: A button to reset the display and stored values.
5. Handle Multiple Calculations: The calculator should handle one operation at a time, and use the result of the previous calculation as the first number for the next calculation.
6. Error Handling: Display an error message for invalid operations (e.g., division by zero).
7. Round Long Decimals: Ensure that long decimal numbers are rounded to prevent overflow on the display.

Features

• Addition, Subtraction, Multiplication, and Division: Perform these basic arithmetic operations with ease.
• Clear Functionality: Reset the calculator at any time.
• Chained Calculations: Continue calculations using the result of the previous operation.
• Error Messages: Snarky error messages for invalid inputs or operations.
• Decimal Support: Handle floating-point numbers accurately.

Usage

To use the calculator:

1. Enter the first number by clicking the digit buttons.
2. Select an operator (e.g., +, -, *, /).
3. Enter the second number.
4. Press the = button to calculate the result.
5. Use the C button to clear the display and start a new calculation.

Technologies Used

• HTML: Structure the calculator's user interface.
• CSS: Style the calculator to make it visually appealing.
• JavaScript: Implement the calculator's functionality and interactivity.

Challenges and Learnings

During this project, I encountered several challenges, including:

• Managing Multiple Operations: Ensuring that the calculator only performs one operation at a time and correctly uses the result for subsequent calculations.
• Error Handling: Implementing logic to handle edge cases, such as division by zero.
• UI Design: Creating a user-friendly interface that reflects the calculations accurately.

These challenges provided valuable learning opportunities in problem-solving and JavaScript debugging.

Future Improvements

• Decimal Input: Users can input decimal numbers and perform calculations with floating-point precision.
• Backspace Button: Allows users to delete the last entered digit.
• Keyboard Support: Users can interact with the calculator using their keyboard for an enhanced user experience.
• Enhance Design: Further improve the user interface to make it more responsive and visually appealing.
• Memory Functions: Implement memory buttons (M+, M-, MR) to store and recall values.
• Scientific Functions: Add advanced operations like square roots, exponents, and trigonometric functions.

Conclusion

This project was a comprehensive exercise in applying JavaScript, HTML, and CSS to build a functional and interactive web application. The experience has solidified my understanding of JavaScript fundamentals and DOM manipulation.

---

Project from The Odin Project.