Merge pull request #39 from tajulafreen/Currcency_converter

tajulafreen · web-flow · commit 5d01f91432e1 · 2024-12-17T01:36:13.000+05:30
50Projects-HTML-CSS-JavaScript : Currcency converter
diff --git a/README.md b/README.md
@@ -408,6 +408,17 @@ In order to run this project you need:
 </details>
 </li>
 
+<li>
+<details>
+<summary>Currency Converter</summary>
+<p>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.</p>
+<ul>
+<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/CurrencyConverter/">Live Demo</a></li>
+<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/CurrencyConverter">Source</a></li>
+</ul> 
+</details>
+</li>
+
 </ol>
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
diff --git a/Source-Code/CurrencyConverter/index.html b/Source-Code/CurrencyConverter/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Currency Converter</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Currency Converter</h1>
+        <div class="converter">
+            <input type="number" id="amount" placeholder="Amount" />
+            <select id="from-currency">
+                <option value="USD">USD</option>
+                <option value="EUR">EUR</option>
+                <option value="INR">INR</option>
+                <option value="GBP">GBP</option>
+            </select>
+            <span>to</span>
+            <select id="to-currency">
+                <option value="INR">INR</option>
+                <option value="USD">USD</option>
+                <option value="EUR">EUR</option>
+                <option value="GBP">GBP</option>
+            </select>
+            <button id="convert">Convert</button>
+        </div>
+        <div id="result"></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Source-Code/CurrencyConverter/script.js 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
@@ -0,0 +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;
+}
+
+.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;
+}
