add index.html

leneffets · Nov 26, 2024 · 1b0877e · 1b0877e
1 parent 27347f1
commit 1b0877e
Showing 1 changed file with 178 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Currency and Weight Converter</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 20px;
+            background-color: #f4f4f4;
+        }
+        .container {
+            max-width: 600px;
+            margin: auto;
+            padding: 20px;
+            background: white;
+            border-radius: 10px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        }
+        label {
+            display: block;
+            margin: 10px 0 5px;
+        }
+        input, button, select {
+            width: calc(100% - 20px);
+            padding: 10px;
+            margin: 5px 0 15px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            font-size: 16px;
+        }
+        .exchange-container {
+            display: flex;
+            align-items: center;
+        }
+        #exchangeRate {
+            width: calc(100% - 50px);
+            margin-right: 10px;
+        }
+        .refresh-button {
+            background: none;
+            border: none;
+            cursor: pointer;
+            font-size: 20px;
+            color: #007bff;
+        }
+        .refresh-button:hover {
+            color: #0056b3;
+        }
+        button {
+            background-color: #28a745;
+            color: white;
+            border: none;
+            cursor: pointer;
+        }
+        button:hover {
+            background-color: #218838;
+        }
+        .output {
+            font-weight: bold;
+        }
+        .exchange-info {
+            font-size: 0.9em;
+            color: gray;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Currency and Weight Converter</h1>
+        <label for="sourceCurrency">Current currency:</label>
+        <select id="sourceCurrency">
+            <option value="PLN" selected>PLN (Polish Zloty)</option>
+            <option value="CZK">CZK (Czech Koruna)</option>
+            <option value="EUR">EUR (Euro)</option>
+            <option value="TRY">TRY (Turkish Lira)</option>
+            <option value="GBP">GBP (British Pound)</option>
+        </select>
+
+        <label for="targetCurrency">Target currency:</label>
+        <select id="targetCurrency">
+            <option value="EUR" selected>EUR (Euro)</option>
+            <option value="PLN">PLN (Polish Zloty)</option>
+            <option value="CZK">CZK (Czech Koruna)</option>
+            <option value="TRY">TRY (Turkish Lira)</option>
+            <option value="GBP">GBP (British Pound)</option>
+        </select>
+
+        <label id="priceLabel" for="price">Price in current currency:</label>
+        <input type="number" id="price" placeholder="e.g. 10" step="0.01">
+
+        <label for="weight">Weight in grams (optional):</label>
+        <input type="number" id="weight" placeholder="e.g. 200" step="0.01">
+
+        <label for="unitWeight">Unit weight in grams (optional):</label>
+        <input type="number" id="unitWeight" placeholder="e.g. 250" step="0.01">
+
+        <div class="exchange-container">
+            <label for="exchangeRate">Current exchange rate:</label>
+            <input type="text" id="exchangeRate" readonly>
+            <button class="refresh-button" id="refreshRate" title="Update exchange rate">🔄</button>
+        </div>
+        <div class="exchange-info" id="exchangeInfo"></div>
+
+        <button id="calculate">Calculate</button>
+
+        <div class="output" id="output"></div>
+    </div>
+
+    <script>
+        let exchangeRate = 0.22; // Example value
+        let exchangeTimestamp = '';
+
+        // Fetch exchange rate
+        async function fetchExchangeRate() {
+            const sourceCurrency = document.getElementById('sourceCurrency').value;
+            const targetCurrency = document.getElementById('targetCurrency').value;
+
+            try {
+                const response = await fetch(`https://api.exchangerate-api.com/v4/latest/${sourceCurrency}`);
+                const data = await response.json();
+                exchangeRate = data.rates[targetCurrency];
+                exchangeTimestamp = data.time_last_updated
+                    ? new Date(data.time_last_updated * 1000).toLocaleString()
+                    : 'Unknown';
+
+                // Display exchange rate and time
+                document.getElementById('exchangeRate').value = `1 ${sourceCurrency} = ${exchangeRate.toFixed(4)} ${targetCurrency}`;
+                document.getElementById('exchangeInfo').textContent = `Last updated: ${exchangeTimestamp}`;
+            } catch (error) {
+                alert('Error fetching exchange rate.');
+            }
+        }
+
+        // Update exchange rate with refresh button
+        document.getElementById('refreshRate').addEventListener('click', fetchExchangeRate);
+
+        // Update "Price in current currency" label dynamically
+        document.getElementById('sourceCurrency').addEventListener('change', () => {
+            const sourceCurrency = document.getElementById('sourceCurrency').value;
+            document.getElementById('priceLabel').textContent = `Price in ${sourceCurrency}:`;
+            fetchExchangeRate();
+        });
+
+        // Perform calculations
+        document.getElementById('calculate').addEventListener('click', () => {
+            const priceInSource = parseFloat(document.getElementById('price').value);
+            const weightInGrams = parseFloat(document.getElementById('weight').value);
+            const unitWeight = parseFloat(document.getElementById('unitWeight').value);
+
+            if (isNaN(priceInSource) || priceInSource <= 0) {
+                alert('Please enter a valid price.');
+                return;
+            }
+
+            const priceInTarget = priceInSource * exchangeRate;
+            let output = `Price in target currency: ${priceInTarget.toFixed(2)} ${document.getElementById('targetCurrency').value}`;
+
+            // Only calculate weight-based values if weight is provided
+            if (!isNaN(weightInGrams) && weightInGrams > 0) {
+                const pricePerKg = (priceInTarget / weightInGrams) * 1000;
+                output += `<br>Price per kilogram: ${pricePerKg.toFixed(2)} ${document.getElementById('targetCurrency').value}/kg`;
+
+                if (!isNaN(unitWeight) && unitWeight > 0) {
+                    const priceForUnit = (pricePerKg / 1000) * unitWeight;
+                    output += `<br>Price for ${unitWeight}g: ${priceForUnit.toFixed(2)} ${document.getElementById('targetCurrency').value}`;
+                }
+            }
+
+            document.getElementById('output').innerHTML = output;
+        });
+
+        // Fetch exchange rate on page load
+        fetchExchangeRate();
+    </script>
+</body>
+</html>