deploy

meetarora10 · Apr 11, 2024 · 37b7700 · 37b7700
1 parent 5ae0da1
commit 37b7700
Show file tree

Hide file tree

Showing 4 changed files with 364 additions and 0 deletions.
diff --git a/countryList.js b/countryList.js
@@ -0,0 +1,162 @@
+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",
+    NOK: "NO",
+    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/index.html b/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CurrencyConverter</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" />
+    <link href="https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div class="container">
+        <h2>Currency Converter</h2>
+        <hr>
+        <div class="amount">
+            <p>Enter amount : </p>
+            <input type="text" id="convert-amount" value="1">
+        </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" class="select">
+                    </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" class="select">
+                    </select>
+                </div>
+            </div>
+        </div>
+        <p class="convertMsg"></p>
+        <button class="submit" type="submit">Convert</button>
+    </div>
+    <script src="countryList.js"></script>
+    <script src="index.js"></script>
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,48 @@
+const URL='https://raw.githubusercontent.com/TheArmagan/currency/main/api';
+const select=document.querySelectorAll('.select');
+for(let data of  select){
+    for(code in countryList){
+        let newOp=document.createElement("option");
+        newOp.innerText=code;
+        newOp.value=code;
+        if(data.name==="from" && code==="USD"){
+            newOp.selected="selected";
+        }
+        if(data.name==="to" && code==="INR"){
+            newOp.selected="selected";
+        }
+        data.append(newOp);
+    }
+    data.addEventListener("change",(e)=>{
+        newFlag(e.target);
+    })
+}
+
+const but=document.querySelector('.submit');
+const msg=document.querySelector('.convertMsg');
+const fromCur=document.querySelector('.from select');
+const toCur=document.querySelector('.to select');
+const updateExchange=async ()=>{
+    let amount=document.querySelector('.amount input');
+    let amtVal=amount.value;
+    const curUrl=`${URL}/${fromCur.value}-to-${toCur.value}.json`;
+    let res=await fetch(curUrl);
+    let out=await res.json();
+    let exchangeRate=out["value"];
+    let ans=amtVal*exchangeRate;
+    msg.innerText=`${amtVal} ${fromCur.value} = ${ans} ${toCur.value}`;
+}
+const newFlag=(el)=>{
+    let code=el.value;
+    let curCode=countryList[code];
+    let newImgSrc=`https://flagsapi.com/${curCode}/flat/64.png`;
+    let img=el.parentElement.querySelector("img");
+    img.src=newImgSrc;
+}
+but.addEventListener('click',(e)=>{
+    e.preventDefault();  
+    updateExchange();
+})
+window.addEventListener("load",()=>{
+    updateExchange();
+})
diff --git a/style.css b/style.css
@@ -0,0 +1,110 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: linear-gradient(45deg,white,rgb(234, 88, 234));
+}
+
+.container {
+    /* background:linear-gradient(45deg,white,rgb(234, 88, 234)); */
+    background-color: grey;
+    box-shadow: 5px 5px 8px black;
+    border-radius: 10px;
+    height: 350px;
+    width: 480px;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    padding-bottom: 15px;
+}
+
+.container h2 {
+    position: relative;
+    bottom: 40px;
+    font-family: "Dela Gothic One", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+}
+hr{
+    color: white;
+    width: 200px;
+    position: relative;
+    bottom: 40px;
+}
+.amount{
+    position: relative;
+    bottom: 20px;
+}
+.amount p{
+    font-size: 1.35rem;
+    font-family: 'Times New Roman', Times, serif;
+}
+.amount input{
+    height: 30px;
+    width: 200px;
+    border-radius: 6px;
+    border: 1px solid black;
+}
+.from,.to{
+    height: 100px;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+}
+.from,.to p{
+    font-size: 1.16rem;
+}
+.dropdown {
+    display: flex;
+    justify-content: space-around;
+    width: 100%;
+}
+.select-container img{
+    max-width: 2.1rem;
+}
+.select-container{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 6rem;
+    border-radius: 5px;
+    border: 1px solid grey;
+    background-color: white;
+}
+.select{
+    border-radius: 10px;
+    border: none;
+    width: 60px;
+    height: 27px;
+    cursor: pointer;
+}
+i{
+    font-size: 1.8890rem;
+    position: relative;
+    top: 38px;
+    color: black;
+}
+.convertMsg{
+    font-size: 1rem;
+    font-family: "Dela Gothic One", sans-serif;
+    color: white;
+}
+.submit {
+    position: relative;
+    cursor: pointer;
+    top: 26px;
+    height: 40px;
+    width: 282px;
+    background-color: black;
+    color: white;
+    font-size: 1.1rem;
+    border: none;
+    border-radius: 5px;
+}