iOS Style Web Calculator

Overview

The iOS Style Web Calculator is a responsive web application designed to replicate the minimalist aesthetic and functional logic of the iOS 18 calculator. It features a high-fidelity interface with a mobile-contained UI, ensuring a consistent user experience across different screen sizes. The project prioritizes smooth interactions and advanced state management for a seamless "native app" feel in the browser.

Technical Features

• Dual-Display System: Implements complex logic where the current equation moves to a secondary display upon calculation, while the main display updates with the result.
• Advanced History Management: Includes a slide-up drawer that tracks session calculations, allowing users to review, multi-select, and delete specific records.
• Dynamic UI States: Features an "Edit Mode" in the history panel where the delete action dynamically updates its label based on the number of items selected using a Set for index tracking.
• Mobile-Optimized UX: Prevents common mobile browser issues like double-tap zooming on Safari through custom event handling and utilizes CSS Grid for a precise circular button layout.
• Arithmetic Engine: Handles standard operations (addition, subtraction, multiplication, division, and percentage) with built-in error handling for invalid expressions.

Project Architecture

The project is built using a clean, vanilla tech stack (HTML5, CSS3, ES6+ JavaScript) to ensure high performance and zero dependencies. State management is handled through global variables and a Set to track UI modes and history selections. The UI is styled using CSS custom properties for a unified iOS color palette and absolute positioning for the slide-up history sidebar.