Simple Web Calculator

A basic calculator built with HTML, CSS, and JavaScript. It supports addition, subtraction, multiplication, and division through a clickable button interface.

Files

FilePurposecalculator.htmlCombined HTML, CSS, and JS — single file, ready to run

Note: The original code was split across three files (index.html, styles.css, script.js). These have been merged into a single calculator.html file so it works immediately without needing separate linked files in the same folder.

Features

Number pad (0–9) and decimal point (.) Operators: +, -, *, / = button to evaluate the expression C button to clear the display Dark themed UI with orange-highlighted operator buttons Basic error handling — invalid expressions show Error on the display

How to Run

Save the file as calculator.html. Double-click it, or open it in any web browser (Chrome, Firefox, Edge, etc.). No server, build step, or internet connection required — it runs entirely client-side.

How to Use

Click number and operator buttons to build an expression (e.g. 7, +, 3). Click = to evaluate and display the result. Click C to clear the display and start over.

Example

Input: 9 * 9 Click: = Output: 81

How It Works

appendToDisplay(input) — appends the clicked character to the display field. calculate() — runs eval() on the display string to compute the result; wrapped in a try/catch so invalid expressions (like 5 + * 2) show "Error" instead of crashing. clearDisplay() — resets the display to an empty string.

Known Limitations

Uses eval() to compute results. This is fine for a personal/learning project, but eval() is generally unsafe for production apps since it can execute arbitrary JavaScript if the input isn't controlled. A production version should use a proper expression parser instead. No keyboard support — input is mouse/touch only (button clicks). No support for advanced operations (percentage, square root, exponents, parentheses). The #keys container has a gap: 10px CSS rule, but since it isn't a flex or grid container, this property currently has no visual effect. Button rows are separated using
tags instead. Pressing = with an incomplete expression (e.g. just +) will show Error.

Possible Improvements

Replace eval() with a safe math expression parser. Add keyboard input support (number keys, Enter for =, Escape for C). Convert #keys to CSS Grid for cleaner, more responsive button alignment. Add more operations: %, √, ^, parentheses. Add a backspace/delete button.

Requirements

Any modern web browser with JavaScript enabled.

License

Free to use, modify, and distribute for educational purposes.