Skip to content

erleen0307/currency-converter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

💱 Currency Converter

A sleek and simple currency converter web app built using HTML, CSS, and JavaScript. It fetches real-time exchange rates using an API and supports features like currency swapping, conversion rate display, and dark mode.


🚀 Live Demo

🔗 (https://erleen0307.github.io/currency-converter/)


📸 Preview

Light Mode Preview Dark Mode Preview


✨ Features Included:

  • ✅ Convert between over 150 currencies
  • 🔁 Swap From/To currencies with one click
  • 💹 Display of conversion rate
  • 🌙 Dark Mode for better visual experience
  • 📱 Fully responsive design for all devices

⚙️ Tech Stack

  • HTML5
  • CSS3
  • Vanilla JavaScript
  • ExchangeRate API
  • REST Countries API
  • FlagCDN API

📦 Folder Structure


currency-converter/
│
├── preview-light-mode.png
├── preview-dark-mode.png
├── index.html         # Main HTML file
├── style.css          # Styling (responsive + dark mode)
└── script.js          # API fetch + DOM handling


📡 APIs Used

This project uses the following APIs:

  1. ExchangeRate.host API

    • 📈 Provides real-time currency conversion rates.
    • Example:
      https://api.exchangerate.host/latest?base=USD&symbols=INR
  2. Rest Countries API (v3.1)

    • 🌍 Used to fetch country codes and relevant metadata.
    • Example:
      https://restcountries.com/v3.1/all
  3. FlagCDN API

    • 🏳️ Used to dynamically display country flags based on currency/country codes.
    • Example:
      https://flagsapi.com/US/flat/64.png

📁 How to Use

  1. Enter the amount and choose From/To currencies.
  2. Click "Convert" to get the latest rate.
  3. Use the "Swap" button to switch currencies instantly.
  4. Toggle dark mode with the theme switch (if included).

🧠 What I Learned

  • DOM manipulation using JS
  • Working with real-world APIs
  • Responsive design and accessibility
  • Handling dynamic content with JavaScript

📅 Date Completed: June 22, 2025

Made with ❤️ by erleen0307


About

Modern currency converter with real-time rates, dark mode, and swap feature

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published