In today's global economy, converting currencies has become an essential daily activity—whether you're shopping from international websites, freelancing, studying finance, or traveling. That’s exactly why I developed a Currency Converter App using HTML, CSS, JavaScript, and a real-time API. It's a simple yet powerful web application that allows users to convert one currency to another quickly and accurately.
💡 About the Project
The Currency Converter App is a lightweight web application that allows users to convert a specified amount from one currency to another. It fetches real-time exchange rates using an external API and uses JavaScript to calculate and display the converted amount instantly.
Users can:
- Select the base currency (e.g., USD, EUR, INR)
- Select the target currency they want to convert to
- Enter the amount
- Get the converted result with live exchange rates
⚙️ Technologies Used
- ✅ HTML – Structure of the app
- ✅ CSS – Styling and responsive layout
- ✅ JavaScript – Logic and interactivity
- ✅ API Calling (Fetch API) – Real-time exchange rate data
✨ Key Features
- 💱 Real-Time Conversion using live exchange rates
- 🌐 Supports over 150 currencies
- ⚡ Instant Calculation and updates
- 🧑💻 Clean and Responsive UI
- 🔄 Dynamic dropdown menus
- 📉 API error handling included
🧠 How It Works
Here's how the app functions:
- JavaScript dynamically fills currency dropdowns on load.
- User selects currencies and enters an amount.
- JavaScript sends a request using
fetch()to a currency exchange API. - The app receives and processes the live rate, then displays the converted amount instantly.
👨💻 Who Should Try This?
- 💼 Beginners learning frontend + API integration
- ✈️ Travelers needing quick conversions
- 📊 Students tracking currency values
- 💸 Freelancers getting paid in different currencies
🌟 Why This Project is Worth Building
This app teaches you real-world skills like DOM manipulation, event handling, asynchronous JavaScript, and fetching external data using APIs. It’s a great portfolio project that shows potential employers your ability to create useful, data-driven applications.
This blog covers the frontend project that lets users convert one currency to another using live API data, built entirely with HTML, CSS, and JavaScript.
🔧 HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Currency Converter</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="con">
<div class="con_child">
<div class="_nav">Currency Converter</div>
<div class="form">
<span>
<label for="from">From</label>
<select name="from" id="from">
<option value="AED">AED</option>
<option value="AFN">AFN</option>
<option value="ALL">ALL</option>
<option value="AMD">AMD</option>
<option value="ANG">ANG</option>
<option value="AOA">AOA</option>
<option value="ARS">ARS</option>
<option value="AUD">AUD</option>
<option value="AWG">AWG</option>
<option value="AZN">AZN</option>
<option value="BAM">BAM</option>
<option value="BBD">BBD</option>
<option value="BDT">BDT</option>
<option value="BGN">BGN</option>
<option value="BHD">BHD</option>
<option value="BIF">BIF</option>
<option value="BMD">BMD</option>
<option value="BND">BND</option>
<option value="BOB">BOB</option>
<option value="BRL">BRL</option>
<option value="BSD">BSD</option>
<option value="BTN">BTN</option>
<option value="BWP">BWP</option>
<option value="BYN">BYN</option>
<option value="BZD">BZD</option>
<option value="CAD">CAD</option>
<option value="CDF">CDF</option>
<option value="CHF">CHF</option>
<option value="CLP">CLP</option>
<option value="CNY">CNY</option>
<option value="COP">COP</option>
<option value="CRC">CRC</option>
<option value="CUP">CUP</option>
<option value="CVE">CVE</option>
<option value="CZK">CZK</option>
<option value="DJF">DJF</option>
<option value="DKK">DKK</option>
<option value="DOP">DOP</option>
<option value="DZD">DZD</option>
<option value="EGP">EGP</option>
<option value="ERN">ERN</option>
<option value="ETB">ETB</option>
<option value="EUR">EUR</option>
<option value="FJD">FJD</option>
<option value="FKP">FKP</option>
<option value="FOK">FOK</option>
<option value="GBP">GBP</option>
<option value="GEL">GEL</option>
<option value="GGP">GGP</option>
<option value="GHS">GHS</option>
<option value="GIP">GIP</option>
<option value="GMD">GMD</option>
<option value="GNF">GNF</option>
<option value="GTQ">GTQ</option>
<option value="GYD">GYD</option>
<option value="HKD">HKD</option>
<option value="HNL">HNL</option>
<option value="HRK">HRK</option>
<option value="HTG">HTG</option>
<option value="HUF">HUF</option>
<option value="IDR">IDR</option>
<option value="ILS">ILS</option>
<option value="IMP">IMP</option>
<option value="INR">INR</option>
<option value="IQD">IQD</option>
<option value="IRR">IRR</option>
<option value="ISK">ISK</option>
<option value="JEP">JEP</option>
<option value="JMD">JMD</option>
<option value="JOD">JOD</option>
<option value="JPY">JPY</option>
<option value="KES">KES</option>
<option value="KGS">KGS</option>
<option value="KHR">KHR</option>
<option value="KID">KID</option>
<option value="KMF">KMF</option>
<option value="KRW">KRW</option>
<option value="KWD">KWD</option>
<option value="KYD">KYD</option>
<option value="KZT">KZT</option>
<option value="LAK">LAK</option>
<option value="LBP">LBP</option>
<option value="LKR">LKR</option>
<option value="LRD">LRD</option>
<option value="LSL">LSL</option>
<option value="LYD">LYD</option>
<option value="MAD">MAD</option>
<option value="MDL">MDL</option>
<option value="MGA">MGA</option>
<option value="MKD">MKD</option>
<option value="MMK">MMK</option>
<option value="MNT">MNT</option>
<option value="MOP">MOP</option>
<option value="MRU">MRU</option>
<option value="MUR">MUR</option>
<option value="MVR">MVR</option>
<option value="MWK">MWK</option>
<option value="MXN">MXN</option>
<option value="MYR">MYR</option>
<option value="MZN">MZN</option>
<option value="NAD">NAD</option>
<option value="NGN">NGN</option>
<option value="NIO">NIO</option>
<option value="NOK">NOK</option>
<option value="NPR">NPR</option>
<option value="NZD">NZD</option>
<option value="OMR">OMR</option>
<option value="PAB">PAB</option>
<option value="PEN">PEN</option>
<option value="PGK">PGK</option>
<option value="PHP">PHP</option>
<option value="PKR">PKR</option>
<option value="PLN">PLN</option>
<option value="PYG">PYG</option>
<option value="QAR">QAR</option>
<option value="RON">RON</option>
<option value="RSD">RSD</option>
<option value="RUB">RUB</option>
<option value="RWF">RWF</option>
<option value="SAR">SAR</option>
<option value="SBD">SBD</option>
<option value="SCR">SCR</option>
<option value="SDG">SDG</option>
<option value="SEK">SEK</option>
<option value="SGD">SGD</option>
<option value="SHP">SHP</option>
<option value="SLE">SLE</option>
<option value="SLL">SLL</option>
<option value="SOS">SOS</option>
<option value="SRD">SRD</option>
<option value="SSP">SSP</option>
<option value="STN">STN</option>
<option value="SYP">SYP</option>
<option value="SZL">SZL</option>
<option value="THB">THB</option>
<option value="TJS">TJS</option>
<option value="TMT">TMT</option>
<option value="TND">TND</option>
<option value="TOP">TOP</option>
<option value="TRY">TRY</option>
<option value="TTD">TTD</option>
<option value="TVD">TVD</option>
<option value="TWD">TWD</option>
<option value="TZS">TZS</option>
<option value="UAH">UAH</option>
<option value="UGX">UGX</option>
<option value="UYU">UYU</option>
<option value="UZS">UZS</option>
<option value="USD">USD</option>
<option value="VES">VES</option>
<option value="VND">VND</option>
<option value="VUV">VUV</option>
<option value="WST">WST</option>
<option value="XAF">XAF</option>
<option value="XCD">XCD</option>
<option value="XCG">XCG</option>
<option value="XDR">XDR</option>
<option value="XOF">XOF</option>
<option value="XPF">XPF</option>
<option value="YER">YER</option>
<option value="ZAR">ZAR</option>
<option value="ZMW">ZMW</option>
<option value="ZWL">ZWL</option>
</select>
</span>
<div class="img_box">
<img src="data:image/webp;base64,UklGRhQFAABXRUJQVlA4IAgFAABwLwCdASr+AP4APp1GnUslo6Mhq7LI8LATiWlu4MGxrggeE8aszyF/oBy5FjeFXaJ3QeBekgnT/4b9pPOD+b/6v2Ceg7+ln///gHwffpSPwoXLZL5gltBRhTbK3vL5gDcCnuIAww8YLwAO01vBzIuTaYrs+SCc69EiRLNoWrbcQBQDJn7Qgfre/xAserJDdjzEUt/rKodzso0peknLYzbV1/NoNhFfFnMTVjvzl56ScaHWBSsbz1aJ9hAW1y9dGtMF66zXIj2CSdGxGKoMFBYjjw2bThoF42h13RtvA96WyJTCD8cOJctJtQRMZF3DuXmaCkOILd+jCDJQClm52vTOi28FvUigdIJu1ZpdzVDuQh3fhyLs4co2/j8UsIo28q47atLOWmsMM+RwRkvDb1qkgapW49jTAztucUmabp6IaNJP7ztSIpjSGULImWvqGujOIFBIg4NSOCFzlz7KlMmDVH6xTIplKCgbjxXncXVBiaPNHNqt0Hu+HYyTLfx+ZZ0Xo4EAAP7GJ+wFpCt/ap+wM1HQBxhPwb8Hw9Z8fnfGM/fV2u9ZjQqcPydbZV3pK6MF32Ly90IZooIws1DvxM4t1Jv4mhjU6Q2v6z3/3/gENSTqLFf1omklPPsgBAty22ao13AAtWZ6miFn1vlIWFo5h43cjxewi/EBs//8kxC27JI4LweXxcsBM9JnamNz462mTtdIyIc6LVgFp8KjiynwnetCyXllvwrvVqY+plW9udjV+4u6Of7vA2CNjnW25cmtX8d0H9KKRo7ElxrG0ezG9tVhxjVmnOdCv31KjYWkgEjDeIScPLoV6CkyQVwaYBD59tlbcVtLW8gp6shtD20NIz2ug2gVv+9njoKDyq7JZxqHBnCo4AUFTbv9vIrCiozQykrKHmGL/qKeOaVbHzq4NzPovUejXW/Ffgooi6Nbj4FOdrBBTjnbO9bp89aTNyWAyFFiKZ5wYJ+YGyOIoz5B07Q/181gJ+HcHSO6J8xJm5hrGfdQQ0zRSzY9oDNFTcA7Vted/ENcdeqjWrzJ+ON7jtaL+d/dV3TyLnE3Re4nWadIuziVLO/f3d3MBS+vNKqrMoE5XgJfHRxgOVAPqagAAgeeGcVhtOEGuHcg4yo9aG+hwB4ACtZHuRXQ8BeU1Az5CLF02QJf4RiD3t27Dk/Y+IdY+GVrKRX5b2JTFceIMgxfga8mVjf7LbsgaQoBwc9cQX8X9Pau+KYuG3/bT0mq+3fkkP71aQkov8JTi3TmvzYP2J0nVXidt1WqsPHbGYA17sWThW/qr5AYf3WyZly/SjNtQZuOgCxJLGOd16NiCSztSDSpm3kUw4r9NTrte6cjhnFAlGT7PLAXWNMLF+CdOBKx9Mc3S/UfTK8eGAQQX8X928CuxKPO44yeYH54E2cjgi2xLszAstYgnmziTGXDo4fwUvkcGU/wRbn2jDZYPfDXCAZNjB6U6FOIZHLBM1asRPzu2olLAzGU9x4mo4hFxFq0C7jIcGitTU/PXbNlEP4B7t4FdiUedxxk8wlazkuQmKHrZBhvHE2SvP7OLJ3DOyIEYCXAdujf83boKJ9ZUiDVH4o4MWZ4VFaKrVHd8A9l/LX7x0Z8dKMMl/bMjaaZMGUiaKTx31g/YLIL8CLzFGBtddaxnwUqhpdf282Z5Ba9Zu7oPSM6BzeqLlaeCSOMdNbYOEAKRfIx9M6HEDbWffIwBZUJGgAA"
width="30px">
</div>
<span>
<label for="to">To</label>
<select name="to" id="to">
<option value="AED">AED</option>
<option value="AFN">AFN</option>
<option value="ALL">ALL</option>
<option value="AMD">AMD</option>
<option value="ANG">ANG</option>
<option value="AOA">AOA</option>
<option value="ARS">ARS</option>
<option value="AUD">AUD</option>
<option value="AWG">AWG</option>
<option value="AZN">AZN</option>
<option value="BAM">BAM</option>
<option value="BBD">BBD</option>
<option value="BDT">BDT</option>
<option value="BGN">BGN</option>
<option value="BHD">BHD</option>
<option value="BIF">BIF</option>
<option value="BMD">BMD</option>
<option value="BND">BND</option>
<option value="BOB">BOB</option>
<option value="BRL">BRL</option>
<option value="BSD">BSD</option>
<option value="BTN">BTN</option>
<option value="BWP">BWP</option>
<option value="BYN">BYN</option>
<option value="BZD">BZD</option>
<option value="CAD">CAD</option>
<option value="CDF">CDF</option>
<option value="CHF">CHF</option>
<option value="CLP">CLP</option>
<option value="CNY">CNY</option>
<option value="COP">COP</option>
<option value="CRC">CRC</option>
<option value="CUP">CUP</option>
<option value="CVE">CVE</option>
<option value="CZK">CZK</option>
<option value="DJF">DJF</option>
<option value="DKK">DKK</option>
<option value="DOP">DOP</option>
<option value="DZD">DZD</option>
<option value="EGP">EGP</option>
<option value="ERN">ERN</option>
<option value="ETB">ETB</option>
<option value="EUR">EUR</option>
<option value="FJD">FJD</option>
<option value="FKP">FKP</option>
<option value="FOK">FOK</option>
<option value="GBP">GBP</option>
<option value="GEL">GEL</option>
<option value="GGP">GGP</option>
<option value="GHS">GHS</option>
<option value="GIP">GIP</option>
<option value="GMD">GMD</option>
<option value="GNF">GNF</option>
<option value="GTQ">GTQ</option>
<option value="GYD">GYD</option>
<option value="HKD">HKD</option>
<option value="HNL">HNL</option>
<option value="HRK">HRK</option>
<option value="HTG">HTG</option>
<option value="HUF">HUF</option>
<option value="IDR">IDR</option>
<option value="ILS">ILS</option>
<option value="IMP">IMP</option>
<option value="INR">INR</option>
<option value="IQD">IQD</option>
<option value="IRR">IRR</option>
<option value="ISK">ISK</option>
<option value="JEP">JEP</option>
<option value="JMD">JMD</option>
<option value="JOD">JOD</option>
<option value="JPY">JPY</option>
<option value="KES">KES</option>
<option value="KGS">KGS</option>
<option value="KHR">KHR</option>
<option value="KID">KID</option>
<option value="KMF">KMF</option>
<option value="KRW">KRW</option>
<option value="KWD">KWD</option>
<option value="KYD">KYD</option>
<option value="KZT">KZT</option>
<option value="LAK">LAK</option>
<option value="LBP">LBP</option>
<option value="LKR">LKR</option>
<option value="LRD">LRD</option>
<option value="LSL">LSL</option>
<option value="LYD">LYD</option>
<option value="MAD">MAD</option>
<option value="MDL">MDL</option>
<option value="MGA">MGA</option>
<option value="MKD">MKD</option>
<option value="MMK">MMK</option>
<option value="MNT">MNT</option>
<option value="MOP">MOP</option>
<option value="MRU">MRU</option>
<option value="MUR">MUR</option>
<option value="MVR">MVR</option>
<option value="MWK">MWK</option>
<option value="MXN">MXN</option>
<option value="MYR">MYR</option>
<option value="MZN">MZN</option>
<option value="NAD">NAD</option>
<option value="NGN">NGN</option>
<option value="NIO">NIO</option>
<option value="NOK">NOK</option>
<option value="NPR">NPR</option>
<option value="NZD">NZD</option>
<option value="OMR">OMR</option>
<option value="PAB">PAB</option>
<option value="PEN">PEN</option>
<option value="PGK">PGK</option>
<option value="PHP">PHP</option>
<option value="PKR">PKR</option>
<option value="PLN">PLN</option>
<option value="PYG">PYG</option>
<option value="QAR">QAR</option>
<option value="RON">RON</option>
<option value="RSD">RSD</option>
<option value="RUB">RUB</option>
<option value="RWF">RWF</option>
<option value="SAR">SAR</option>
<option value="SBD">SBD</option>
<option value="SCR">SCR</option>
<option value="SDG">SDG</option>
<option value="SEK">SEK</option>
<option value="SGD">SGD</option>
<option value="SHP">SHP</option>
<option value="SLE">SLE</option>
<option value="SLL">SLL</option>
<option value="SOS">SOS</option>
<option value="SRD">SRD</option>
<option value="SSP">SSP</option>
<option value="STN">STN</option>
<option value="SYP">SYP</option>
<option value="SZL">SZL</option>
<option value="THB">THB</option>
<option value="TJS">TJS</option>
<option value="TMT">TMT</option>
<option value="TND">TND</option>
<option value="TOP">TOP</option>
<option value="TRY">TRY</option>
<option value="TTD">TTD</option>
<option value="TVD">TVD</option>
<option value="TWD">TWD</option>
<option value="TZS">TZS</option>
<option value="UAH">UAH</option>
<option value="UGX">UGX</option>
<option value="UYU">UYU</option>
<option value="UZS">UZS</option>
<option value="USD">USD</option>
<option value="VES">VES</option>
<option value="VND">VND</option>
<option value="VUV">VUV</option>
<option value="WST">WST</option>
<option value="XAF">XAF</option>
<option value="XCD">XCD</option>
<option value="XCG">XCG</option>
<option value="XDR">XDR</option>
<option value="XOF">XOF</option>
<option value="XPF">XPF</option>
<option value="YER">YER</option>
<option value="ZAR">ZAR</option>
<option value="ZMW">ZMW</option>
<option value="ZWL">ZWL</option>
</select>
</span>
<input type="text" name="amt" id="amt" placeholder="Amount">
<button type="submit" id="convert">Convert</button>
</div>
<div class="result_box">
<div class="r_box1">Result</div>
<div class="r_box2">Converted Amount : <span id="rs_value"></span></div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
🎨 CSS Code
*{
margin: 0;
padding: 0;
}
.con{
height: 100vh;
width: 100%;
background-color: rgb(238, 236, 233);
display: flex;
justify-content: center;
align-items: center;
}
.con_child{
padding: 25px;
min-height: 450px;
width: 340px;
background-color: white;
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
}
.con .con_child ._nav{
width: 100%;
font-size: 25px;
font-weight: bolder;
font-family: Arial;
color:rgb(49, 49, 217) ;
text-align: center;
font-family: cursive;
}
.con .con_child .form{
margin-top: 10px;
width: 100%;
height: 300px;
display: flex;
flex-direction: column;
gap: 15px;
outline: none;
}
.con .con_child .form span{
font-size: 20px;
display: flex;
flex-direction: column;
}
.con .con_child .form select{
outline: none;
width: 100%;
padding: 10px 10px;
font-size: 15px;
font-weight: 600;
font-family: cursive;
background-color: rgba(234, 233, 233, 0.408);
border: none;
}
.con .con_child .form input{
padding: 10px 15px;
font-size: 15px;
background-color: rgba(234, 233, 233, 0.408);
border: none;
}
.con .con_child .form button{
font-size: 18px;
font-weight: 600;
font-family: cursive;
padding: 5px;
background-color: rgb(68, 220, 142);
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
&:hover{
background-color: rgb(59, 186, 120);
}
}
.con .con_child .result_box{
width: 100%;
}
.con .con_child .result_box .r_box1{
height: 20px;
font-size: 18px;
}
.con .con_child .result_box .r_box2{
font-size: 18px;
margin-top: 5px;
background-color: rgba(234, 233, 233, 0.408);
padding: 10px;
}
.con .con_child .form .img_box{
width: 100%;
display: flex;
justify-content: center;
}
#rs_value{
float: right;
}
📜 JavaScript Code
const FROM=document.getElementById("from")
const TO=document.getElementById("to")
const Convert=document.getElementById("convert")
const Amt=document.getElementById("amt")
const rsValue=document.getElementById("rs_value")
addEventListener
Convert.addEventListener("click",async ()=>{
const fromVal=FROM.value
const toVal=TO.value
const amtVal=Amt.value
console.log(fromVal,toVal)
KEY='YOUR_KEY_FROM_EXCHANGERATE_API'
const URL=`https://v6.exchangerate-api.com/v6/${KEY}/pair/${fromVal}/${toVal}/${amtVal}`
const Promise=await fetch(URL)
const res=await Promise.json()
console.log(res)
// console.log(res.conversion_result)
rsValue.innerText=res.conversion_result
// console.log(URL)
})
🔗 Try It Now
I’ve hosted the project online for you to explore:
👉 Live Demo
❤️ Final Thoughts
This project started as a small idea but turned into something highly practical. I encourage you to experiment with it—add more features like historical data or charts, improve the design, or combine it with other tools. Thanks for checking it out! 🙌
Thank you for visiting! Happy coding! 💻💡
0 Comments