test/test2.html

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Marks Calculator</title>
    </head>

    <body>
        <form>
            <label>Subject 1: <input type="number" id="sub1"></label><br>
            <label>Subject 2: <input type="number" id="sub2"></label><br>
            <label>Subject 3: <input type="number" id="sub3"></label><br>
            <label>Subject 4: <input type="number" id="sub4"></label><br>
            <label>Subject 5: <input type="number" id="sub5"></label><br>
            <button type="button" onclick="calculate()">Calculate</button>
        </form>
        <p>Total: <span id="total"></span></p>
        <p>Percentage: <span id="percentage"></span>%</p>

        <script>
            function calculate() {
                // Get marks from input fields
                let marks = [];
                for (let i = 1; i <= 5; i++) {
                    marks.push(+document.getElementById(`sub${i}`).value || 0);
                }

                // Calculate total and percentage
                let total = marks.reduce((sum, mark) => sum + mark, 0);
                let percentage = (total / (marks.length * 100)) * 100;

                // Update DOM with results
                document.getElementById('total').textContent = total;
                document.getElementById('percentage').textContent = percentage.toFixed(2);
            }
        </script>
    </body>

</html>