From d9ab3e87b5198fa69c416d2b339c936bbc4441b0 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Tue, 17 Dec 2024 01:26:13 +0530 Subject: [PATCH 1/3] add the project --- Source-Code/CurrencyConverter/index.html | 33 +++++++++++++++++ Source-Code/CurrencyConverter/script.js | 27 ++++++++++++++ Source-Code/CurrencyConverter/style.css | 46 ++++++++++++++++++++++++ 3 files changed, 106 insertions(+) create mode 100644 Source-Code/CurrencyConverter/index.html create mode 100644 Source-Code/CurrencyConverter/script.js create mode 100644 Source-Code/CurrencyConverter/style.css diff --git a/Source-Code/CurrencyConverter/index.html b/Source-Code/CurrencyConverter/index.html new file mode 100644 index 0000000..52d77f6 --- /dev/null +++ b/Source-Code/CurrencyConverter/index.html @@ -0,0 +1,33 @@ + + + + + + Currency Converter + + + +
+

Currency Converter

+
+ + + to + + +
+
+
+ + + \ No newline at end of file diff --git a/Source-Code/CurrencyConverter/script.js b/Source-Code/CurrencyConverter/script.js new file mode 100644 index 0000000..afb6869 --- /dev/null +++ b/Source-Code/CurrencyConverter/script.js @@ -0,0 +1,27 @@ +document.getElementById('convert').addEventListener('click', () => { + const amount = document.getElementById('amount').value; + const fromCurrency = document.getElementById('from-currency').value; + const toCurrency = document.getElementById('to-currency').value; + + if (amount === '' || Number.isNaN(Number(amount))) { + alert('Please enter a valid amount'); + return; + } + + const apiUrl = `https://api.exchangerate-api.com/v4/latest/${fromCurrency}`; + + fetch(apiUrl) + .then((response) => response.json()) + .then((data) => { + const exchangeRate = data.rates[toCurrency]; + const convertedAmount = (amount * exchangeRate).toFixed(2); + document.getElementById( + 'result', + ).innerText = `${amount} ${fromCurrency} = ${convertedAmount} ${toCurrency}`; + }) + .catch((error) => { + document.getElementById( + 'result', + ).innerText = `Error fetching exchange rates. ${error}Try again later.`; + }); +}); diff --git a/Source-Code/CurrencyConverter/style.css b/Source-Code/CurrencyConverter/style.css new file mode 100644 index 0000000..e5cf912 --- /dev/null +++ b/Source-Code/CurrencyConverter/style.css @@ -0,0 +1,46 @@ +body { + font-family: Arial, sans-serif; + background-color: #f4f4f4; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + background-color: white; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + width: 400px; + text-align: center; +} + +h1 { + margin-bottom: 20px; +} + +input, select, button { + margin: 10px 0; + padding: 10px; + font-size: 16px; +} + +button { + background-color: #4CAF50; + color: white; + border: none; + cursor: pointer; +} + +button:hover { + background-color: #45a049; +} + +#result { + margin-top: 20px; + font-size: 18px; + font-weight: bold; +} From 7bcce3db035d0c619bd2b639e0722b174720b96b Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Tue, 17 Dec 2024 01:26:54 +0530 Subject: [PATCH 2/3] correct the css --- Source-Code/CurrencyConverter/style.css | 56 +++++++++++++------------ 1 file changed, 29 insertions(+), 27 deletions(-) diff --git a/Source-Code/CurrencyConverter/style.css b/Source-Code/CurrencyConverter/style.css index e5cf912..e318503 100644 --- a/Source-Code/CurrencyConverter/style.css +++ b/Source-Code/CurrencyConverter/style.css @@ -1,46 +1,48 @@ body { - font-family: Arial, sans-serif; - background-color: #f4f4f4; - margin: 0; - padding: 0; - display: flex; - justify-content: center; - align-items: center; - height: 100vh; + font-family: Arial, sans-serif; + background-color: #f4f4f4; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; } .container { - background-color: white; - padding: 20px; - border-radius: 10px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - width: 400px; - text-align: center; + background-color: white; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + width: 400px; + text-align: center; } h1 { - margin-bottom: 20px; + margin-bottom: 20px; } -input, select, button { - margin: 10px 0; - padding: 10px; - font-size: 16px; +input, +select, +button { + margin: 10px 0; + padding: 10px; + font-size: 16px; } button { - background-color: #4CAF50; - color: white; - border: none; - cursor: pointer; + background-color: #4caf50; + color: white; + border: none; + cursor: pointer; } button:hover { - background-color: #45a049; + background-color: #45a049; } #result { - margin-top: 20px; - font-size: 18px; - font-weight: bold; + margin-top: 20px; + font-size: 18px; + font-weight: bold; } From a94bc17434916dcd11c4248efdcc50dcedc1839f Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Tue, 17 Dec 2024 01:29:31 +0530 Subject: [PATCH 3/3] updat eteh readme --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index ad3dbb5..7d52ee5 100644 --- a/README.md +++ b/README.md @@ -408,6 +408,17 @@ In order to run this project you need: +
  • +
    +Currency Converter +

    This project is a Currency Converter application built using HTML, CSS, and JavaScript. It allows users to convert one currency into another by inputting an amount and selecting the currencies they want to convert from and to.

    + +
    +
    • +

    (back to top)