A browser-based calculator with a dark glassmorphism UI, built with plain HTML, CSS, and JavaScript. It is designed to feel fast and responsive on phones, tablets, and desktops, with clear feedback on every interaction.
- Core operations — Addition, subtraction, multiplication, and division with chained expressions (each new operator evaluates the previous step).
- Glassmorphism layout — Frosted panel, soft gradients, and a restrained teal accent on a dark background.
- Responsive design — Scales comfortably from small phones to larger screens without breaking the keypad grid.
- Micro-interactions — Hover lift and slight scale-down on press so buttons feel tactile.
- Keyboard support — Type digits and operators; Enter or = for equals, Backspace for delete, Esc to clear.
- Error handling — Division by zero shows a short, readable message in a distinct color instead of breaking the UI.
- Clear controls — C clears all state; DEL removes the last entered character (or resets after a finished calculation).
- HTML5 (semantic structure, accessible live region for the display)
- CSS3 (custom properties, grid, backdrop blur,
clamp()for fluid type) - Vanilla JavaScript (no build step or dependencies)
Open index.html in a modern browser, or serve the folder with any static file server.
This project was created as a portfolio piece for the CodeAlpha frontend internship, demonstrating hand-written UI polish and straightforward calculator logic without frameworks.