Harshil Chovatiya's 100DaysOfCode Journey: Day 40 - Exploring the Currency converter App.
Introduction:
Day 40 of my 100 Days of Code journey! Today, I'm excited to share my Currency Converter app, a project I've been working on to enhance my HTML, CSS, and JavaScript skills. In this blog post, I'll walk you through the development of this app, sharing the key features, challenges I faced, and how it fits into my coding journey. So, let's dive into this exciting coding adventure!
File Structure:
Before we delve into the application's details, let's take a look at its file structure. Understanding how the Currency Converter App is organized behind the scenes can help you navigate and customize it effectively.
The app's file structure typically consists of the following components:
currency-converter/
│
└── index.html
└── style.css
└── index.js
- index.html: This is the main HTML file that serves as the entry point for the application. It contains the structure of the app's user interface.
- styles.css: The stylesheet file, currency converter the app's visual design is defined. You can customize the app's appearance by modifying this file.
- app.js: The JavaScript file responsible for handling the app's logic. It fetches currency prices data, processes it, and updates the user interface accordingly.
Code Snippets:
Here are code snippets for the three main files:
index.html (UI Creation):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Currency converter</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<body>
<div class="wrapper">
<header>Currency converter</header>
<form action="#">
<div class="amount">
<p>Enter the value </p>
<input type="number" name="" id="valueTyped" value="1">
</div>
<div class="drop-list">
<div class="from">
<div class="select-box">
<select name="" id="valueInput">
<option value="AED">AED</option>
<option value="ARS">ARS</option>
<option value="AUD">AUD</option>
<option value="BGN">BGN</option>
<option value="BRL">BRL</option>
<option value="BSD">BSD</option>
<option value="CAD">CAD</option>
<option value="CHF">CHF</option>
<option value="CLP">CLP</option>
<option value="CNY">CNY</option>
<option value="COP">COP</option>
<option value="CZK">CZK</option>
<option value="DKK">DKK</option>
<option value="DOP">DOP</option>
<option value="EGP">EGP</option>
<option value="EUR">EUR</option>
<option value="FJD">FJD</option>
<option value="GBP">GBP</option>
<option value="GTQ">GTQ</option>
<option value="HKD">HKD</option>
<option value="HRK">HRK</option>
<option value="HUF">HUF</option>
<option value="IDR">IDR</option>
<option value="ILS">ILS</option>
<option value="INR" selected>INR</option>
<option value="ISK">ISK</option>
<option value="JPY">JPY</option>
<option value="KRW">KRW</option>
<option value="KZT">KZT</option>
<option value="MXN">MXN</option>
<option value="MYR">MYR</option>
<option value="NOK">NOK</option>
<option value="NZD">NZD</option>
<option value="PAB">PAB</option>
<option value="PEN">PEN</option>
<option value="PHP">PHP</option>
<option value="PKR">PKR</option>
<option value="PLN">PLN</option>
<option value="PYG">PYG</option>
<option value="RON">RON</option>
<option value="RUB">RUB</option>
<option value="SAR">SAR</option>
<option value="SEK">SEK</option>
<option value="SGD">SGD</option>
<option value="THB">THB</option>
<option value="TRY">TRY</option>
<option value="TWD">TWD</option>
<option value="UAH">UAH</option>
<option value="USD">USD</option>
<option value="UYU">UYU</option>
<option value="VND">VND</option>
<option value="ZAR">ZAR</option>
</select>
</div>
</div>
<div class="icon"> <button id="inverter">
<==>
</button></div>
<div class="to">
<div class="select-box">
<select name="" id="valueConverted">
<option value="AED">AED</option>
<option value="ARS">ARS</option>
<option value="AUD">AUD</option>
<option value="BGN">BGN</option>
<option value="BRL">BRL</option>
<option value="BSD">BSD</option>
<option value="CAD">CAD</option>
<option value="CHF">CHF</option>
<option value="CLP">CLP</option>
<option value="CNY">CNY</option>
<option value="COP">COP</option>
<option value="CZK">CZK</option>
<option value="DKK">DKK</option>
<option value="DOP">DOP</option>
<option value="EGP">EGP</option>
<option value="EUR">EUR</option>
<option value="FJD">FJD</option>
<option value="GBP">GBP</option>
<option value="GTQ">GTQ</option>
<option value="HKD">HKD</option>
<option value="HRK">HRK</option>
<option value="HUF">HUF</option>
<option value="IDR">IDR</option>
<option value="ILS">ILS</option>
<option value="INR">INR</option>
<option value="ISK">ISK</option>
<option value="JPY">JPY</option>
<option value="KRW">KRW</option>
<option value="KZT">KZT</option>
<option value="MXN">MXN</option>
<option value="MYR">MYR</option>
<option value="NOK">NOK</option>
<option value="NZD">NZD</option>
<option value="PAB">PAB</option>
<option value="PEN">PEN</option>
<option value="PHP">PHP</option>
<option value="PKR">PKR</option>
<option value="PLN">PLN</option>
<option value="PYG">PYG</option>
<option value="RON">RON</option>
<option value="RUB">RUB</option>
<option value="SAR">SAR</option>
<option value="SEK">SEK</option>
<option value="SGD">SGD</option>
<option value="THB">THB</option>
<option value="TRY">TRY</option>
<option value="TWD">TWD</option>
<option value="UAH">UAH</option>
<option value="USD" selected>USD</option>
<option value="UYU">UYU</option>
<option value="VND">VND</option>
<option value="ZAR">ZAR</option>
</select>
</div>
</div>
</div>
<div class="exchange-rate">
<div class="currency">
<p>Converted value</p>
<input type="number" name="" id="valuedisplay" placeholder="0" />
</div>
</div>
<button id="taxa"></button>
</form>
</div>
</body>
</html>
style.css (Visual Design):
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 0 10px;
}
::selection {
color: #fff;
background: #1387f4;
}
.wrapper {
width: 370px;
padding: 30px;
border-radius: 7px;
background: #fff;
box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.05);
}
.wrapper header {
font-size: 28px;
font-weight: 500;
text-align: center;
}
.wrapper form {
margin: 40px 0 20px 0;
}
form :where(input, select, button) {
width: 100%;
outline: none;
border-radius: 5px;
border: none;
}
form p {
font-size: 18px;
margin-bottom: 5px;
}
form input {
height: 50px;
font-size: 17px;
padding: 0 15px;
border: 1px solid #999;
}
form input:focus {
padding: 0 14px;
border: 2px solid #1387f4;
}
form .drop-list {
display: flex;
margin-top: 20px;
align-items: center;
justify-content: space-between;
}
.drop-list .select-box {
display: flex;
width: 115px;
height: 45px;
align-items: center;
border-radius: 5px;
justify-content: center;
border: 1px solid #999;
}
.select-box img {
max-width: 21px;
}
.select-box select {
width: auto;
font-size: 16px;
background: none;
margin: 0 -5px 0 5px;
}
.select-box select::-webkit-scrollbar {
width: 8px;
}
.select-box select::-webkit-scrollbar-track {
background: #fff;
}
.select-box select::-webkit-scrollbar-thumb {
background: #888;
border-radius: 8px;
border-right: 2px solid #ffffff;
}
.drop-list .icon {
cursor: pointer;
font-size: 22px;
}
form .exchange-rate {
font-size: 17px;
margin: 20px 0 30px;
}
form button {
height: 52px;
color: #fff;
font-size: 17px;
cursor: pointer;
background: #1387f4;
transition: 0.3s ease;
}
#inverter {
width: 60px;
}
form button:hover {
background: #1387f4;
}
script.js (Logic and Data Handling):
const valueInput = document.querySelector('#valueInput');
const valueConverted = document.querySelector('#valueConverted');
const valueTyped = document.querySelector('#valueTyped');
const valuedisplay = document.querySelector('#valuedisplay');
const inverter = document.querySelector('#inverter');
const taxa = document.querySelector('#taxa');
valueInput.addEventListener('change', calcular);
valueConverted.addEventListener('change', calcular);
valueTyped.addEventListener('input', calcular);
valuedisplay.addEventListener('input', calcular);
inverter.addEventListener('click', () => {
const temp = valueInput.value;
valueInput.value = valueConverted.value;
valueConverted.value = temp;
calcular();
});
function calcular() {
const valueInput1 = valueInput.value;
const valueConverted1 = valueConverted.value;
fetch(`https://api.exchangerate-api.com/v4/latest/${valueInput1}`)
.then(res => res.json())
.then(res => {
const novaTaxa = res.rates[valueConverted1];
taxa.innerText = `1 ${valueInput1} = ${novaTaxa} ${valueConverted1}`
valuedisplay.value = (valueTyped.value * novaTaxa).toFixed(2);
})
}
calcular();
If you'd like to use the Currency Converter App and access currency price data, you'll need an API key from Exchangerate-api. Here's how you can obtain your API key:
- Visit exchangerate-api.com/.
- Create an account if you don't already have one.
- Explore the The Accurate & Reliable Exchange Rate API section on the website.
- Follow the instructions to obtain your unique API key.
- Once you have your API key, you can use it in any project to access currency data for various Currency.
Live Example
Here is the Live Preview of the above code
If you're interested in accessing the source code for this Currency converter application, simply click on this link to visit the repository: Click Here. To get a feel for how the application works, you can check out the live preview by clicking here.
Conclusion:
As I wrap up Day 40 of my 100 Days of Code challenge, I can proudly say that building the Currency Converter app has been a rewarding experience. Not only have I gained a deeper understanding of HTML, CSS, and JavaScript, but I've also created a functional tool that can be useful for many. This project has taught me the importance of persistence and problem-solving in coding.
I hope this blog post inspires you to take on your coding challenges and keep pushing your boundaries. Stay tuned for more exciting projects in the coming days as I continue my coding journey. Thanks for following along, and see you in the next blog post!
Comments
Post a Comment