Javascript Currency Converter

codinglabsolution
Javascript Currency Converter



Join codinglabsolution for an engaging tutorial on expanding your JavaScript skills through project-building. Today, we'll delve into creating a 'Currency Converter', a fun and straightforward project requiring HTML, CSS, and JavaScript.

Video Tutorial:

For a better understanding of how we built the functionality of this project, I would advise you to watch the video below. If you find the video helpful give it a like and subscribe to my YouTube channel where I post new tips, tricks, and tutorials related to HTML, CSS, and Javascript.

Project Folder Structure:

Let’s build the project folder structure before we begin writing the code. We create a project folder called ‘Currency Converter’. Inside this folder, we have index.html, style.css, script.js, currency-codes.js, API-key.js, and SVG icon files.

HTML:

We begin with the HTML Code. First, create a file called – ‘index.html’. Copy the code below and paste it into your HTML file.

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Currency Converter</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet-->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<div class="app-details">
<img src="app-icon.svg" class="app-icon" />
<h1 class="app-title">Currency Converter</h1>
</div>
<label for="amount">Amount:</label>
<input type="number" id="amount" value="100" />
<div class="dropdowns">
<select id="from-currency-select"></select>
<select id="to-currency-select"></select>
</div>
<button id="convert-button">Convert</button>
<p id="result"></p>
</div>
<!-- Scipt With Array Of Supported Country Codes -->
<script src="currency-codes.js"></script>
<!-- Script with API Key -->
<script src="api-key.js"></script>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>

CSS:

Next, we style our list using CSS. For this copy, the code provided to you below and paste it into your stylesheet.

* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
border: none;
outline: none;
}
body {
background-color: #9873fe;
}
.wrapper {
width: 90%;
max-width: 25em;
background-color: #ffffff;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
padding: 2em;
border-radius: 0.8em;
}
.app-details {
display: flex;
align-items: center;
flex-direction: column;
}
.app-icon {
width: 9.37em;
}
.app-title {
font-size: 1.6em;
text-transform: uppercase;
margin-bottom: 1em;
}
label {
display: block;
font-weight: 600;
}
input#amount {
font-weight: 400;
font-size: 1.2em;
display: block;
width: 100%;
border-bottom: 2px solid #02002c;
color: #7a789d;
margin-bottom: 2em;
padding: 0.5em;
}
input#amount:focus {
color: #9873fe;
border-color: #9873fe;
}
.dropdowns {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1em;
}
select {
width: 100%;
padding: 0.6em;
font-size: 1em;
border-radius: 0.2em;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("arrow-down.svg");
background-repeat: no-repeat;
background-position: right 15px top 50%, center;
background-size: 20px 20px;
background-color: #9873fe;
color: #ffffff;
}
select option {
background-color: #ffffff;
color: #02002c;
}
button {
font-size: 1em;
width: 100%;
background-color: #9873fe;
padding: 1em 0;
margin-top: 2em;
border-radius: 0.3em;
color: #ffffff;
font-weight: 600;
}
#result {
font-size: 1.2em;
text-align: center;
margin-top: 1em;
color: #02002c;
background-color: #e5dbff;
padding: 0.8em 0;
}

Javascript:

"Next, let's incorporate functionality using JavaScript. Copy the code below and paste it into your script file.

Firstly, store the API key in 'api-key.js' and all currency codes in 'currency-codes.js'.

Then, follow these implementation steps:

1. Initialize HTML references and store the API URL in a variable.

2. Populate dropdown options with currency codes.

3. When the user clicks 'Convert' or when the page loads, call the 'convertCurrency' function.

4. Within 'convertCurrency', capture the user's dropdown selections or use default values.

5. If the user hasn't submitted a blank amount, make a GET request to the API URL using the 'fetch' method.

6. The API returns current rates for each currency.

7. Convert the entered amount to another currency using the fetched rate, displaying it up to two decimals."

let api = `https://v6.exchangerate-api.com/v6/${apiKey}/latest/USD`;
const fromDropDown = document.getElementById("from-currency-select");
const toDropDown = document.getElementById("to-currency-select");
//Create dropdown from the currencies array
currencies.forEach((currency) => {
const option = document.createElement("option");
option.value = currency;
option.text = currency;
fromDropDown.add(option);
});
//Repeat same thing for the other dropdown
currencies.forEach((currency) => {
const option = document.createElement("option");
option.value = currency;
option.text = currency;
toDropDown.add(option);
});
//Setting default values
fromDropDown.value = "USD";
toDropDown.value = "INR";
let convertCurrency = () => {
//Create References
const amount = document.querySelector("#amount").value;
const fromCurrency = fromDropDown.value;
const toCurrency = toDropDown.value;
//If amount input field is not empty
if (amount.length != 0) {
fetch(api)
.then((resp) => resp.json())
.then((data) => {
let fromExchangeRate = data.conversion_rates[fromCurrency];
let toExchangeRate = data.conversion_rates[toCurrency];
const convertedAmount = (amount / fromExchangeRate) * toExchangeRate;
result.innerHTML = `${amount} ${fromCurrency} = ${convertedAmount.toFixed(
2
)} ${toCurrency}`;
});
} else {
alert("Please fill in the amount");
}
};
document
.querySelector("#convert-button")
.addEventListener("click", convertCurrency);
window.addEventListener("load", convertCurrency);
//Paste your generated api Key here
let apiKey = "";

"Feel free to personalize the project according to your preferences. For any questions, suggestions, or feedback, please leave a comment below. You can download the complete source code by clicking the 'Download Code' button below."

إرسال تعليق

ملفات تعريف الارتباط
نستخدم ملفات تعريف الارتباط (Cookies) لفهم كيفية استخدامك لموقعنا وتحسين تجربتك في المحتوى والإعلانات. باستمرارك في تصفح الموقع، فإنك توافق على استخدامنا لملفات تعريف الارتباط وفقًا لسياسة الخصوصية لدينا.
أُووبس!
يبدو أن هناك خطأ ما في اتصالك بالإنترنت. يرجى الاتصال بالإنترنت وبدء التصفح مرة أخرى.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.