A basic, responsive calculator built using HTML, CSS, and JavaScript, featuring a clean glassmorphism UI and smooth interactions.
This project was built to strengthen frontend fundamentals like DOM manipulation, event handling, and CSS Grid layouts.
👉 Reminder: Try it live here
🔗 https://iharshity.github.io/Basic-Calculator/
- ➕ Basic arithmetic operations (
+,-,×,÷) - 🔢 Decimal number support
- 🧼 Clear (AC) button
- 🟰 Equal (
=) button with error handling - 🧠 Prevents multiple operators in sequence
- 🎨 Modern glassmorphism UI
- 📱 Responsive design
- 🧩 Grid-based layout using CSS Grid
- HTML5 – Structure
- CSS3 – Styling, Grid layout, Glass UI
- JavaScript (ES6) – Logic & interactivity
├── index.html # Calculator structure
├── style.css # UI styling
├── script.js # Calculator logic
└── README.md # Documentation
- Handling button input using event listeners
- Managing calculator state efficiently
- Preventing invalid operator combinations
- Using CSS Grid for complex layouts
- Designing a modern UI from scratch
- Glassmorphism using
backdrop-filter - Gradient equals (
=) button - Dark theme for better readability
- Smooth hover and click animations
This calculator uses JavaScript’s eval() function for simplicity.
While fine for learning projects, it is not recommended for production due to security concerns.
- Clone the repository:
git clone https://github.com/iharshity/Basic-Calculator.git
- Open index.html in your browser