A modern, sleek, responsive web calculator built with a dark charcoal and rich orange aesthetic. This project started its journey as a desktop application built in Java Swing and was completely migrated to modern web technologies (HTML5, CSS3, and JavaScript) to allow instant, cross-platform access right from any web browser.
Check out the website here: 👉 Azaf's Calculator Website
Here is a look at the modern, rounded grid UI designed with an elegant, cohesive color system:
- Display Box: High-contrast warm orange (
#FFA732) mirroring physical digital screens. - Number Pads: Rich dark chocolate brown (
#4B2B1B) with crisp white typography. - Operators & Functions: Split distinctively between terracotta orange and dark olive tones for clean visual hierarchy.
- Core Arithmetic Operations: High-precision addition (+), subtraction (-), multiplication (x), and division (/).
-
Advanced Math Modifiers: Instant execution for squaring (
$x^2$ ), cubing ($x^3$ ), and modulus/remainder (%) operations. -
State Management Engine: Implements precise flag checking (
isOperatorClicked) to seamlessly append multiple numbers or transition to evaluating new values. - Modern Web layout: Built from scratch using CSS Grid and Flexbox models instead of absolute pixel mapping, ensuring pixel-perfect sizing.
- Smooth Interactions: Active button scaling animations mimic physical keypress feedback.
-
HTML5: Handles structural configuration and standard superscript representations (
$x^2, x^3$ ). - CSS3: Built using Grid layout systems, linear gradients, and responsive sizing.
- JavaScript (ES6): Native arithmetic parsing logic, tracking values dynamically across user input events.