Genetics Linkage Map Recombination Frequency Calculator

Overview

This single-file application is a high-precision, user-friendly calculator designed for biology students, geneticists, and researchers. It allows users to input phenotypic counts from genetic crosses and instantly calculate the Recombination Frequency (RF) and genetic map distance in centimorgans (cM).

Technical Specifications

• Architecture: Pure HTML5, CSS3, and Vanilla JavaScript. No external build steps or frameworks.
• Storage: State is managed entirely in-memory. No localStorage, sessionStorage, or cookies.
• Compatibility: The app must function perfectly inside a sandboxed iframe. No popups (use custom modals).
• Responsive Design: Mobile-first approach using CSS Flexbox and Grid. The UI should scale seamlessly from mobile devices to high-resolution desktop monitors.

UI/UX Design

• Aesthetic: Premium SaaS look—clean, minimalist, and professional. Use a light color palette (Off-white backgrounds, soft gray borders, slate-blue accents for primary buttons).
• Animations: Subtle transitions (200ms ease-in-out) for input focus, button hovers, and result updates. No jarring movements.
• Components:
  • Header: Minimalist title and description.
  • Main Input Section: Two distinct columns for 'Parental Types' and 'Recombinant Types'. Each input field must have clear labels and micro-tooltips for guidance.
  • Calculated Results: An prominent, centered result card displaying the calculated RF % and centimorgans.
  • Visual Scale: A horizontal bar chart component that visually represents the map distance, dynamically updating as numbers are keyed in.
  • Reset Control: A subtle, clear button to reset input fields.

Core Features

1. Real-Time Calculation: The application calculates results instantaneously as the user types (on input event listener).
2. Input Validation: Non-negative integer restriction. Custom UI error handling (e.g., highlighting fields in red) if totals are logically inconsistent.
3. Visual Representation: A simple, clean, SVG-based line drawing that stretches to represent the genetic distance proportionally.
4. Data Management: Since localStorage is blocked, include a 'Copy Results' button that formats the input and output as a text string for easy sharing or pasting into lab notebooks.

Color Palette

• Background: #F9FAFB (Very Light Gray)
• Surface/Card: #FFFFFF (White)
• Text Primary: #1F2937 (Dark Slate)
• Text Secondary: #6B7280 (Medium Gray)
• Accent (Actions): #2563EB (Bright SaaS Blue)
• Border: #E5E7EB (Subtle Gray)

Developer Directives

• Ensure the document uses modern semantic HTML5 (<main>, <section>, <article>).
• Implement all UI interactions (e.g., showing/hiding explanation modals) via CSS classes (e.g., .is-visible, .is-hidden).
• Do not use alert(), confirm(), or prompt(). Create a custom div overlay for any necessary notifications or educational pop-ups.
• All external assets (e.g., Google Fonts, Tailwind via CDN) must use secure https links.
• Ensure the app is accessible: use proper aria-labels and ensure high color contrast.