Beginner•Web Development

Modern Calculator

Build a fully functional, dark-themed calculator using only HTML, CSS, and vanilla JavaScript. Features arithmetic operations, percentage, decimal support, a calculation history panel, and full keyboard input — no frameworks, no backend required.

📚Scroll down to see free videos & courses ↓

View on GitHub

What You Will Build

A sleek, responsive calculator with a glassmorphism dark UI. It supports addition, subtraction, multiplication, division, percentage, and decimal inputs. Users can chain operations, delete the last character, clear the display, view a toggleable calculation history panel, and interact entirely via keyboard. Error states like division by zero are handled gracefully with a shake animation.

Concepts You'll Learn

Structuring a UI with semantic HTML and a CSS grid button layout
Managing application state with plain JavaScript variables
Handling operator chaining and sequential calculations correctly
Preventing invalid inputs — duplicate decimals, leading operators, division by zero
Dynamic DOM updates — changing display content and font size based on input length
Building a toggleable history panel with click-to-restore functionality
Keyboard event handling with keydown listeners
CSS custom properties and glassmorphism design techniques
Smooth micro-animations — button press scale, error shake using the Web Animations API
Responsive design with CSS Grid and media queries for mobile support
Floating-point precision handling with toPrecision()
XSS-safe dynamic HTML rendering with manual escaping