Skip to content

Commit

Permalink
basic functionality added
Browse files Browse the repository at this point in the history
  • Loading branch information
@THEROHAN01
THEROHAN01 committed Oct 25, 2024
0 parents commit 1e751ad
Show file tree
Hide file tree
Showing 4 changed files with 439 additions and 0 deletions.
161 changes: 161 additions & 0 deletions codes.js
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",
};
66 changes: 66 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>

<div class="container">
<h2>Currency Converter</h2>

<!-- form starts here -->

<form action="">
<div class="amount">
<p>Enter Amount</p>
<input value="1" type="number">
</div>

<div class="dropdown">
<div class="from">
<p>From</p>

<div class="select-container">
<img src="https://flagsapi.com/US/flat/64.png" alt="">
<select name="from" id="">
<option value="USD">USD</option>
<option value="INR">INR</option>
<option value="EUR">EUR</option>
<option value="AUD">AUD</option>

</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" alt="">
<select name="to" id=" select">
<option value="USD">USD</option>
<option value="INR" selected>INR</option>
<option value="EUR">EUR</option>
<option value="AUD">AUD</option>

</select>
</div>
</div>
</div>
<div class="msg">1 USD = 80 INR</div>
<button>Get exchange rate</button>
</form>
</div>

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

</body>
</html>
126 changes: 126 additions & 0 deletions script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
// const URL = "https://cat-fact.herokuapp.com/facts";

// const factPara = document.querySelector("#fact");

// let promise = fetch (URL);
// console.log(promise);

// const getFacts = async() =>{
// console.log("getting data ...")
// let response = await fetch(URL);
// console.log(response);
// let data = await response.json();
// factPara.innerText = data[2].text;


// }
// // json = javascript object notation

const BASE_URL= "https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@2024-03-06/v1/currencies";


// population options
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 (code in countryList){
console.log(code,countryList[code]);

}
for (let select of dropdowns){
for (currCode in countryList ){
let newOption = document.createElement("option");
newOption.innerText = currCode;
newOption.value = currCode;
select.append(newOption);

if (select.name === "from" && currCode === "USD"){
newOption.selected = "selected";
}else if (select.name === "to" && currCode === "INR"){
newOption.selected = "selected";
}
select.append(newOption);
}

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

}



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

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

// let amount = document.querySelector(".amount input");
// let amtVal = amount.value;
// if (amtVal ==="" || amtVal < 1){
// amtVal = 1;
// amount.value = "1";

// }

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


// msg.innerText = `${amtVal} ${fromCurr.value} = ${finalAmount} ${toCurr.value}`

});


const updateExchangeRate = async () =>{
let amount = document.querySelector(".amount input");
let amtVal = amount.value;
if (amtVal ==="" || amtVal < 1){
amtVal = 1;
amount.value = "1";

}

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


msg.innerText = `${amtVal} ${fromCurr.value} = ${finalAmount} ${toCurr.value}`
}



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

})
Loading

0 comments on commit 1e751ad

Please sign in to comment.