Skip to content

Commit

Permalink
Initial Commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@KanwalpreetSingh1823
KanwalpreetSingh1823 committed Jun 18, 2024
0 parents commit 71a9b23
Show file tree
Hide file tree
Showing 4 changed files with 378 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",
};
46 changes: 46 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<!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">
<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">
<h1>Currency Converter</h1>
<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">
</select>
</div>
</div>
<div class="exchange">
<i class="fa-solid fa-arrow-right-arrow-left"></i>
</div>
<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">1USD = 80INR</div>
<button class="btn">Get Exchange Rate</button>
</form>
</div>
<script src="codes.js"></script>
<script src="script.js"></script>
</body>
</html>
67 changes: 67 additions & 0 deletions script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
const BASE_URL = "https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1";

const dropdowns = document.querySelectorAll(".dropdown select");
const image = document.querySelector("img");
const button = document.querySelector("button");

const fromCurr = document.querySelector(".from select");
const toCurr = document.querySelector(".to select");
const msg = document.querySelector(".msg");

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


for(let select of dropdowns){ //from and To dropdown
for(let 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);
}
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;
}

const fetchJSON = async(endPoint) =>{
const URL = `${BASE_URL}${endPoint}`;
let response = await fetch(URL);
if(!response.ok){
throw new Error(`HTTP Error! status = ${response.status}`);
}
return response.json();
}

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

const updateExchangeRate = async() =>{
let amount = document.querySelector("input");
let amtVal = amount.value;
if(amtVal=="" || amtVal<0){
amtVal = 1;
amount.value = '1';
};
let JSON = await fetchJSON(`/currencies/${fromCurr.value.toLowerCase()}.json`);
rate = JSON[fromCurr.value.toLowerCase()][toCurr.value.toLowerCase()];
let finalAmount = rate * amount.value;
msg.innerHTML = `${amount.value} ${fromCurr.value} = ${finalAmount} ${toCurr.value}`;
}
104 changes: 104 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
*{
margin:0;
padding:0;
}

body{
display: flex;
background:url("https://png.pngtree.com/thumb_back/fh260/background/20220512/pngtree-growing-chart-against-the-background-of-the-usa-america-flag-candlestick-image_1298780.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
align-items: center;
justify-content: center;
min-height: 100vh;
}

.container{
background-color: #fff;
padding:2rem;
border-radius: 1rem;
min-height:45vh;
width:45vh
}
form{
margin: 2rem 0 1rem 0;
}

form input,select,button{
width:100%;
border:none;
outline: none;
border-radius:0.75rem;
}

form input{
border:1px solid Lightgray;
font-size: 1rem;
height:3rem;
padding-left:0.5rem;
}

.dropdown{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 2rem;
}

.select-Container img{
max-width: 2rem;
}
.select-Container{
display:flex;
width:6rem;
border-radius: 0.5rem;
border:1px solid Lightgray;
}
.dropdown i{
font-size: 1.5rem;
margin-top: 1rem;
}
.select-Container select{
font-size: 1rem;
width:auto;
}
.msg{
margin:2rem 0 2rem 0;
}
form .btn{
height:3rem;
background-color: rgb(139, 48, 224);
color:white;
font-size: 1.15rem;
cursor:pointer;
}

@media screen and (max-width : 1600px){
h1{
font-size:2.10rem;
}
}
@media screen and (max-width : 1200px){
h1{
font-size:1.80rem;
}
}
/* @media screen and (min-width : 1200px){
h1{
font-size:2rem;
}
.msg{
padding-left:1.75rem;
} */

p{
font-size:medium;;
font-size: 1.1rem;
}

form input:hover{
border-color: black;
}

0 comments on commit 71a9b23

Please sign in to comment.