Scribd Logo
Upload

Welcome to Scribd!

  • Currency Converter

    Uploaded by

    mahakmahak49793
    13 views5 pages

    Original Title

    currency converter

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    13 views5 pages

    Currency Converter

    Uploaded by

    mahakmahak49793

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    CURRENCY CONVERTER

    HTML CODE

    <!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="style3.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
    awesome/6.5.1/css/all.min.css">
    </head>

    <body>
    <div class="container">
    <h2>Currency Converter</h2>
    <form>
    <div class="amount">
    <p>Enter amount</p>
    <input value="" 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>
    <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"></select>
    </div>
    </div>
    </div>
    <div class="msg">1USD=80INR</div>
    <button>Get Exchange Rate</button>
    </form>
    </div>
    <script src="code.js"></script>
    <script src="script.js"></script>
    </body>

    </html>

    CSS CODE

    * {
    margin: 0;
    padding: 0;
    }

    body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #7ab2d7f1;
    }

    .container {
    background-color: white;
    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 lightgray;
    font-size: 1rem;
    height: 3rem;
    padding-left: 0.5rem;
    }

    .dropdown {
    display: flex;
    justify-content: space-around;
    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 lightGray;
    }

    select-container select {
    font-size: 1rem;
    width: auto;
    }

    .msg {
    margin: 2rem 0 2rem 0;
    }

    form button {
    height: 3rem;
    background-color: #af4d98;
    color: white;
    font-size: 1.15rem;
    cursor: pointer;
    }
    JAVASCRIPT CODE
    const BASE_URL = "https://cdn.jsdelivr.net/gh/fawazahmed0/currency-
    api@1/latest/currencies";
    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");

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

    for (let select of dropdowns) {


    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];
    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();
    updateExchangeRate();
    });

    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()}/${toCurr.value.toLowerCase()}.jso
    n`;
    let response = await fetch(URL);
    let data = await response.json();
    let rate = data[toCurr.value.toLowerCase()];
    let finalAmount = amtVal * rate;
    msg.innerText = `${amtVal} ${fromCurr.value}=${finalAmount}
    ${toCurr.value}`;
    }

    You might also like