dishamodi0910 · dishamodi0910 · Jun 1, 2024 · May 27, 2024
diff --git a/Existing_API_Collection/Currency_Converter_API/README.md b/Existing_API_Collection/Currency_Converter_API/README.md
@@ -0,0 +1,40 @@
+# Currency Converter
+
+This is a simple currency converter web application built using HTML, CSS, and JavaScript. It allows users to convert currency values from one currency to another based on the latest exchange rates.
+
+## Features
+
+- Users can input a quantity and select a currency to convert from.
+- Supports conversion to various currencies including:
+  - Indian Rupee (INR)
+  - US Dollar (USD)
+  - Euro (EUR)
+  - British Pound (GBP)
+  - Japanese Yen (JPY)
+  - Canadian Dollar (CAD)
+  - Australian Dollar (AUD)
+  - Swiss Franc (CHF)
+  - Chinese Yuan (CNY)
+  - New Zealand Dollar (NZD)
+  - Singapore Dollar (SGD)
+  - Hong Kong Dollar (HKD)
+  - Swedish Krona (SEK)
+  - Norwegian Krone (NOK)
+  - Danish Krone (DKK)
+  - Mexican Peso (MXN)
+  - Russian Ruble (RUB)
+  - South African Rand (ZAR)
+  - Brazilian Real (BRL)
+  - South Korean Won (KRW)
+- Users can submit the form to see the converted values in a table.
+
+## Usage
+
+1. Clone the repository:
+
+2. Open the `index.html` file in your web browser.
+
+3. Enter a quantity and select a currency to convert from.
+
+4. Click the "Submit" button to see the converted values in the table.
+
diff --git a/Existing_API_Collection/Currency_Converter_API/index.html b/Existing_API_Collection/Currency_Converter_API/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Currency Converter - Convert your currency</title>
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+</head>
+
+<body class="bg-gray-100 flex flex-col justify-center items-center min-h-screen">
+    <div class="container max-w-lg bg-white p-8 rounded-lg shadow-lg">
+        <h1 class="text-2xl font-bold mb-4">Choose a currency to convert</h1>
+        <form action="/action.php" method="get" class="flex flex-col items-center">
+            <label for="quantity" class="text-lg mb-2">Choose a quantity:</label>
+            <input type="number" name="quantity" min="1" max="10" class="border border-gray-300 rounded-md py-2 px-4 mb-4 text-lg">
+
+            <label for="currency" class="text-lg mb-2">Choose a currency:</label>
+            <select name="currency" class="border border-gray-300 rounded-md py-2 px-4 mb-4 text-lg">
+                <option value="INR">Indian Rupee</option>
+                <option value="USD">US Dollar</option>
+                <option value="EUR">Euro</option>
+                <option value="GBP">British Pound</option>
+                <option value="JPY">Japanese Yen</option>
+                <option value="CAD">Canadian Dollar</option>
+                <option value="AUD">Australian Dollar</option>
+                <option value="CHF">Swiss Franc</option>
+                <option value="CNY">Chinese Yuan</option>
+                <option value="NZD">New Zealand Dollar</option>
+                <option value="SGD">Singapore Dollar</option>
+                <option value="HKD">Hong Kong Dollar</option>
+                <option value="SEK">Swedish Krona</option>
+                <option value="NOK">Norwegian Krone</option>
+                <option value="DKK">Danish Krone</option>
+                <option value="MXN">Mexican Peso</option>
+                <option value="RUB">Russian Ruble</option>
+                <option value="ZAR">South African Rand</option>
+                <option value="BRL">Brazilian Real</option>
+                <option value="KRW">South Korean Won</option>
+            </select>
+
+            <button class="btn bg-purple-500 text-white py-2 px-4 rounded-md text-lg hover:bg-purple-600 transition duration-300">Submit</button>
+        </form>
+
+        <div class="output mt-8 hidden">
+            <h2 class="text-xl font-bold mb-4">Here is your converted values in different currencies</h2>
+            <table class="w-full border-collapse border border-gray-300">
+                <thead>
+                    <tr class="bg-gray-200">
+                        <th class="py-2 px-4">Currency</th>
+                        <th class="py-2 px-4">Code</th>
+                        <th class="py-2 px-4">Value</th>
+                    </tr>
+                </thead>
+                <tbody>
+
+                </tbody>
+            </table>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Existing_API_Collection/Currency_Converter_API/script..js b/Existing_API_Collection/Currency_Converter_API/script..js
@@ -0,0 +1,28 @@
+console.log("Main.js working")
+
+const populate = async (value, currency) => {
+    let myStr = ""
+    url = "https://api.currencyapi.com/v3/latest?apikey=cur_live_7UStkUqQNBmahSoy8K635tE3Sjr5fK1UVPmVloZ2&base_currency=" + currency
+    let response = await fetch(url)
+    let rJson = await response.json()
+    document.querySelector(".output").style.display = "block"
+
+    for (let key of Object.keys(rJson["data"])) {
+        myStr += ` <tr>
+                        <td>${key}</td>
+                        <td>${rJson["data"][key]["code"]}</td>
+                        <td>${Math.round(rJson["data"][key]["value"] * value)}</td>
+                    </tr> 
+                `
+    }
+    const tableBody = document.querySelector("tbody");
+    tableBody.innerHTML = myStr;
+
+}
+const btn = document.querySelector(".btn")
+btn.addEventListener("click", (e) => {
+    e.preventDefault()
+    const value = parseInt(document.querySelector("input[name='quantity']").value);
+    const currency = document.querySelector("select[name='currency']").value
+    populate(value, currency)
+})
diff --git a/Existing_API_Collection/Currency_Converter_API/styles.css b/Existing_API_Collection/Currency_Converter_API/styles.css
@@ -0,0 +1,100 @@
+body {
+    background-color: antiquewhite;
+    margin: 0;
+    padding: 0;
+    font-family: 'Poppins', sans-serif;
+  }
+
+  nav {
+    background-color: rgb(224, 209, 245);
+    padding: 20px;
+    text-align: center;
+  }
+
+  nav ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  nav li {
+    display: inline-block;
+    margin: 0 10px;
+  }
+
+  nav a {
+    text-decoration: none;
+    color: rgb(2, 3, 18);
+    font-weight: bold;
+    transition: color 0.3s ease;
+  }
+
+  nav a:hover {
+    color: rgb(103, 101, 235);
+  }
+
+  .container {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .container h1,
+  .container h2 {
+    margin: 20px 0;
+    text-align: center;
+  }
+
+  .container form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .container form label {
+    font-size: 20px;
+  }
+
+  .container form input[type='number'],
+  .container select,
+  .container label {
+    font-size: 20px;
+    width: 300px;
+    margin-bottom: 20px;
+  }
+
+  .btn {
+    width: 150px;
+    padding: 10px 20px;
+    font-size: 20px;
+    background: #e0d0f5;
+    color: black;
+    border: none;
+    border-radius: 20px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+
+  .btn:hover {
+    background-color: #cbb6ee;
+  }
+
+  .output table {
+    width: 80%;
+    margin-top: 20px;
+    border-collapse: collapse;
+  }
+
+  .output th,
+  .output td {
+    border: 1px solid #ddd;
+    padding: 10px;
+  }
+
+  .output th {
+    background-color: #f2f2f2;
+    font-weight: bold;
+  }
+
diff --git a/Existing_API_Collection/README.md b/Existing_API_Collection/README.md
@@ -18,4 +18,4 @@
 |[Unsplash API](./unsplashApi/)| An API that enables users to retrieve high quality and copyright free Images from Unsplash and also get random Images |
 |[NewsBuster](./news-buster-api/)|This API helps you gain worldly knowledge with a better frontend by fetching API |
 |[GeoAPI](./GeoAPI/)| GeoAPI is a simple RESTful API that allows you to convert addresses to geographic coordinates (latitude and longitude) and vice versa. This API is built using Node.js and Express.|
-
+|[Currency Converter API](./Currency_Converter_API/)| Currency_Converter is a simple RESTful API that allows you to convert currency values to different currency|