Skip to content

A modern, responsive web app for quickly calculating proportions. Features automatic light/dark theme, multilingual support (Italian/English), animated error handling, operation history, and a polished user interface.

License

Notifications You must be signed in to change notification settings

R0mb0/Proportion_Calculator_WebApp

Proportion Calculator WebApp

Codacy Badge pages-build-deployment Maintenance Open Source Love svg3 MIT Donate

A modern, responsive web app for quickly calculating proportions. Features automatic light/dark theme, multilingual support (Italian/English), animated error handling, operation history, and a polished user interface. All computations happen instantly in your browser.


🚀 Features

  • Proportion calculation UI: Calculate ratios in the form X : Y = Z : A with one unknown (x or X). Enter three known values, set one unknown — get your solution instantly.
  • Responsive design: Works flawlessly on desktop, tablet, and mobile. Adapts layout for both landscape and portrait modes.
  • Automatic light/dark theme: Matches your system or browser preference with a smooth animated transition.
  • Multilingual (IT/EN): Automatically detects your browser language — Italian for Italian settings, English for everything else.
  • Intuitive error handling: Input checking ensures only one unknown is present. Animated modal popups explain errors or invalid inputs.
  • Calculation history: All operations are listed at the bottom of the page for reference, with results highlighted in green.
  • Animated highlights: The solved field is illuminated with a green border for clarity.
  • User help: Dedicated help button (lifebuoy icon top-right) shows a friendly usage guide in a popup.
  • Reset button: After each calculation, a prominent reset button lets you quickly clear all fields and start fresh.
  • No dependencies: Runs entirely client-side, no data upload or server required.

💡 How To Use

  1. Open the app in your browser (just open the link above).
  2. Enter three numeric values in the main proportion layout:
    Value : Base = Value : Base
  3. In the field you want to solve, type x (or X). Only one unknown is allowed.
  4. Click the Calcola! / Calculate! button.
  5. The app checks your inputs:
    • If there's an error (multiple unknowns, missing values, etc.) a modal popup appears explaining the issue.
    • If valid, the app calculates the missing value, highlights it in green, and adds the operation to the cronology/history below.
  6. Optional: Click the Reset button to clear the interface and start a new calculation.
  7. Tap the lifebuoy icon in the top right for instant help.

🎨 User Interface Highlights

  • Modern style: rounded corners, soft shadows, visually balanced typography and spacing.
  • All elements scale gracefully for mobile and desktop.
  • Input boxes dynamically resize according to content.
  • Error and help popups with smooth entrance animations.
  • History section stays fixed at the bottom with each result colored for quick identification.

📱 Mobile Experience

  • The interface remains horizontal as long as possible, guaranteeing optimal readability.
  • On very narrow screens, inputs reorder vertically for clarity and optimal space usage.
  • Touch targets and controls are sized for comfort.
  • All features and animations remain available on mobile devices.

🔒 Privacy & Security

  • All processing is done locally in your browser.
  • No input is ever sent to a server.
  • No data is stored except in-session for the live history display.

🏆 Why use this tool?

  • Get proportion solutions instantly, with clear explanation if something’s wrong.
  • Use on the go — perfect for students, professionals, or anyone dealing with ratios/conversions.
  • Works everywhere, no registration, no installation, no dependencies.

📣 Feedback & Contributions

Open issues, request features, and help improve the project! All contributions and suggestions warmly welcomed.

About

A modern, responsive web app for quickly calculating proportions. Features automatic light/dark theme, multilingual support (Italian/English), animated error handling, operation history, and a polished user interface.

Topics

Resources

License

Code of conduct

Contributing

Security policy

Stars

Watchers

Forks

Sponsor this project

Languages