<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Savings Goal Calculator</title>
    <style>
        .calculator {
            max-width: 400px;
            margin: 50px auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-family: Arial, sans-serif;
        }
        h1 {
            text-align: center;
            font-size: 24px;
        }
        label {
            display: block;
            margin-top: 10px;
            font-weight: bold;
        }
        .input-group {
            display: flex;
            align-items: center;
            margin-top: 5px;
        }
        .currency-symbol {
            padding: 8px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            border-right: none;
            border-radius: 5px 0 0 5px;
        }
        input, select {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }
        input {
            border-radius: 0 5px 5px 0;
        }
        select {
            margin-top: 5px;
        }
        button {
            margin-top: 20px;
            padding: 10px;
            width: 100%;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        #result {
            margin-top: 20px;
            font-weight: bold;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <h1>Savings Goal Calculator</h1>
        <label for="currency">Currency:</label>
        <select id="currency">
            <option value="USD" data-symbol="$">USD ($)</option>
            <option value="EUR" data-symbol="€">EUR (€)</option>
            <option value="GBP" data-symbol="£">GBP (£)</option>
        </select>
        <label for="target">Target Price:</label>
        <div class="input-group">
            <span class="currency-symbol" id="target-symbol">$</span>
            <input type="number" id="target" step="0.01" min="0.01" placeholder="e.g., 1000">
        </div>
        <label for="amount">Amount to Save Each Time:</label>
        <div class="input-group">
            <span class="currency-symbol" id="amount-symbol">$</span>
            <input type="number" id="amount" step="0.01" min="0.01" placeholder="e.g., 50">
        </div>
        <label for="style">Saving Style:</label>
        <select id="style">
            <option value="daily">Daily</option>
            <option value="weekly">Weekly</option>
            <option value="monthly">Monthly</option>
        </select>
        <button id="calculate">Calculate</button>
        <div id="result"></div>
    </div>
    <script>
        // Get DOM elements
        const currencySelect = document.getElementById('currency');
        const targetSymbol = document.getElementById('target-symbol');
        const amountSymbol = document.getElementById('amount-symbol');
        const targetInput = document.getElementById('target');
        const amountInput = document.getElementById('amount');
        const styleSelect = document.getElementById('style');
        const calculateButton = document.getElementById('calculate');
        const resultDiv = document.getElementById('result');

// Update currency symbols when currency changes
        currencySelect.addEventListener('change', updateCurrencySymbols);
        function updateCurrencySymbols() {
            const selectedOption = currencySelect.options[currencySelect.selectedIndex];
            const symbol = selectedOption.getAttribute('data-symbol');
            targetSymbol.textContent = symbol;
            amountSymbol.textContent = symbol;
        }

// Initialize symbols on page load
        updateCurrencySymbols();

// Add event listener to the button
        calculateButton.addEventListener('click', calculateTime);

// Function to calculate the time to reach the savings goal
        function calculateTime() {
            // Parse input values
            const target = parseFloat(targetInput.value);
            const amount = parseFloat(amountInput.value);
            const style = styleSelect.value;
            const currencySymbol = targetSymbol.textContent;

// Input validation
            if (isNaN(target) || target <= 0) {
                resultDiv.textContent = 'Please enter a valid target price greater than zero.';
                return;
            }
            if (isNaN(amount) || amount <= 0) {
                resultDiv.textContent = 'Please enter a valid amount to save greater than zero.';
                return;
            }

// Calculate the number of intervals (round up)
            const intervals = Math.ceil(target / amount);

// Determine the time unit based on saving style
            const unit = getUnitString(style, intervals);

// Display the result with currency symbol
            resultDiv.textContent = `It will take approximately ${intervals} ${unit} to reach your savings goal of ${currencySymbol}${target.toFixed(2)}.`;
        }

// Function to get the correct unit string (singular or plural)
        function getUnitString(style, intervals) {
            if (style === 'daily') {
                return intervals === 1 ? 'day' : 'days';
            } else if (style === 'weekly') {
                return intervals === 1 ? 'week' : 'weeks';
            } else if (style === 'monthly') {
                return intervals === 1 ? 'month' : 'months';
            }
            return 'intervals'; // Fallback, though not expected
        }
    </script>
</body>
</html>

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground