Develop a Currency Conversion App with HTML, CSS, JavaScript

🚀 What is this app?

This Currency Exchange App lets users:

• Select two currencies

• Enter an amount

• Instantly convert between currencies using real-time exchange rates

It uses the ExchangeRate API to get live data.

🛠️ Technologies Used:

• HTML – for structure

• CSS – for styling

• JavaScript – to fetch live API data and make the app interactive

• ExchangeRate API – for fetching real-time rates

---

🌐 API Used:

We used the free API from:
🔗 https://www.exchangerate-api.com

This API returns conversion rates in JSON format. You don’t need an API key for basic usage.

---

📂 Project Structure:

bashCopyEditcurrency-exchange-app/
│
├── index.html
├── style.css
└── script.js

---

🧱 HTML (index.html)

---

🎨 CSS (style.css)

---

⚙️ JavaScript (script.js)

---

💡 What I Learned

This project helped me understand:

• How to use APIs in vanilla JavaScript

• Dynamic DOM manipulation

• Updating UI based on real-time data

• Building useful tools with simple code

---

📸 More Screenshots

🧩 Show:

• Dropdowns and amount field

• 

• Real-time output result

• 

---

🔗 Live Demo

👉 [Live Demo]

---

💻 Source Code

👉 [Github code]

---

🧠 Final Words

This is a great beginner-friendly project to learn how APIs work in real-world apps.
You can expand it further by:

• Adding date of last updated rate

• Adding chart for visualizing currency history

• Dark mode or animations

Stay tuned for more projects in my #ProDev Series 🔥