https://github.com/sanjay-1458/currency-converter
A JavaScript currency converter project using Fetch API.
https://github.com/sanjay-1458/currency-converter
api async-await css currency-converter fetch-api html5 javascript mini-project project real-time
Last synced: about 1 month ago
JSON representation
A JavaScript currency converter project using Fetch API.
- Host: GitHub
- URL: https://github.com/sanjay-1458/currency-converter
- Owner: sanjay-1458
- License: mit
- Created: 2024-03-19T15:37:18.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-03T07:50:33.000Z (3 months ago)
- Last Synced: 2025-04-03T08:34:24.645Z (3 months ago)
- Topics: api, async-await, css, currency-converter, fetch-api, html5, javascript, mini-project, project, real-time
- Language: JavaScript
- Homepage:
- Size: 16.6 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🚀 Currency Converter
The Currency Converter is a web application that allows users to convert between different currencies using the latest exchange rates.
This app fetches real-time exchange rates from an external API using JavaScript's Fetch API and provides an easy-to-use interface for quick conversions.
## 🌎 Live Demo: https://dazzling-tartufo-a7192f.netlify.app/
## 🖼️ Screenshots:
🔹 Initial Interface:
------------------------------------------------------------
## ✨ Features
✅ Real-Time Exchange Rates: Fetches updated exchange rates dynamically.
✅ User-Friendly Interface: Simple and intuitive design for easy interaction.
✅ Custom Currency Selection: Users can choose both the base and target currency.
✅ Interactive UI Elements: Flags displayed next to selected currencies.
✅ Fast & Lightweight: No additional dependencies, just HTML, CSS, and JavaScript.
------------------------------------------------------------
## 📂 Files Overview
📜 index.html → Structure of the web page, including input fields and dropdowns.
🎨 style.css → Styles the UI for a modern and responsive look.
🛠️ codes.js → Contains functions to fetch exchange rates and update the UI.
⚡ app.js → Handles user interactions and conversion logic.
------------------------------------------------------------
## 🛠️ Technologies Used
- HTML → Defines the webpage structure.
- CSS → Styles and enhances the user experience.
- JavaScript → Fetches exchange rates and handles conversions.
- Fetch API → Makes API requests to retrieve real-time exchange rates.
------------------------------------------------------------
## 🚀 Getting Started
Follow these steps to set up the project locally:
1️⃣ Clone the Repository:
git clone https://github.com/sanjay-1458/Currency-Converter.git
2️⃣ Navigate into the Project Folder:
cd Currency-Converter
3️⃣ Open the Project with Live Server:
If you have Live Server installed in VS Code, right-click on index.html and select "Open with Live Server".
OR manually open the index.html file in your browser.
4️⃣ Use the Currency Converter:
- Enter the amount to convert.
- Select the "From" currency.
- Select the "To" currency.
- Click "Get Exchange Rate" to see the conversion.
------------------------------------------------------------
## 🌐 API Endpoint
The application fetches exchange rates from:
https://2024-03-06.currency-api.pages.dev/v1/currencies/${currency}.json
🔹 Replace ${currency} with currency codes like usd, inr, eur, etc.
------------------------------------------------------------
# 🚀 Live Demo
🔗 Try the Currency Converter: https://dazzling-tartufo-a7192f.netlify.app/
------------------------------------------------------------