natalejoy Goto Github PK

<div class="container">
    <form action="#" method="post">
        <h2>Milktea Island Order Form</h2>

        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>

        <label for="Flavor">Flavor:</label>
        <select id="Flavor" name="Flavor" required>
            <option value="black">Black Tea</option>
            <option value="green">Green Tea</option>
            <option value="dark">Dark Choco</option>
            <option value="red">Red Velvet</option>
            <option value="matcha">Matcha</option>
            <option value="mango">Mango Cheese Cake</option>
        </select>

        <label for="quantity">Quantity:</label>
        <input type="number" id="quantity" name="quantity" min="1" value="1" required>

        <label for="sweetness">Sweetness Level:</label>
        <input type="range" id="sweetness" name="sweetness" min="0" max="100" step="10" value="50">
        <output for="sweetness" id="sweetnessValue">50</output>

        <label for="totalPrice">Total Price:</label>
        <input type="text" id="totalPrice" name="totalPrice" readonly>

        <input type="submit" value="Place Order">
    </form>
</div>

<script>
    document.getElementById('sweetness').addEventListener('input', function () {
        document.getElementById('sweetnessValue').textContent = this.value;
        updateTotalPrice();
    });

    document.getElementById('quantity').addEventListener('input', function () {
        updateTotalPrice();
    });

    function updateTotalPrice() {
        const quantity = document.getElementById('quantity').value;
        const sweetness = document.getElementById('sweetness').value;
        const unitPrice = calculateUnitPrice();
        const totalPrice = quantity * unitPrice;
        document.getElementById('totalPrice').value = totalPrice.toFixed(2);
    }

    function calculateUnitPrice() {
        // You can add logic to calculate the unit price based on tea type or other factors
        // For simplicity, let's use a fixed unit price here
        return 45;
    }

    // Initial update when the page loads
    updateTotalPrice();
</script>