A simple, clean, and responsive Calculator Web Application built using HTML, CSS, and JavaScript. This project performs basic arithmetic operations and includes a stylish UI with gradient buttons and a smooth display area.
✔ Basic arithmetic operations: +, -, ×, /, % ✔ Clear (AC) and Delete (DEL) buttons ✔ Supports decimal values ✔ Double zero (00) button ✔ Responsive and modern UI ✔ Gradient style buttons ✔ Smooth display animation ✔ Beginner-friendly project
📸 Preview
Calculator UI
(Replace with your actual screenshot or keep as it is.)
HTML5 – Structure
CSS3 – Styles & UI
JavaScript (Vanilla JS) – Functionality
📁 Project Structure calculator/ │── index.html │── style.css │── script.js │── README.md
Clone this repository:
git clone https://github.com//.git
Open the folder.
Run index.html in your browser (or use Live Server in VS Code).
- HTML
Handles layout of buttons, display screen, and calculator container.
- CSS
Gradient UI
Centered layout
Modern look with rounded corners
Hover & active effects
- JavaScript
Full evaluation using event listeners
Handles AC, DEL, %, decimal, and chain operations
By building this project, you learn:
DOM manipulation
Event handling
Building real-world UI
Designing gradients and shadows
Making responsive components
Possible upgrades:
Add keyboard support
Add scientific calculator features
Add dark/light theme toggle
Save previous calculations
Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.
📜 License
This project is open-source and available under the MIT License.