🔢 Hex Calculator

A clean, responsive web-based Hexadecimal Calculator built using HTML, CSS, and JavaScript. This project helps users easily perform Hex addition, subtraction, multiplication, and division, and view the results in both Decimal and Hex formats.

🌟 Inspiration

This project was directly inspired by HexCalculator.org, an all-in-one platform for various hexadecimal conversions. I wanted to create a minimal, interactive version that focuses specifically on core arithmetic operations, while offering a mobile-friendly and modern UI experience.

I loved how HexCalculator.org breaks down complex conversions into simple tools — that inspired me to isolate and build a focused Hex Arithmetic Calculator with a clean interface, useful as both a learning tool and daily utility.

🛠️ How I Built It

• HTML was used to structure the calculator UI with clear input fields and a dropdown for operations.
• CSS was used to style the layout with a modern, dark-themed design — mobile responsive and visually accessible.
• JavaScript was used to handle:
  • Parsing hexadecimal strings to decimals
  • Performing the selected arithmetic operation
  • Converting the result back to hexadecimal
  • Displaying both formats clearly to the user

All calculations are done in the browser with no external libraries, ensuring fast performance and full offline functionality.

📚 What I Learned

• How to parse and convert values between Hex and Decimal using JavaScript
• Handling dynamic input and validating hexadecimal strings
• Creating a responsive and styled UI without frameworks
• Managing edge cases like division by zero or invalid hex input
• Improving user experience through minimalistic design

⚠️ Challenges I Faced

• Ensuring that hexadecimal parsing and decimal conversion worked reliably for various inputs
• Designing the calculator to handle both uppercase and lowercase hex inputs
• Creating clean, accessible styles that work on all devices
• Preventing eval() abuse and handling safe arithmetic parsing in JavaScript
• Making sure the UI didn't break when unexpected or incomplete inputs were entered

🔗 Credits

• Tool inspired by: https://hexcalculator.org
  
• Icons and color palette guided by modern calculator apps
  
• Built with pure HTML, CSS, and JavaScript — no frameworks or dependencies

🚀 Live Demo

Try it out on CodePen or clone this repository and open index.html in your browser to get started.

Built With

• css
• html
• javascript