currency converter api implementation added

dishamodi0910 · May 27, 2024 · 926ffac · 926ffac
1 parent d0cf41f
commit 926ffac
Show file tree

Hide file tree

Showing 5 changed files with 234 additions and 1 deletion.
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|