calculator

calculator with js

A basic calculator built with HTML, CSS, and JavaScript that performs arithmetic operations using clickable number and operator buttons.

This project focuses on understanding:

• DOM manipulation
• Event handling
• State management in JavaScript

Features

• Addition (+)
• Subtraction (−)
• Multiplication (×)
• Division (÷)
• Supports multi-digit numbers
• Handles decimal numbers
• Prevents division by zero
• Interactive button-based input
• Clean and simple UI

Project Structure calculator/ │ ├── index.html # Structure of the calculator ├── style.css # Styling and layout ├── index.js # Calculator logic └── README.md # Project documentation

How It Works

¬ User Input

• Number buttons build the first and second numbers.
• Operator buttons store the selected operation.
• The equals (=) button triggers the calculation.

Calculator Logic

• Numbers are stored as strings to allow multi-digit input.

• Operators are saved and executed only when = is pressed.

• Math is handled using real functions:

  • add()
  • subtract()
  • multiply()
  • division()

State Management

The calculator keeps track of:

• firstNumber
• secondNumber
• currentOperator
• Whether the user is entering the second number

Key JavaScript Concepts Used

• querySelectorAll()
• addEventListener()
• Arrow functions
• Conditional logic
• Switch statements
• DOM updates
• Basic error handling

How to Run the Project

1. Download or clone the project
2. Open index.html in any modern browser
3. Click the buttons to perform calculations

No additional setup required.

// wanted to add these but i had to get help from ai to get most of the js code done // will come back to this when i know i can handle it Possible Improvements

• Add a clear/reset button
• Support keyboard input
• Allow chained operations
• Improve mobile responsiveness
• Add animations and hover effects