Technical Specification: Free Online Aspect Ratio Calculator

Overview

A clean, professional, single-file browser utility that allows users to determine unknown dimensions based on an existing aspect ratio or a target scaling factor.

Core Features

• Proportional Calculator: Users input three known values (e.g., Width 1, Height 1, Width 2) to instantly calculate the missing Height 2.
• Preset Ratios: A dropdown menu of common aspect ratios (16:9, 4:3, 3:2, 1:1, 9:16, 21:9).
• Real-time Validation: Instant feedback using native HTML5 validation and custom input masking to ensure only numeric values are entered.
• Responsive Preview: A visual representation showing the relative shape of the calculated dimensions.
• Clear Action: A reset button to clear inputs without page reload.

UI/UX Design

• Layout: Centered card layout on a light grey background (#f8fafc). The calculator card uses a clean white background (#ffffff) with subtle shadow (box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1)).
• Color Palette:
  • Primary: #2563eb (Blue - Buttons and Active states)
  • Secondary: #64748b (Slate - Text and secondary elements)
  • Background: #f8fafc (Off-white)
  • Borders: #e2e8f0 (Light grey)
• Transitions: Smooth 0.2s CSS transitions on all hover states and focus rings. Input fields should have a distinct border color change on focus.

Technical Directives

• Architecture: One single HTML file. CSS must be embedded in a <style> block; JS in a <script> block.
• Storage: NO localStorage, sessionStorage, or cookies. Use local variables within the scope of the calculator logic.
• Input Handling: Avoid alert() or prompt(). Use hidden <div> elements with absolute positioning to display error messages or notifications within the UI.
• Responsiveness: Use Tailwind CSS (via CDN) to ensure mobile-first design. Stack inputs vertically on small screens and horizontally on larger viewports.
• Performance: Zero external dependencies other than Tailwind CSS and basic Google Fonts (e.g., 'Inter').

Implementation Steps

1. Setup: Create a responsive grid layout.
2. State Management: Create an object in JS to track width1, height1, width2, and height2.
3. Logic: Implement a function that triggers on input event to re-calculate dimensions using the formula (Width1 / Height1) * Height2 = Width2 (and inverse).
4. UI: Add a "Copy Result" button to allow users to quickly grab their new dimension values.
5. Security: Ensure all links are rel="noopener noreferrer". Verify no code executes outside the iframe context.