Add files via upload

ChampGupta · Jul 30, 2024 · 6c95ac3 · 6c95ac3
commit 6c95ac3
Show file tree

Hide file tree

Showing 4 changed files with 335 additions and 0 deletions.
diff --git a/Currency Converter/codes.js b/Currency Converter/codes.js
@@ -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",
+};
diff --git a/Currency Converter/index.html b/Currency Converter/index.html
@@ -0,0 +1,50 @@
+<!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">
+    <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">
+    <header>
+        <div class="heading">
+    <h1>Currency Converter</h1>
+</div>
+    </header>
+        <form>
+            <div class="amount">
+                <span>Enter the Amount</span>
+                <input type="text" id="amount" value="1">
+            </div>
+            <div class="dropdown">
+            <div class="from">
+                <p>
+                    From
+                </p>
+                <img src="https://flagsapi.com/US/flat/64.png" class="flag">
+                <select name="fromCurrency" id="fc" class="selector">
+
+                </select>
+            </div>
+            <i class="fa-solid fa-arrow-right-arrow-left" id="exchange"></i>
+            <div class="to">
+                <p>
+                    To
+                </p>
+                <img src="https://flagsapi.com/IN/flat/64.png" class="flag">
+                <select name="toCurrency" id="tc" class="selector">
+
+                </select>
+            </div>
+        </div>
+        <p class="msg"></p>
+        <button>Get Exchange Rate</button>
+        </form>
+    </div>
+    <script src="codes.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Currency Converter/script.js b/Currency Converter/script.js
@@ -0,0 +1,53 @@
+const baseURL="https://latest.currency-api.pages.dev/v1/currencies";
+const dropDown=document.querySelectorAll(".selector");
+const btn=document.querySelector("form button");
+const fromCurr=document.querySelector("#fc");
+const toCurr=document.querySelector("#tc");
+const msg=document.querySelector(".msg");
+
+for(let select of dropDown){
+    for(currCode in countryList){
+        let newOption=document.createElement("option");
+        newOption.innerText=currCode;
+        newOption.value=currCode;
+        if(select.name==="fromCurrency"&&currCode==="USD"){
+            newOption.selected="selected"
+        }
+        else if(select.name==="toCurrency"&&currCode==="INR"){
+            newOption.selected="selected"
+        }
+        select.append(newOption);
+    }
+    select.addEventListener("change", (evt)=>{
+        updateFlag(evt.target);
+    })
+}
+
+const updateFlag=(elem)=>{
+    let currCode=elem.value;
+    let countryCode=countryList[currCode];
+    let newSrc=`https://flagsapi.com/${countryCode}/flat/64.png`;
+    let img=elem.parentElement.querySelector("img");
+    img.src=newSrc;
+}
+
+btn.addEventListener("click",async (evt)=>{
+    evt.preventDefault();
+    let amount=document.querySelector("#amount");
+    if(amount.value===""||amount.value<0){
+        amount.value="1";
+    }
+    const URL=`${baseURL}/${fromCurr.value.toLowerCase()}.json`;
+    let response=await fetch(URL);
+    let data=await response.json();
+    let fromData=data[fromCurr.value.toLowerCase()];
+    let toData=fromData[toCurr.value.toLowerCase()];
+    let rate=toData;
+    let finalAmount=rate*(amount.value);
+    if(isNaN(finalAmount)){
+        msg.innerText=`Invalid Input`;
+    }else{
+    msg.innerText=`${amount.value} ${fromCurr.value}=${finalAmount} ${toCurr.value}`;
+    }
+});
+
diff --git a/Currency Converter/style.css b/Currency Converter/style.css
@@ -0,0 +1,71 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+body{
+    display:flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    min-height: 100vh;
+    background-color: #f4e4ba;
+    font-size: 25px;
+}
+.container{
+    background-color: aliceblue;
+    padding: 2rem 1rem 2rem 1rem;
+    border-radius: 2rem;
+    min-height: 45vh;
+    min-width: 40vw;
+    display:flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+}
+form{
+    margin: 2rem 0 2rem 0;
+}
+#amount{
+    border-radius: 1rem;
+    border: 1px solid lightgray;
+    font-size: 20px;
+    min-height: 25px;
+    padding: 3px 0px 3px 5px;
+}
+.dropdown{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 90px;
+    margin: 2rem;
+}
+button{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 70px 0 0 0px;
+    min-height: 3rem;
+    width: 30vw;
+    border-radius: 2rem;
+    font-size: 25px;
+    position: relative;
+    cursor: pointer;
+    background-color: blueviolet;
+    color: antiquewhite;
+    border: 2px solid black;
+}
+#exchange{
+    position: relative;
+    top: 0px;
+    right: 0px;
+}
+#fc,#tc{
+    display: flex;
+    min-width: 30px;
+    font-size: 18px;
+    margin: 0px 12px;
+    cursor: pointer;
+}
+.flag{
+    width: 85px;
+}