Soap Making Fragrance Load Calculator

Overview

A clean, professional, and highly responsive web application designed for soap makers to calculate the exact amount of fragrance or essential oil required for a specific batch size. This tool removes the complexity of manual unit conversion and percentage math, helping users adhere to safety guidelines for soap crafting.

Technical Constraints & Directives

• Single File Architecture: All HTML, CSS, and Vanilla JavaScript must reside in one single file. No build steps.
• Storage Blocked: Do NOT use localStorage, sessionStorage, or cookies. The application must be stateless. If the page is refreshed, the inputs reset.
• No Popups: Replace alert() or prompt() with custom in-modal HTML overlays.
• Modern Aesthetic: Use a vibrant light-mode palette (Clean whites, soft teals, and professional grays). No dark mode.
• Performance: Instant feedback using vanilla JS input event listeners.

UI/UX Specification

1. Header

• Title: "Soap Fragrance Load Calculator"
• Subtitle: "Accurately calculate essential oil and fragrance ratios for your soap batches."

2. Main Tool Area (Central Card)

• Inputs:
  • Total Batch/Oil Weight Input (Numeric field with unit toggle: Grams/Ounces).
  • Fragrance Load Percentage Slider (Range input 0.1% to 10.0%, with numeric stepping).
  • Preset buttons for common loads (e.g., 2%, 3%, 5%).
• Results Area:
  • Large, bold display of the exact amount to add.
  • A clear indicator of "Total Batch Size" vs "Fragrance Weight."
  • A "Safety Disclaimer" text box that is always visible.

3. Design Tokens (Light Mode)

• Primary Color: #0f766e (Teal)
• Background: #f8fafc (Cool Gray)
• Card Background: #ffffff (White)
• Typography: Inter or System Sans-Serif.
• Shadows: Soft 0 4px 6px -1px rgb(0 0 0 / 0.1) for card elevation.
• Transitions: transition: all 0.2s ease-in-out for all interactive elements.

Core Logic

• Formula: Result = (Total Weight) * (Fragrance Percentage / 100)
• Responsive Behavior:
  • Desktop: Sidebar controls, results on the right.
  • Mobile: Stacked layout with controls at the top, results immediately below.
• Micro-interactions: When the slider moves, the result number should fade/update smoothly without refreshing the page.

SEO Strategy

• Use semantic HTML5 elements (<main>, <section>, <article>, <header>).
• Provide schema.org JSON-LD for the Calculator App for search engine indexing.
• Ensure the page title and H1 are distinct and include high-intent keywords.