Technical Specification: Percentage of Total Calculator

Overview

A clean, professional, and highly responsive single-file browser application designed to calculate the percentage of a value relative to a total. The application focuses on speed, accessibility, and a clutter-free user experience.

Core Features

• Real-Time Calculation: Results update instantly as the user types (no submit button required).
• Dual-Mode Calculation:
  • Mode 1: What is the percentage of X out of Y?
  • Mode 2: Calculate a percentage of a total (e.g., What is 20% of 100?).
• Live History: A visual history table of the current session's calculations, stored in-memory (resets on page refresh).
• Copy to Clipboard: One-tap button to copy results for use elsewhere.
• Responsive Design: Fluid layout that adjusts from full-screen desktop view to mobile touch-friendly inputs.
• Input Sanitization: Robust handling of non-numeric characters to ensure stability.

UI/UX Specification

• Layout:
  • Header: Simple, centered title and tagline.
  • Main Container: A high-contrast, centered white card with subtle shadows and rounded corners (border-radius: 12px).
  • Input Area: Large, easily clickable inputs with floating labels for accessibility.
  • Results Area: A prominent display area using a distinct primary color (e.g., #2563eb) to emphasize the calculation result.
  • History Panel: A secondary section below the main calculator that lists previous operations without saving them to permanent storage.
• Color Palette (Light Mode Only):
  • Background: #f9fafb (Cool Gray)
  • Card Background: #ffffff (White)
  • Primary Text: #111827 (Dark Slate)
  • Secondary Text: #6b7280 (Gray)
  • Accent/Primary Button: #2563eb (Vibrant Blue)
  • Borders: #e5e7eb (Light Gray)

Interaction & Animation

• Transitions: Use CSS transition: all 0.2s ease-in-out for input focus states, button hovers, and result updates.
• Micro-interactions: A slight scale-up animation on button clicks and a fade-in effect when a new entry is added to the calculation history.

Development Constraints (Strict)

• Single File: All HTML, CSS, and Vanilla JavaScript must reside in one file. Use CDNs for Tailwind CSS (via script/link tags).
• No Storage: localStorage, sessionStorage, cookies, and IndexedDB are strictly forbidden. All state (including history) must be maintained in JavaScript variables.
• No Frameworks: Use pure DOM manipulation (no React, Vue, or Angular).
• No Popups: Do not use alert(), confirm(), or prompt(). All notifications or errors should be displayed as DOM elements within the flow of the application.
• Iframe Ready: The code must function without errors inside a sandboxed iframe. Ensure no external dependencies assume top-level access.