Skip to content

Commit

Permalink
Add project currency converter
Browse files Browse the repository at this point in the history
  • Loading branch information
@riyaa060
riyaa060 committed Oct 27, 2024
1 parent 4147b15 commit 0e71c41
Show file tree
Hide file tree
Showing 6 changed files with 404 additions and 0 deletions.
161 changes: 161 additions & 0 deletions 30-currency-converter/codes.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,161 @@
const countryList = {
AED: "AE",
AFN: "AF",
XCD: "AG",
ALL: "AL",
AMD: "AM",
ANG: "AN",
AOA: "AO",
AQD: "AQ",
ARS: "AR",
AUD: "AU",
AZN: "AZ",
BAM: "BA",
BBD: "BB",
BDT: "BD",
XOF: "BE",
BGN: "BG",
BHD: "BH",
BIF: "BI",
BMD: "BM",
BND: "BN",
BOB: "BO",
BRL: "BR",
BSD: "BS",
NOK: "BV",
BWP: "BW",
BYR: "BY",
BZD: "BZ",
CAD: "CA",
CDF: "CD",
XAF: "CF",
CHF: "CH",
CLP: "CL",
CNY: "CN",
COP: "CO",
CRC: "CR",
CUP: "CU",
CVE: "CV",
CYP: "CY",
CZK: "CZ",
DJF: "DJ",
DKK: "DK",
DOP: "DO",
DZD: "DZ",
ECS: "EC",
EEK: "EE",
EGP: "EG",
ETB: "ET",
EUR: "FR",
FJD: "FJ",
FKP: "FK",
GBP: "GB",
GEL: "GE",
GGP: "GG",
GHS: "GH",
GIP: "GI",
GMD: "GM",
GNF: "GN",
GTQ: "GT",
GYD: "GY",
HKD: "HK",
HNL: "HN",
HRK: "HR",
HTG: "HT",
HUF: "HU",
IDR: "ID",
ILS: "IL",
INR: "IN",
IQD: "IQ",
IRR: "IR",
ISK: "IS",
JMD: "JM",
JOD: "JO",
JPY: "JP",
KES: "KE",
KGS: "KG",
KHR: "KH",
KMF: "KM",
KPW: "KP",
KRW: "KR",
KWD: "KW",
KYD: "KY",
KZT: "KZ",
LAK: "LA",
LBP: "LB",
LKR: "LK",
LRD: "LR",
LSL: "LS",
LTL: "LT",
LVL: "LV",
LYD: "LY",
MAD: "MA",
MDL: "MD",
MGA: "MG",
MKD: "MK",
MMK: "MM",
MNT: "MN",
MOP: "MO",
MRO: "MR",
MTL: "MT",
MUR: "MU",
MVR: "MV",
MWK: "MW",
MXN: "MX",
MYR: "MY",
MZN: "MZ",
NAD: "NA",
XPF: "NC",
NGN: "NG",
NIO: "NI",
NPR: "NP",
NZD: "NZ",
OMR: "OM",
PAB: "PA",
PEN: "PE",
PGK: "PG",
PHP: "PH",
PKR: "PK",
PLN: "PL",
PYG: "PY",
QAR: "QA",
RON: "RO",
RSD: "RS",
RUB: "RU",
RWF: "RW",
SAR: "SA",
SBD: "SB",
SCR: "SC",
SDG: "SD",
SEK: "SE",
SGD: "SG",
SKK: "SK",
SLL: "SL",
SOS: "SO",
SRD: "SR",
STD: "ST",
SVC: "SV",
SYP: "SY",
SZL: "SZ",
THB: "TH",
TJS: "TJ",
TMT: "TM",
TND: "TN",
TOP: "TO",
TRY: "TR",
TTD: "TT",
TWD: "TW",
TZS: "TZ",
UAH: "UA",
UGX: "UG",
USD: "US",
UYU: "UY",
UZS: "UZ",
VEF: "VE",
VND: "VN",
VUV: "VU",
YER: "YE",
ZAR: "ZA",
ZMK: "ZM",
ZWD: "ZW",
};
65 changes: 65 additions & 0 deletions 30-currency-converter/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<!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 href="style.css" rel="stylesheet" />

<!--While copying link from font awesome website, copy link tag url not link-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
<div class="container">
<h2> Currency Converter</h2>
<form>
<div class="amount">
<p>Enter amount</p>
<input value="1" type="text" />
</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">
<!-- <option>Ina</option>
<option>USA</option>
<option>Ina</option>
<option>USA</option>
<option>Ina</option>
<option>USA</option> -->
<!--selected is used to set default value in the dropdown box-->

</select>
</div>
</div>

<i class="fa-solid fa-arrow-right-arrow-left"></i>


<div class="to">
<p> To</p>
<div class="select-container">
<img src="https://flagsapi.com/IN/flat/64.png" />
<select name="to">
</select>
</div>
</div>
</div>
<div class="msg"> hghfgfhg</div>
<button> Get Exchange Rate</button>
</form>
</div>


<script src="codes.js"></script>
<script src="script.js"></script>

</body>

</html>
7 changes: 7 additions & 0 deletions 30-currency-converter/learning.txt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
const BASE_URL1 ="https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies";
Above is old link which has stopped working so failed to fetch data but did not know whats the issue after a lot of search I got to know that
ADMIN of this github repos has change the URLs then API started working

LINK OF CHANGES MADE

https://github.com/fawazahmed0/exchange-api/blob/main/MIGRATION.md
76 changes: 76 additions & 0 deletions 30-currency-converter/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
// *****************************************************************************************
// const BASE_URL1 ="https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies";
// Above is old link which has stopped working so failed to fetch data but did not know whats the issue after a lot of search I got to know that
// ADMIN of this github repos has change the URLs then API started working

//LINK OF CHANGES MADE

// https://github.com/fawazahmed0/exchange-api/blob/main/MIGRATION.md
//*******************************************************************************************
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 fromCurr = document.querySelector(".from select");
const toCurr = document.querySelector(".to select");
const msg = document.querySelector(".msg");

for (let select of dropdowns) {
for (currCode in countryList) {
let newOption = document.createElement("option");
newOption.innerText = currCode;
newOption.value = currCode;
if (select.name === "from" && currCode === "USD") {
newOption.selected = "selected";
} else if (select.name === "to" && currCode === "INR") {
newOption.selected = "selected";
}
select.append(newOption);
}

//"Change" is a type of event which occurs when the content of FORM is changed//

select.addEventListener("change", (evt) => {
updateFlag(evt.target);
});
}

const updateExchangeRate = async () => {
let amount = document.querySelector(".amount input");

let amtVal = amount.value;
if (amtVal === "" || amtVal < 1) {
amtVal = 1;
amount.value = "1";
}

console.log(fromCurr.value, toCurr.value);

const URL = `${BASE_URL}/${fromCurr.value.toLowerCase()}.json`;
let response = await fetch(URL);
let data = await response.json();
let rate = data[fromCurr.value.toLowerCase()][toCurr.value.toLowerCase()];

let finalAmount = amtVal * rate;
msg.innerText = `${amtVal} ${fromCurr.value} = ${finalAmount} ${toCurr.value}`;
};

const updateFlag = (element) => {
let currCode = element.value;
let countryCode = countryList[currCode];
let newSrc = `https://flagsapi.com/${countryCode}/flat/64.png`;

//In element we have select so to access image we have to go to its parent element

let img = element.parentElement.querySelector("img");
img.src = newSrc;
};

btn.addEventListener("click", (evt) => {
evt.preventDefault();
updateExchangeRate();
});

window.addEventListener("load", () => {
updateExchangeRate();
});
Loading

0 comments on commit 0e71c41

Please sign in to comment.