Smart Rule of Three 📐

A dynamic web-based calculator for simple and compound proportions. This tool features a modern glassmorphism interface that adapts its input fields in real-time based on the number of variables required for the calculation.

💡 The Solution

Standard calculators often provide static grids that clutter the UI with unnecessary fields. This project solves that by using:

• Adaptive Interface: The JavaScript logic generates specific input columns only after the user defines the number of quantities.
• Horizontal Flow: Values are organized side-by-side to visually represent the mathematical relationship ($A \rightarrow B$).
• Glassmorphism Design: A premium look achieved with backdrop filters, radial gradients, and Lexend typography.

🛠️ Technologies

• Vanilla JavaScript: Handles real-time DOM manipulation, dynamic field generation, and the calculation of direct/compound proportions.
• Modern CSS: Implements Flexbox for absolute centering, glass effects, and @keyframes for background animations.
• HTML5: A semantic structure designed for dynamic content injection.

📂 Project Structure

The code is organized into dedicated files to ensure scalability and clean maintenance:

• index.html: Main shell containing the dynamic content containers.
• style.css: Visual identity, including glass effects and grid centering.
• script.js: State management for steps and the core mathematical logic.

🚀 How to Run

1. Clone this repository to your local machine.
2. Open index.html in any modern web browser.
3. Enter the number of variables (2 for simple, 3+ for compound) and click "Continue".

---

👤 Author

Pedro Henrique

• Instagram: @pedrohzed