Adding Currency Converter

kunalarya873 · Jan 25, 2024 · e049928 · e049928
1 parent a696c91
commit e049928
Show file tree

Hide file tree

Showing 6 changed files with 354 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/JS by Shradha Mam/.DS_Store b/JS by Shradha Mam/.DS_Store
diff --git a/JS by Shradha Mam/Currency Converter/codes.js b/JS by Shradha Mam/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/JS by Shradha Mam/Currency Converter/currency_converter.html b/JS by Shradha Mam/Currency Converter/currency_converter.html
@@ -0,0 +1,43 @@
+<!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.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+</head>
+<body>
+    <div class="container">
+        <h2>Currency Converter</h2>
+        <form>
+            <div class="amount">
+                <input type="text" value="100">
+                <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" id="">
+                            </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" id=""></select>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+                <div class="msg">1 USD = 80INR</div>
+                    <button>Get Exchange Rate</button>
+            </div>
+        </form>
+    </div>
+    <script src="codes.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/JS by Shradha Mam/Currency Converter/script.js b/JS by Shradha Mam/Currency Converter/script.js
@@ -0,0 +1,65 @@
+const BASE_URL = "https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies/";
+
+const dropdown = document.querySelectorAll(".dropdown select");
+const btn = document.querySelector("form button");
+const fromCurr = document.querySelector(".from select");
+const toCurr = document.querySelector(".to select");
+const Updatemsg = 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 === "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];
+    console.log(element);
+    let newSRC = `https://flagsapi.com/${countryCode}/flat/64.png`;
+    let img = element.parentElement.querySelector("img");
+    img.src=newSRC;
+};
+
+btn.addEventListener("click",async (evt) =>{
+    evt.preventDefault();
+    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()}/${toCurr.value.toLowerCase()}.json`;
+    let response = await fetch(URL);
+    let data = await response.json();
+    let rate = data[toCurr.value.toLowerCase()];
+    let finalAmount = amtVal * rate;
+    Updatemsg.innerText = `${amtVal} ${fromCurr.value} = ${finalAmount} ${toCurr.value}`;
+
+});
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/JS by Shradha Mam/Currency Converter/style.css b/JS by Shradha Mam/Currency Converter/style.css
@@ -0,0 +1,85 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background-color: #f4e4ba;
+}
+.container{
+    background-color: #fff;
+    padding: 2rem;
+    border-radius: 1rem;
+    min-height: 45vh;
+    width: 40vh;
+}
+form{
+    margin: 2rem 0 1rem 0;
+
+}
+
+form select,
+button,
+input{
+    width: 100%;
+    border: none;
+    outline: none;
+    border-radius: 0.75rem;
+
+}
+
+form input{
+    border: 1px  solid lightgrey;
+    font-size: 1rem;
+    height: 3rem;
+    padding-left: 0.5rem;
+
+}
+.dropdown{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 2rem;
+}
+
+.dropdown i{
+    font-size: 1.5rem;
+    margin-top: 1rem;
+}
+
+.select-container img{
+    max-width: 2rem;
+}
+.select-container{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 6rem;
+    border-radius: 0.5rem;
+    border: 1px solid lightgrey;
+}
+
+.select-container select{
+    font-size: 1rem;
+    width: auto;
+}
+/* .dropdown select{
+    font-size: 1rem;
+    width:auto ;
+} */
+
+.msg{
+    margin: 2rem 0 2rem 0;
+}
+
+form button{
+    height: 3rem;
+    background-color: #af4d98;
+    color: #fff;
+    font-size: 1.15rem;
+    cursor: pointer;
+
+}