Scientific Calculator & Mathematical Tool

Overview

A comprehensive, high-precision scientific calculator built for engineers, students, and professionals. This tool supports standard arithmetic, trigonometric functions, logarithmic operations, and logical gates. The application is designed to be a standalone, high-performance web utility.

Technical Architecture

• Single File: All HTML, CSS, and Vanilla JavaScript are contained within a single index.html file.
• Performance: Zero-dependency architecture preferred, or minimal reliable CDNs (e.g., math.js via CDN for precision handling).
• Sandboxed Compatibility: The app is built to run in a null-origin iframe.
  • No Storage: Absolutely no localStorage, sessionStorage, or cookies. State is managed via JavaScript objects in memory.
  • No Blockers: No alert(), confirm(), or prompt() calls. All user feedback/errors are handled via custom-styled UI modals.
• Security: Strict input sanitization is mandatory to prevent execution of malicious code.

UI/UX Specification

• Aesthetic: Clean, "SaaS" aesthetic. High-contrast, vibrant, professional.
• Palette:
  • Background: #FFFFFF (White)
  • Cards/Containers: #F9FAFB (Light Grey)
  • Borders: #E5E7EB (Subtle Grey)
  • Primary Buttons: #2563EB (Vibrant Blue)
  • Text: #1F2937 (Dark Grey)
• Layout:
  • Header: Simple title area with a help/info button.
  • Display Area: A large, read-only input field showing the current equation, with a secondary small text field for the running calculation result.
  • Keypad: A responsive 5-column grid layout for desktop, collapsing to 4-column on mobile. Grouped inputs: Arithmetic, Trig (sin, cos, tan), Logs (log, ln), and Logic (AND, OR, NOT, XOR).

Key Features

• Mathematical Functions:
  • Arithmetic: +, -, *, /, ^, √
  • Trigonometry: sin, cos, tan, asin, acos, atan (Switchable degrees/radians).
  • Logarithmic: log10, ln.
  • Logic: AND, OR, NOT, XOR, NAND.
• History Tracking (Volatile): A side-panel or modal that lists the current session's calculations. Clears automatically on page refresh.
• Responsive Design:
  • Desktop: Sidebar for advanced functions.
  • Mobile: Hamburger-style menu or tab-switching interface for accessing non-arithmetic functions.

Interaction Design

• Animations: Subtle transition: all 0.2s ease-in-out on all button hover states. Active state scaling (transform: scale(0.95)) for tactile feedback.
• Error Handling: When a syntax error occurs, a custom UI component replaces the "=" button or appears in a toast notification to explain the error (e.g., "Invalid Syntax").