 |
| Currency converter using html css javascript |
In this article, we given a Currency converter using html css javascript with source code as a project. Currency converter is a unique project that is a tool which helps to convert the one country currency to another country. Currency converter is a simple project that is created using html css and javascript. In this project, we called a API to convert any currency to another without any errors or mistake and designed the project using html css to look better for best user experience.
So, Must try this project for practice and use in vs code to check how it works. We have given a complete source code of Currency converter using html css javascript. Let's go and check the source code as given below -
To add this project in vs code, follow the given process :-
1) Create a New folder in file manager name as - Currency-converter.
2) Open the folder in VS code.
3) Add file name as - index.html and copy the html code as given.
4) Add another file name as - style.css and copy the css code as given.
5) Add next file name as - script.js and copy the javascript code as given.
6) Then run the code or check the preview with code preview extension in vs code.
Currency converter using html css javascript source code
Here we given a html, css and js source code of Currency converter project as given -
HTML
We created a structure by adding the container in html. In the container, we added the heading, labels, inputs and button. Added classes and id's to give a design and functioning to the elements. Linked a CSS and JS files for styling and functionality. Copy the given html code and paste it into the index.html file.
<!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="container">
<h1>Currency Converter</h1>
<div class="converter">
<div class="input-section">
<label for="fromAmount">From:</label>
<input type="number" id="fromAmount" placeholder="Enter amount">
<select id="fromCurrency"></select>
</div>
<div class="input-section">
<label for="toCurrency">To:</label>
<input type="text" id="toAmount" disabled>
<select id="toCurrency"></select>
</div>
<button id="convertBtn">Convert</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>CSS
We given a responsive design to the currency converter project using css properties. We used css to style the structure of currency converter and positioned elements properly. Copy the given css code and paste it into style.css file.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #dfd9d9;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
max-width: 600px;
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
margin-bottom: 20px;
}
.converter {
display: flex;
flex-direction: column;
}
.input-section {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.input-section label {
margin-right: 10px;
}
.input-section input, .input-section select {
padding: 10px;
font-size: 16px;
border: 1px solid #fffcfc;
border-radius: 4px;
}
.input-section input {
flex: 1;
}
button {
background-color: #3f7ae7;
color: white;
border: none;
padding: 12px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
margin-top: 10px;
width: 100%;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #125ae0;
}Javascript
We added a API call to provide the actual currency value as a market. When the user enter number, choose the currencies as he wants to convert and submit the data, then the process starts as it fetch the data and calls the API to provide the value as current currency. Copy the given javascript code and paste it into the script.js file.
document.addEventListener('DOMContentLoaded', function() {
const fromCurrencySelect = document.getElementById('fromCurrency');
const toCurrencySelect = document.getElementById('toCurrency');
const convertButton = document.getElementById('convertBtn');
const fromAmountInput = document.getElementById('fromAmount');
const toAmountInput = document.getElementById('toAmount');
function populateCurrencies() {
fetch('https://open.er-api.com/v6/latest/USD')
.then(response => response.json())
.then(data => {
const currencies = Object.keys(data.rates);
currencies.forEach(currency => {
const option1 = document.createElement('option');
option1.value = currency;
option1.textContent = currency;
fromCurrencySelect.appendChild(option1);
const option2 = document.createElement('option');
option2.value = currency;
option2.textContent = currency;
toCurrencySelect.appendChild(option2);
});
})
.catch(error => console.error('Error fetching currencies:', error));
}
function convertCurrency() {
const fromCurrency = fromCurrencySelect.value;
const toCurrency = toCurrencySelect.value;
const amount = parseFloat(fromAmountInput.value);
fetch(`https://open.er-api.com/v6/latest/${fromCurrency}`)
.then(response => response.json())
.then(data => {
const exchangeRate = data.rates[toCurrency];
const convertedAmount = (amount * exchangeRate).toFixed(2);
toAmountInput.value = convertedAmount;
})
.catch(error => console.error('Error converting currency:', error));
}
convertButton.addEventListener('click', convertCurrency);
populateCurrencies();
});Output
Check this output of Currency converter -
 |
| Currency converter using html css javascript |
Also see this -
Hope this helps you to know about Currency converter using html css javascript with source code. If you have any confusion or query then you can contact us on our coding community.
Checkout others projects on our website for more and join our coding community on telegram to get knowledge about coding with proper material such as notes, tutorials, projects and more.
Tags:
projects