Learn how to build a fully functional tool that combines basic math operations with live currency conversion. The Calculator & Currency Converter App by Amaan Shaikh is developed using HTML, CSS, and JavaScript perfect for sharpening your web development skills through real-world utility.
🧠 About the Project
This application is built using ReactJS and offers two main features:
- A Basic Calculator
- A Currency Converter (USD to Other Currencies)
The overall component is developed using friendly UI elements with a clean, organized, and engaging interface and also has basic animations to allow a fluent experience. Handles API errors and invalid inputs in a reasonable manner.
🔢 1. Calculator Functionality
The calculator allows users to:
- Input two numeric values
- Select an operator (*, +, /, -)
- Get the computed result with a click on
=button
Features:
- Input validation (ensures all fields are filled)
- Handles division by zero
- Real-time feedback on invalid input
Technologies:
- React
useStatehook for managing values - Dynamic rendering with JSX
- Minimal styling with pure CSS and animation effects
💱 2. Currency Converter
The currency converter enables conversion from USD to multiple foreign currencies using a live exchange rate API.
How it works:
- Users enter an amount in USD
- Select a target currency from a dropdown (first 20 currencies supported)
- On clicking
Convert, the app fetches the latest rates using ExchangeRate-API - Displays converted amount with two-decimal precision
Technical Highlights:
- Uses
useEffectfor fetching exchange rates when the app loads - Maintains state for amount, selected currency, and converted result
- Handles API errors and invalid inputs gracefully
🎨 UI/UX Design
The app is styled with:
- A responsive layout (mobile-friendly)
- Glassmorphism effect for sections
- Smooth fade-in and slide-in animations
- Focus styles and hover effects for inputs and buttons
These small elements in the design add value to usability and appearance of the interface without using external CSS libraries.
📦 External Dependencies
- React (via CDN)
- ReactDOM
- Babel (for JSX transformation in-browser)
- ExchangeRate API:
https://api.exchangerate-api.com/v4/latest/USD
🚀 How to Use
- It’s as simple as opening the HTML file in a browser (no build necessary).
- Use the calculator by entering two numbers and selecting an operator.
- Convert currency by entering USD and selecting a currency from the dropdown.
- View real-time results right on the screen.
🌐 Final Thoughts
This Calculator & Currency Converter App by Amaan Shaikh is perfect for beginners who want to learn:
- Covering the basic stuff of React (components, hooks, state).
- Working with reusable components to create modular UI.
- API integration and asynchronous handling
- Creating modular UI with reusable components
If you’re going through interviews or building a portfolio, whether you’re getting started or wanting to add this to your learning experience this still works as a simple, functional app.