Doppler Effect Frequency Shift Calculator

Overview

A high-precision, web-based physics calculator designed to compute the observed frequency of sound waves based on the relative motion of a source and an observer. This tool provides instant results without page refreshes, making it ideal for classroom settings, physics labs, and quick audio engineering checks.

Core Features

• Real-Time Calculation: Observed frequency updates instantly as input sliders or numeric fields are adjusted.
• Unit Flexibility: Toggle between m/s, km/h, and mph for velocity inputs.
• Speed of Sound Presets: Built-in presets for common media (e.g., Air at 20°C, Water, Steel) to ensure accurate baseline constants.
• Visual Wave Representation: A dynamic CSS/SVG component that visually demonstrates wave compression (blue-shift equivalent) and expansion (red-shift equivalent) based on the input speeds.
• Formula Display: A clear, typeset display of the specific formula being solved for the current inputs.

UI/UX Specification

• Aesthetic: Clean, professional, light-mode interface using a palette of soft whites, slate grays, and energetic primary blues for interactive elements.
• Layout:
  • Header: Clean title with a brief subtitle explaining the utility.
  • Main Input Panel: A structured two-column grid. Column 1: Source parameters (Frequency, Velocity, Direction). Column 2: Observer parameters (Velocity, Direction, Medium selection).
  • Visualization Area: A central canvas area showing a simplified representation of the sound waves interacting with the source and observer.
  • Results Area: A prominent, high-contrast card displaying the final frequency in large, clear typography.
• Interactions: Smooth, CSS-based transitions for all state changes. No jarring refreshes or standard browser alerts.

Technical Implementation Constraints

• Single File: The entire application (HTML, CSS, JS) must be contained in one index.html file.
• Vanilla Architecture: No external frameworks (React, Vue, etc). Use standard HTML5, CSS3 (Tailwind CSS via CDN allowed), and Vanilla JavaScript.
• Iframe Compatibility: The app is strictly sandboxed. No localStorage, sessionStorage, or cookies. All data management must be performed in volatile memory variables.
• Interaction Handling: Do not use prompt() or confirm(). All interactive warnings or confirmations must be built as custom HTML modal overlays.
• Responsive: Fluid grid system that adapts from mobile (single column) to desktop (multi-column) seamlessly.

Color Palette

• Background: #F9FAFB (Off-white)
• Surface/Card: #FFFFFF (Pure white)
• Primary Text: #111827 (Slate Gray)
• Primary Action: #2563EB (Royal Blue)
• Secondary/Accent: #64748B (Cool Gray)
• Border: #E2E8F0 (Light Gray)

Animations

• Input Transitions: Focus states on inputs should have a smooth box-shadow transition (transition: all 0.2s ease-in-out).
• Wave Animation: Use a CSS keyframes animation for the visualizer to represent wave propagation speed, controlled by JS variables based on input velocity.