diff --git a/Existing_API_Collection/Currency_Converter_API/README.md b/Existing_API_Collection/Currency_Converter_API/README.md new file mode 100644 index 0000000..50d7597 --- /dev/null +++ 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 new file mode 100644 index 0000000..6ce37d9 --- /dev/null +++ b/Existing_API_Collection/Currency_Converter_API/index.html @@ -0,0 +1,65 @@ + + + + + + + Currency Converter - Convert your currency + + + + +
+

Choose a currency to convert

+
+ + + + + + + +
+ + +
+ + + + + \ No newline at end of file diff --git a/Existing_API_Collection/Currency_Converter_API/script..js b/Existing_API_Collection/Currency_Converter_API/script..js new file mode 100644 index 0000000..c4c3a31 --- /dev/null +++ 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 += ` + ${key} + ${rJson["data"][key]["code"]} + ${Math.round(rJson["data"][key]["value"] * value)} + + ` + } + 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 new file mode 100644 index 0000000..6bf624c --- /dev/null +++ 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 index ee919a6..9b7e1cd 100644 --- 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|