G-Calc
Web Utility
01 — Project Overview
G-Calc is a sleek, modern calculator web app that combines striking visual design with flawless arithmetic evaluation.
Frontend Engineer
Stack
02 — The Problem
Goal
To build a web-based calculator that feels exactly like a premium native mobile application.
User Issue
Most web calculators suffer from poor mobile responsiveness, awkward tap targets, and clunky aesthetics.
03 — The Process
Mobile-First Layout
Implemented dynamic CSS transforms and viewport units to perfectly scale across all device sizes.
Glassmorphism UI
Utilized backdrop-filter blurring and semi-transparent layers for a deeply modern aesthetic.
Key Challenge
Handling complex edge cases in continuous mathematical operations (e.g., chained operators, floating point precision).
const evaluateExpression = (expr: string): number => { /* Safe parsing logic */ };04 — The Solution
Developed a robust state machine to manage inputs, combined with a sanitized evaluation engine to process mathematical strings securely.
05 — Results & Learnings
Impact
Delivered a highly polished, interactive utility that perfectly scales from ultra-wide monitors down to the smallest smartphone screens.
Learnings
CSS scale transforms are highly effective for maintaining strict aspect ratios across wildly differing viewports.
What I'd do differently
Integrate scientific functions and a history log.