Merge pull request #919 from Tushar2930/master

Currency converter #877
thinkswell · Oct 15, 2023 · fdda127 · fdda127
2 parents bd95e7d + 1a1e6bc
commit fdda127
Show file tree

Hide file tree

Showing 4 changed files with 162 additions and 0 deletions.
diff --git a/CurrencyConverter/Tushar2930/index.html b/CurrencyConverter/Tushar2930/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="style.css">
+ <title>Currency Converter</title>
+</head>
+<body>
+ <div class="container">
+ <h1>Currency Converter</h1>
+ <div class="input-container">
+ <input type="number" id="amount" placeholder="Enter amount">
+ <select id="from">
+ <option value="USD">USD</option>
+ <option value="JPY">JPY</option>
+ <option value="EUR">EUR</option>
+ <option value="GBP">GBP</option>
+ <option value="CAD">CAD</option>
+ <option value="AUD">AUD</option>
+ <option value="INR">INR</option>
+ <option value="BRL">BRL</option>
+ <!-- Add more currency options here -->
+ </select>
+ <select id="to">
+ <option value="USD">USD</option>
+ <option value="JPY">JPY</option>
+ <option value="EUR">EUR</option>
+ <option value="GBP">GBP</option>
+ <option value="CAD">CAD</option>
+ <option value="AUD">AUD</option>
+ <option value="INR">INR</option>
+ <option value="BRL">BRL</option>
+ <!-- Add more currency options here -->
+ </select>
+ <button id="convert">Convert</button>
+ </div>
+ <div class="result" id="result">Converted Amount: <span id="converted-amount">0</span></div>
+ </div>
+
+ <script src="script.js"></script>
+</body>
+</html>
diff --git a/CurrencyConverter/Tushar2930/readme.md b/CurrencyConverter/Tushar2930/readme.md
@@ -0,0 +1,19 @@
+# Currency Converter Web App
+
+A simple currency converter web app that allows you to convert between different currencies using an external API.
+
+## Features
+- Convert between various currencies.
+- Real-time exchange rate data using an API.
+- User-friendly interface.
+
+## Usage
+1. Open `index.html` in your web browser.
+2. Enter the amount to convert.
+3. Select the currency you want to convert from.
+4. Select the currency you want to convert to.
+5. Click the "Convert" button to see the converted amount.
+
+## API
+This project uses API to fetch real-time exchange rates.
+![Screenshot (75)](https://github.com/Tushar2930/javascript-mini-projects/assets/110845672/76bfb55d-6ef0-4d0d-ade7-0fc33217e2ec)
diff --git a/CurrencyConverter/Tushar2930/script.js b/CurrencyConverter/Tushar2930/script.js
@@ -0,0 +1,55 @@
+const amountInput = document.getElementById("amount");
+const fromCurrencySelect = document.getElementById("from");
+const toCurrencySelect = document.getElementById("to");
+const convertButton = document.getElementById("convert");
+const result = document.getElementById("result");
+const convertedAmount = document.getElementById("converted-amount");
+
+convertButton.addEventListener("click", () => {
+ const amount = amountInput.value;
+ const fromCurrency = fromCurrencySelect.value;
+ const toCurrency = toCurrencySelect.value;
+
+ if (amount !== "" && fromCurrency !== toCurrency) {
+ convertCurrency(amount, fromCurrency, toCurrency);
+ }
+});
+
+var myHeaders = new Headers();
+myHeaders.append("apikey", "6oeOtPvaT3rX63XWwcEzhPb2ap67d8qr");
+
+var requestOptions = {
+ method: 'GET',
+ redirect: 'follow',
+ headers: myHeaders
+};
+
+function convertCurrency(amount, fromCurrency, toCurrency) {
+ // const apiKey = "6oeOtPvaT3rX63XWwcEzhPb2ap67d8qr"; // Replace with your API key
+ // const url = `https://api.apilayer.com/exchangerates_data/latest?from=${fromCurrency}&to=${toCurrency}&amount=${amount}&apikey=${apiKey}`;
+
+ console.log(fromCurrency, toCurrency, amount);
+ fetch(`https://api.apilayer.com/exchangerates_data/convert?to=${toCurrency}&from=${fromCurrency}&amount=${amount}`, requestOptions)
+ .then(response => response.json())
+ .then(result => {
+ const conversionResult = result.result;
+ console.log(conversionResult);
+ if(conversionResult !== undefined){
+ convertedAmount.innerHTML= conversionResult;
+ result.style.display = "block";
+ }
+
+ })
+ .catch(error => console.log('error', error));
+ // fetch(url)
+ // .then((response) => response.json())
+ // .then((data) => {
+ // const conversionResult = data.result;
+ // console.log(data);
+ // convertedAmount.innerHTML= conversionResult;
+ // result.style.display = "block";
+ // })
+ // .catch((error) => {
+ // console.error("Error:", error);
+ // });
+}
diff --git a/CurrencyConverter/Tushar2930/styles.css b/CurrencyConverter/Tushar2930/styles.css
@@ -0,0 +1,45 @@
+body {
+ font-family: Arial, sans-serif;
+ background-color: #f2f2f2;
+ text-align: center;
+}
+
+.container {
+ max-width: 400px;
+ margin: 0 auto;
+ padding: 20px;
+ background-color: #fff;
+ border-radius: 5px;
+ box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+ font-size: 24px;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+ margin: 10px 0;
+}
+
+input, select {
+ padding: 10px;
+ margin: 5px 0;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+}
+
+button {
+ padding: 10px;
+ background-color: #007BFF;
+ color: #fff;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+}
+
+.result {
+ margin-top: 20px;
+ font-weight: bold;
+}