Skip to content

Addressing API Errors and Implementing Swapping Functionality #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Addressing API Errors and Implementing Swapping Functionality #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6c07bb5
successfully solve the api error
rahman-cs-it Mar 20, 2024
8ce43f0
successfully solve the api error
rahman-cs-it Mar 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
51 changes: 41 additions & 10 deletions CurrencyConverter/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
const BASE_URL =
"https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies";
const BASE_URL ="https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies";

const dropdowns = document.querySelectorAll(".dropdown select");
const btn = document.querySelector("form button");
const btn = document.querySelector("#ExchangeButton");
const fromCurr = document.querySelector(".from select");
const toCurr = document.querySelector(".to select");
const msg = document.querySelector(".msg");
const swap = document.querySelector("#swap");

for (let select of dropdowns) {
for (currCode in countryList) {
Expand All @@ -25,20 +25,48 @@ for (let select of dropdowns) {
});
}

const swapping = () => {
// Swap the values of fromCurr and toCurr select elements

const temp = fromCurr.value;
fromCurr.value = toCurr.value;
toCurr.value = temp;

// Update the flag images based on the new selections
updateFlag(fromCurr);
updateFlag(toCurr);

// Update the exchange rate based on the new selections
updateExchangeRate();
};

swap.addEventListener("click", (evt) => {
evt.preventDefault(); // Prevent the default button behavior
swapping(); // Execute the swapping function
});

const updateExchangeRate = async () => {

let amount = document.querySelector(".amount input");
let amtVal = amount.value;
// console.log(amount.value)
if (amtVal === "" || amtVal < 1) {
amtVal = 1;
amount.value = "1";
}
const URL = `${BASE_URL}/${fromCurr.value.toLowerCase()}/${toCurr.value.toLowerCase()}.json`;
// console.log(amount.value);
const URL = `${BASE_URL}/${fromCurr.value.toLowerCase()}.json`;
let response = await fetch(URL);
let data = await response.json();
let rate = data[toCurr.value.toLowerCase()];

// console.log(data)

let rate = data[fromCurr.value.toLowerCase()][toCurr.value.toLowerCase()];

// console.log(data);
let finalAmount = amtVal * rate;
// console.log(finalAmount);
msg.innerText = `${amtVal} ${fromCurr.value} = ${finalAmount} ${toCurr.value}`;
// console.log(msg);
};

const updateFlag = (element) => {
Expand All @@ -49,11 +77,14 @@ const updateFlag = (element) => {
img.src = newSrc;
};

btn.addEventListener("click", (evt) => {
evt.preventDefault();
updateExchangeRate();
btn.addEventListener("click", async (evt) => {
evt.preventDefault(); // Prevent the default form submission behavior

// Update the exchange rate
await updateExchangeRate();
});


window.addEventListener("load", () => {
updateExchangeRate();
});
});
26 changes: 14 additions & 12 deletions CurrencyConverter/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Currency Converter</title>
<link href="style.css" rel="stylesheet" />
<title>Currency-Converter</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
Expand All @@ -16,30 +16,32 @@
<body>
<div class="container">
<h2>Currency Converter</h2>
<form>
<form action="">
<div class="amount">
<p>Enter Amount</p>
<input value="1" type="text" />
<p>Enter amount</p>
<input type="number" value="" placeholder="100" />
</div>
<div class="dropdown">
<div class="from">
<p>From</p>
<div class="select-container">
<img src="https://flagsapi.com/US/flat/64.png" />
<select name="from"></select>
<img src="https://flagsapi.com/US/flat/64.png" alt="loading" />
<select name="from" id=""></select>
</div>
</div>
<i class="fa-solid fa-arrow-right-arrow-left"></i>
<button id="swap" >
<i class="fa-solid fa-arrow-right-arrow-left"></i>
</button>
<div class="to">
<p>To</p>
<div class="select-container">
<img src="https://flagsapi.com/IN/flat/64.png" />
<select name="to"></select>
<img src="https://flagsapi.com/IN/flat/64.png" alt="loading" />
<select name="to" id=""></select>
</div>
</div>
</div>
<div class="msg">1USD = 80INR</div>
<button>Get Exchange Rate</button>
<div class="msg">1 USD = 80 INR</div>
<button id="ExchangeButton">Get Exchange rate</button>
</form>
</div>
<script src="codes.js"></script>
Expand Down
2 changes: 1 addition & 1 deletion CurrencyConverter/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ form input {
margin-top: 2rem;
}

.dropdown i {
.dropdown button {
font-size: 1.5rem;
margin-top: 1rem;
}
Expand Down