Merge pull request #920 from yashwanthvarma18/currencyConverter-yashw…

…anthvarma18 Currency Converter-yashwanthvarma18
thinkswell · Oct 14, 2023 · 0290b2f · 0290b2f
2 parents fff7904 + dfc4562
commit 0290b2f
Show file tree

Hide file tree

Showing 5 changed files with 292 additions and 0 deletions.
diff --git a/CurrencyConverter/yashwanthvarma18/README.md b/CurrencyConverter/yashwanthvarma18/README.md
@@ -0,0 +1,37 @@
+# Currency Converter
+
+Currency Converter is a web application that allows you to convert currencies with ease. It provides a simple and user-friendly interface for converting different currencies.
+
+![Currency Converter](ss.png)
+
+## Features
+
+- Convert from one currency to another.
+- Support for various popular currencies.
+- Real-time currency conversion rates.
+
+## Usage
+
+1. Open the Currency Converter website in your web browser.
+2. Select the currency you want to convert from in the "From Currency" dropdown.
+3. Enter the amount you want to convert in the input field.
+4. Select the currency you want to convert to in the "To Currency" dropdown.
+5. Click the "Convert" button to calculate the conversion.
+
+The converted amount will be displayed in the "Converted Amount" section.
+
+## Installation
+
+There is no installation required. Currency Converter is a web-based application, and you can access it by opening the provided URL in your web browser.
+
+## Development
+
+If you want to contribute to the development of Currency Converter, follow these steps:
+
+1. Clone this repository to your local machine.
+2. Make your changes or improvements.
+3. Test your changes locally.
+4. Submit a pull request.
+
+Enjoy converting currencies with Currency Converter!
+
diff --git a/CurrencyConverter/yashwanthvarma18/index.html b/CurrencyConverter/yashwanthvarma18/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Fjalla+One&family=Merriweather:wght@700&family=Montserrat:wght@200&family=Oswald:wght@200;500&family=Poppins:wght@300&family=Signika:wght@300&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+    <title>Currency Converter</title>
+</head>
+<body>
+    <div class="centered-container">
+        <h1>Currency Converter</h1>
+
+        <div id="currency-list" class="flex-container">
+            <div class="currency-dropdown">
+                <select id="from-currency">
+                </select>
+            </div>
+            <input type="number" id="amount" placeholder="Amount">
+            <div class="currency-dropdown">
+                <select id="to-currency">
+
+                </select>
+            </div>
+            <button id="convert">Convert</button>
+        </div>
+
+        <div id="result">
+            <p>Converted Amount: <span id="converted-amount"></span></p>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/CurrencyConverter/yashwanthvarma18/script.js b/CurrencyConverter/yashwanthvarma18/script.js
@@ -0,0 +1,121 @@
+// Define an object with currency data
+const currencies = {
+    AED: "Arabic dirham",
+    AFN: "Afghani",
+    ALL: "Albanian Lek",
+    USD: "US Dollar",
+    EUR: "Euro",
+    GBP: "British Pound",
+    JPY: "Japanese Yen",
+    INR: "Indian Rupee",
+    AUD: "Australian Dollar",
+    CAD: "Canadian Dollar",
+    CNY: "Chinese Yuan",
+    CHF: "Swiss Franc",
+    SEK: "Swedish Krona",
+    NZD: "New Zealand Dollar",
+    ZAR: "South African Rand",
+    RUB: "Russian Ruble",
+    BRL: "Brazilian Real",
+    MXN: "Mexican Peso",
+    SGD: "Singapore Dollar",
+    KRW: "South Korean Won",
+    THB: "Thai Baht",
+    HKD: "Hong Kong Dollar",
+    TRY: "Turkish Lira",
+    ILS: "Israeli New Shekel",
+    QAR: "Qatari Rial",
+    SAR: "Saudi Riyal",
+    PLN: "Polish Złoty",
+    NOK: "Norwegian Krone",
+    MYR: "Malaysian Ringgit",
+    SYP: "Syrian Pound",
+    NPR: "Nepalese Rupee",
+    FJD: "Fiji Dollar",
+    CLP: "Chilean Peso",
+    PEN: "Peruvian Nuevo Sol",
+    ARS: "Argentine Peso",
+    VND: "Vietnamese Đồng",
+    IRR: "Iranian Rial",
+    EGP: "Egyptian Pound",
+    AED: "United Arab Emirates Dirham",
+    ZMW: "Zambian Kwacha",
+};
+
+// Define an object with conversion rates (to USD)
+const conversionRates = {
+    AED: 0.27,
+    AFN: 0.013,
+    ALL: 0.0092,
+    USD: 1,
+    EUR: 0.85,
+    GBP: 0.73,
+    JPY: 113.85,
+    INR: 73.19,
+    AUD: 1.36,
+    CAD: 1.26,
+    CNY: 6.38,
+    CHF: 0.92,
+    SEK: 8.77,
+    NZD: 1.47,
+    ZAR: 15.45,
+    RUB: 75.34,
+    BRL: 5.28,
+    MXN: 20.07,
+    SGD: 1.34,
+    KRW: 1177.74,
+    THB: 32.52,
+    HKD: 7.77,
+    TRY: 13.71,
+    ILS: 3.26,
+    QAR: 3.64,
+    SAR: 3.75,
+    PLN: 4.16,
+    NOK: 9.12,
+    MYR: 0.24,
+    SYP: 0.0024,
+    NPR: 0.0085,
+    FJD: 0.48,
+    CLP: 0.013,
+    PEN: 0.25,
+    ARS: 8.88,
+    VND: 0.000043,
+    IRR: 0.000023,
+    EGP: 0.063,
+    ZMW: 0.054,
+};
+
+
+function populateCurrencies() {
+    const fromCurrencySelect = document.getElementById("from-currency");
+    const toCurrencySelect = document.getElementById("to-currency");
+
+    for (const currency in currencies) {
+        const option1 = new Option(currency, currency);
+        const option2 = new Option(currency, currency);
+        fromCurrencySelect.add(option1);
+        toCurrencySelect.add(option2);
+    }
+}
+
+function convertCurrency() {
+    const fromCurrency = document.getElementById("from-currency").value;
+    const toCurrency = document.getElementById("to-currency").value;
+    const amount = parseFloat(document.getElementById("amount").value);
+    const convertedAmountElement = document.getElementById("converted-amount");
+
+    if (isNaN(amount)) {
+        alert("Please enter a valid amount.");
+        return;
+    }
+
+    const conversionRate = conversionRates[toCurrency] / conversionRates[fromCurrency];
+
+    const convertedAmount = (amount * conversionRate).toFixed(2);
+    convertedAmountElement.textContent = `${convertedAmount} ${toCurrency}`;
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    populateCurrencies();
+    document.getElementById("convert").addEventListener("click", convertCurrency);
+});
diff --git a/CurrencyConverter/yashwanthvarma18/ss.png b/CurrencyConverter/yashwanthvarma18/ss.png
diff --git a/CurrencyConverter/yashwanthvarma18/style.css b/CurrencyConverter/yashwanthvarma18/style.css
@@ -0,0 +1,97 @@
+body {
+    background-image: url('https://wallpaperaccess.com/full/2326823.jpg');
+    background-size: cover;
+    background-repeat: no-repeat;
+    font-family: 'Bebas Neue', sans-serif;
+    font-family: 'Fjalla One', sans-serif;
+    font-family: 'Merriweather', serif;
+    font-family: 'Montserrat', sans-serif;
+    font-family: 'Oswald', sans-serif;
+    font-family: 'Poppins', sans-serif;
+    font-family: 'Signika', sans-serif;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+}
+
+
+.centered-container {
+    background-color: rgba(255, 255, 255, 0.9); /* Set the alpha (fourth) value to control transparency */
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    text-align: center;
+    transition: transform 0.3s ease-in-out;
+    transform: scale(1);
+}
+
+
+.centered-container.enter {
+    transform: scale(1.05);
+}
+
+h1 {
+    color: #000000;
+}
+
+.flex-container {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 15px;
+}
+
+.currency-dropdown {
+    max-height: 200px;
+    background-color: #007BFF;
+    overflow-y: auto;
+    transition: max-height 0.3s ease-in-out;
+}
+
+input[type="number"] {
+    width: 100px;
+    margin: 10px 0;
+    padding: 3px;
+    color: #000000;
+    border: 1px solid #000000;
+    border-radius: 5px;
+    transition: transform 0.3s ease-in-out; /* Added transform property for smoother scaling */
+}
+
+button#convert {
+    padding: 5px 20px;
+    background-color: #007BFF;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out; /* Added transform property for smoother scaling */
+}
+
+button#convert:hover {
+    background-color: #0056b3;
+    transform: scale(1.05); /* Add this line for the hover effect */
+}
+input[type="number"]:hover
+{
+    transform: scale(1.05); /* Add this line for the hover effect */
+}
+#result {
+    font-family: 'Bebas Neue', sans-serif;
+font-family: 'Fjalla One', sans-serif;
+font-family: 'Merriweather', serif;
+font-family: 'Montserrat', sans-serif;
+font-family: 'Oswald', sans-serif;
+font-family: 'Poppins', sans-serif;
+font-family: 'Signika', sans-serif;
+    margin: 20px;
+    font-weight: bold;
+}
+
+#converted-amount {
+    color: #007BFF;
+}