Thermodynamics Enthalpy of Reaction Hess's Law Solver

Project Overview

A browser-based, high-performance thermodynamics calculator designed to help chemistry students calculate the enthalpy of reaction ($ΔH$) using Hess's Law. The app allows users to input multiple reaction steps, manipulate coefficients, and calculate the total enthalpy change.

Core Features

• Dynamic Equation Input: Add or remove an unlimited number of reaction steps dynamically without page reloads.
• Algebraic Manipulation: Intuitive buttons for each step to 'Reverse' the reaction or 'Multiply/Divide' coefficients.
• Real-time Summation: Automatic calculation of the net reaction and the total enthalpy ($ΔH_{total}$) as steps are modified.
• Stoichiometry Validator: Automatic alerts if the intermediate species do not cancel out correctly to form the target reaction.
• Export Results: Copy the final calculation breakdown to the clipboard for reports.

UI/UX Design System

• Layout:
  • Header: Fixed top bar with a clean, centered title and a 'Clear All' reset function.
  • Input Section: A clean card-based list where each step is a row containing reactants, products, and a numeric input for $\Delta H$ (kJ/mol).
  • Results Section: A floating 'summary card' at the bottom (or side on desktop) that displays the calculated Net Reaction and the final $\Delta H$ value.
• Aesthetic:
  • Color Palette: Light-themed. Background #F8FAFC, Primary #2563EB (Blue), Success/Result #059669 (Emerald), Warning #DC2626 (Red).
  • Typography: Inter or system-ui sans-serif stack for maximum readability.
  • Shadows: Soft, subtle drop shadows on cards to create depth without clutter.

Technical Implementation Directives

• Single File Architecture: All HTML, CSS, and JS must be contained in one index.html file. CSS should be in a <style> block; JS in a <script> block.
• No Storage: Zero usage of localStorage, sessionStorage, cookies, or IndexedDB. State must be handled entirely in JavaScript memory objects.
• No Popups: Avoid alert() or confirm(). Use custom-built modal windows (positioned absolutely/fixed) for confirmations or error messages.
• Performance: Use vanilla JavaScript event delegation to handle dynamic list item events (e.g., clicks on 'Reverse' buttons).
• Responsive Design: The reaction rows must stack vertically on mobile (narrow view) and expand into a tabular grid on desktop viewports.

Interaction Design

• Animations:
  • Use CSS transition: all 0.2s ease-in-out for all hover states.
  • When a step is added or removed, use a simple opacity fade-in/out animation.
  • Results update instantly via JS event listeners attached to the input fields (debounced if necessary for performance).
• Feedback: Provide immediate visual feedback when an equation is reversed (e.g., the $\Delta H$ input field border changes color slightly to indicate a sign change).