Vivid Calc — Expression Parser

📖 What It Does

Vivid Calc is a browser-based calculator that evaluates full mathematical expressions — not just button-by-button arithmetic. Type a whole expression like 3^2 + (5*4) - 7%2 and get the precise result instantly.

🎮 How to Use

Click the on-screen keys or type directly on your keyboard
Press Enter (or =) to evaluate
Press Esc to clear the current expression
Press Backspace ⌫ to delete the last character
Use ± to negate the current expression
Click any history entry to reload it for editing

✨ Supported Operators

+ Addition − Subtraction × Multiplication ÷ Division % Modulo ^ Exponent ( ) Grouping -x Unary Minus

⚙️ How It Works

              
                  Tokenizer: Splits your input into numbers,
                  operators, and parentheses
                
                  Shunting-Yard Algorithm: Converts infix to
                  Reverse Polish Notation (RPN) respecting precedence &
                  associativity
                
                  RPN Evaluator: Walks the postfix stack to
                  compute the final value
                
                  Unary Minus: Detected contextually — e.g.
                  -5, (-3+2),
                  3*-1
                
                  History: Stored in
                  sessionStorage, persists across reloads within
                  the same tab session

🚀 Key JavaScript Concepts

              
                  Tokenizer: Iterates characters with a
                  while loop, greedily consuming multi-digit
                  numbers and classifying symbols into typed token objects
                

                  Shunting-Yard Algorithm: Classic Dijkstra
                  algorithm using an operator stack and output
                  queue to handle precedence, left/right
                  associativity, and parentheses
                

                  RPN Stack Evaluation: Walks the postfix token
                  array, pushing operands and applying operators via a numeric
                  stack — unary ops pop one value, binary pop two
                

                  Unary Minus Detection: Contextual check
                  against the previous token — if null, after
                  (, or after another operator,
                  - becomes u- with higher precedence
                

                  Event Delegation: Single
                  click listener on the key grid reads
                  data-value / data-action attributes
                  instead of binding per-button
                

                  Keyboard Handling:
                  keydown listener maps digit, operator, and
                  control keys to the same inputValue /
                  doAction functions used by the UI buttons
                

                  localStorage & sessionStorage: History
                  persists across page refreshes via localStorage;
                  the info popup "seen" flag uses sessionStorage so
                  it reappears each new tab session
                

                  Number Formatting: Result rounded to 12
                  decimal places with Number.EPSILON trick to
                  suppress floating-point noise like
                  0.30000000000004
                

                  Web Animations API: Error shake uses
                  element.animate() with a keyframe array for a
                  native, GPU-accelerated nudge effect
                

            

🎨 Design Features

Animated background floating orbs using CSS @keyframes with staggered animation-delay and mix-blend-mode: multiply for painterly depth
Glassmorphism cards — semi-transparent white backgrounds with backdrop-filter: blur, subtle border strokes, and layered box shadows
CSS custom properties throughout for a consistent palette of vivid purples, teals, pinks, and ambers with a single source of truth
Operator keys use a purple-to-pink gradient to visually separate them from digit keys at a glance
The = button spans two columns with a green-to-teal gradient, giving it deliberate visual weight as the primary action
Hover lift micro-interactions on every key — translateY(-2px) + elevated shadow — and a subtle scale-down on :active
History items are clickable cards with the same hover-lift treatment, reinforcing the interactive affordance
Responsive two-column grid (calc + history) collapses to single-column below 900 px via a single @media breakpoint
Popup entrance uses a combined opacity + translateY + scale CSS transition for a polished slide-up-and-bloom feel

💻 Built With

HTML5 CSS3 Vanilla JS Shunting-Yard localStorage