Skip to content
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

currency converter api implementation added #162

Merged
merged 1 commit into from
Jun 1, 2024
Merged

currency converter api implementation added #162

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 40 additions & 0 deletions Existing_API_Collection/Currency_Converter_API/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.

65 changes: 65 additions & 0 deletions Existing_API_Collection/Currency_Converter_API/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
28 changes: 28 additions & 0 deletions Existing_API_Collection/Currency_Converter_API/script..js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)
})
100 changes: 100 additions & 0 deletions Existing_API_Collection/Currency_Converter_API/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}

2 changes: 1 addition & 1 deletion Existing_API_Collection/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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|
Loading