Skip to content

### Project Overview Pull Request To add Currency Converter is a web application in your Project #848

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
wants to merge 3 commits into from
Closed

### Project Overview Pull Request To add Currency Converter is a web application in your Project #848

wants to merge 3 commits into from

Conversation

@abhisek2004
Copy link

@abhisek2004 abhisek2004 commented Oct 10, 2024

Project Overview Pull Request To add Currency Converter is a web application in your Project

Project Details

No. Project Name Tech Stack Developed By
26 Currency Converter HTML, CSS, JavaScript 🎮 Abhisek Panda 👦

Additional Information

Description 📃

The Currency Converter is a web application that allows users to convert amounts from one currency to another. It retrieves real-time exchange rates and provides a user-friendly interface to select currencies. The project leverages HTML, CSS, and JavaScript to create an interactive experience.

Key Features ✨

  • Comprehensive Currency List: Access exchange rates for every country in the world.
  • Real-Time Exchange Rates: Get the most accurate and up-to-date conversion values.
  • User-Friendly Interface: Simple and intuitive design for ease of use.

How to Run It? 🕹️

  1. Simple Project Run Using Live Server :

  2. Open index.html:
    Open the index.html file in your preferred web browser.

  3. Interact with the App:

    • Enter an amount to convert.
    • Select the currencies from the dropdown menus.
    • Click the "Get Exchange Rate" button to see the conversion result.
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Currency Converter</title>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css'>
    <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap'>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <!-- partial:index.partial.html -->
    <div class="wrapper">
        <header>Currency Converter</header>
        <form action="#">
            <div class="amount">
                <p>Enter Amount</p>
                <input type="text" value="1">
            </div>
            <div class="drop-list">
                <div class="from">
                    <p>From</p>
                    <div class="select-box">
                        <img src="https://flagcdn.com/48x36/us.png" alt="flag">
                        <select>
                            <!-- Options tag are inserted from JavaScript -->
                        </select>
                    </div>
                </div>
                <div class="icon"><i class="fas fa-exchange-alt"></i></div>
                <div class="to">
                    <p>To</p>
                    <div class="select-box">
                        <img src="https://flagcdn.com/48x36/in.png" alt="flag">
                        <select>
                            <!-- Options tag are inserted from JavaScript -->
                        </select>
                    </div>
                </div>
            </div>
            <div class="exchange-rate">Getting exchange rate...</div>
            <button>Get Exchange Rate</button>
        </form>
    </div>
    <!-- partial -->
    <script src="./script.js"></script>
    <footer>
        <a href="https://github.com/abhisek2004">@ Created and Designed By Abhisek Panda</a>
    </footer>
</body>

</html>
let country_list = {
    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"
};
let apiKey = "e759f92560e41c99ee6213a2";

const dropList = document.querySelectorAll("form select"),
    fromCurrency = document.querySelector(".from select"),
    toCurrency = document.querySelector(".to select"),
    getButton = document.querySelector("form button");

for (let i = 0; i < dropList.length; i++) {
    for (let currency_code in country_list) {
        let optionTag = `<option value="${currency_code}">${currency_code}</option>`;
        dropList[i].insertAdjacentHTML("beforeend", optionTag);
    }
    dropList[i].addEventListener("change", (e) => {
        loadFlag(e.target);
    });
}

function loadFlag(element) {
    for (let code in country_list) {
        if (code == element.value) {
            let imgTag = element.parentElement.querySelector("img");
            imgTag.src = `https://flagcdn.com/48x36/${country_list[code].toLowerCase()}.png`;
        }
    }
}

window.addEventListener("load", () => {
    // Removed automatic selection of currencies
});

getButton.addEventListener("click", (e) => {
    e.preventDefault();
    getExchangeRate();
});

const exchangeIcon = document.querySelector("form .icon");
exchangeIcon.addEventListener("click", () => {
    let tempCode = fromCurrency.value;
    fromCurrency.value = toCurrency.value;
    toCurrency.value = tempCode;
    loadFlag(fromCurrency);
    loadFlag(toCurrency);
    getExchangeRate();
});

function getExchangeRate() {
    const amount = document.querySelector("form input");
    const exchangeRateTxt = document.querySelector("form .exchange-rate");
    let amountVal = amount.value;
    if (amountVal === "" || amountVal === "0") {
        amount.value = "1";
        amountVal = 1;
    }
    exchangeRateTxt.innerText = "Getting exchange rate...";
    let url = `https://v6.exchangerate-api.com/v6/${apiKey}/latest/${fromCurrency.value}`;
    fetch(url)
        .then((response) => response.json())
        .then((result) => {
            let exchangeRate = result.conversion_rates[toCurrency.value];
            let totalExRate = (amountVal * exchangeRate).toFixed(2);
            exchangeRateTxt.innerText = `${amountVal} ${fromCurrency.value} = ${total

ExRate} ${toCurrency.value}`;
        })
        .catch(() => {
            exchangeRateTxt.innerText = "Something went wrong";
        });
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 0 10px;
    background-image: url(./Currency.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

::selection {
    color: #000;
    background: #fff;
}

.wrapper {
    width: 370px;
    padding: 30px;
    border-radius: 5px;
    background: #222;
    box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.2);
    color: #fff;
}

.wrapper header {
    font-size: 28px;
    font-weight: 500;
    text-align: center;
}

.wrapper form {
    margin: 40px 0 20px 0;
}

form :where(input, select, button) {
    width: 100%;
    outline: none;
    border-radius: 5px;
    border: none;
    background: #444444;
    color: #fff;
}

form p {
    font-size: 18px;
    margin-bottom: 5px;
}

form input {
    height: 50px;
    font-size: 17px;
    padding: 0 15px;
    border: 1px solid #999;
    background: #555;
}

form input:focus {
    padding: 0 14px;
    border: 2px solid #675afe;
    background: #555;
}

form .drop-list {
    display: flex;
    margin-top: 20px;
    align-items: center;
    justify-content: space-between;
}

.drop-list .select-box {
    display: flex;
    width: 115px;
    height: 45px;
    align-items: center;
    border-radius: 5px;
    justify-content: center;
    border: 1px solid #999;
    background: #fff;
    color: #000;
}

.select-box img {
    max-width: 21px;
}

.select-box select {
    width: auto;
    font-size: 16px;
    background: none;
    margin: 0 -5px 0 5px;
    color: #000;
}

.select-box select::-webkit-scrollbar {
    width: 8px;
}

.select-box select::-webkit-scrollbar-track {
    background: #fff;
}

.select-box select::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 8px;
    border-right: 2px solid #ffffff;
}

.drop-list .icon {
    cursor: pointer;
    margin-top: 30px;
    font-size: 22px;
    color: #fff;
}

form .exchange-rate {
    font-size: 17px;
    margin: 20px 0 30px;
}

form button {
    height: 52px;
    color: #fff;
    font-size: 17px;
    cursor: pointer;
    background: #444;
    transition: background 0.3s ease, transform 0.2s ease;
}

form button:hover {
    background: #333;
}

form button:active {
    transform: scale(0.95);
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.card {
    margin: 20px;
}

footer {
    text-align: center;
    height: 20px;
    margin: 0 20px;
    padding-top: 20px;
    font-size: 25px;
}

My Work Screenshots 📸

Example of the Currency Converter in action.
1
2
3
4
5
Screenshot 2024-10-10 234506

@vercel
Copy link

vercel bot commented Oct 10, 2024

@abhisek2004 is attempting to deploy a commit to the avdheshvarshney's projects Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions
Copy link

github-actions bot commented Oct 10, 2024

Thank you for submitting your pull request! We'll review it as soon as possible. For further communication, join our discord server https://discord.gg/tSqtvHUJzE.

Avdhesh-Varshney
Avdhesh-Varshney requested changes Oct 11, 2024
View reviewed changes
Copy link
Member

@Avdhesh-Varshney Avdhesh-Varshney left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Link your pr with your assigned issue and add a readme and screenshot file according to guidelines

@Avdhesh-Varshney Avdhesh-Varshney added Requested Changes ⚙️ Warning: Follow Guidelines https://github.com/Avdhesh-Varshney/WebMasterLog/issues/108 labels Oct 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Avdhesh-Varshney Avdhesh-Varshney Avdhesh-Varshney requested changes

Assignees

@abhisek2004 abhisek2004

Labels

Warning: Follow Guidelines https://github.com/Avdhesh-Varshney/WebMasterLog/issues/108

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@abhisek2004 @Avdhesh-Varshney