Overview

The Web Calculator project is a dynamic browser-based application designed to execute mathematical calculations with high precision, robust input handling, and clean user feedback. Developed as a collaborative team assignment within the Mayerfeld Practicum Program alongside three fellow developers, the objective was to build a fully functional, intuitive digital calculator from scratch using vanilla web technologies without relying on external libraries or frameworks.

The application features a clean, responsive interface equipped with basic arithmetic operators, real-time display updates, decimal control, backspace functionality, keyboard support, and dynamic error handling for edge-case scenarios.

The Challenge

Building a reliable web calculator requires handling seamless user interaction while maintaining strict computational accuracy and logical state consistency within a collaborative codebase. Key challenges included:
     - Collaborative Architecture & Sequential Logic: Coordinating logic across the team to design a unified execution flow where multi-step expressions (e.g., 12 + 7 - 5 * 3 =) evaluate sequentially pair-by-pair rather than breaking or calculating out of order.

     - Edge-Case Validation: Preventing application crashes and invalid math states, such as preventing multiple decimal point entries (12.3.56) and safely handling division by zero with custom visual error messages.

     - UI/UX & Display Overflow: Managing long floating-point decimal results so they are properly rounded and formatted to fit within screen boundaries without breaking the UI.

     - Dual Input System: Synchronizing mouse click events with physical keyboard keypresses for fluid user interaction.

Our Approach

Working in a team of four, we established a modular JavaScript architecture centered around clear separation of concerns, defensive programming, and shared state tracking:
Core Arithmetic & Controller (operate logic):
     - Built fundamental mathematical functions (add, subtract, multiply, divide) and unified them under a master operate() controller function that handles binary evaluation.

State & Display Management:
     - Implemented persistent state variables to track the stored initial number, selected operator, current display value, and evaluation status.
     - Constructed defensive logic to automatically evaluate and update the display when a user selects a second operator without pressing = first.

Input Sanitization & Edge-Case Protection:
     - Decimal Validation: Added logic to conditionally disable or ignore additional decimal button clicks when a decimal is already present in the current input value.
     - Zero Division Safeguard: Implemented a check during division that intercepts zero divisors, outputting a clear humorous error message instead of resulting in Infinity or crashing the app.
     - Decimal Rounding: Integrated precise floating-point rounding logic (toFixed / dynamic precision) to keep decimal results clean and prevent text overflow.

Enhanced UX & Keyboard Binding:
     - Integrated a backspace function to allow users to modify entries character-by-character.
     - Mapped global keydown event listeners to match physical keyboard input (numbers, operator keys, Enter for equals, and Backspace/Delete for clear/delete) with on-screen button triggers.

Project Gallery

Results

Developed successfully within the Mayerfeld Practicum Program framework, the finished application is a highly responsive, error-proof web calculator that delivers a smooth user experience:
     - Seamless Execution: Performs sequential calculations flawlessly with immediate visual feedback after every operator selection or evaluation.

     - Robust Logic & Stability: Completely prevents common input errors (like duplicate decimals or division by zero), maintaining state integrity at all times.

     - Intuitive Dual Input: Offers complete feature parity between tactile screen buttons and physical keyboard navigation for fast user input.

     - Clean & Scalable Team Codebase: Built through efficient peer collaboration with clean, modular ES6 JavaScript, providing a solid foundation for future extensions.