%%html

<!-- Help Message -->
<h3>Input scores, press tab to add each new number.</h3>
<!-- Totals -->
<ul>
<li>
    Total : <span id="total">0.0</span>
    Count : <span id="count">0.0</span>
    Average : <span id="average">0.0</span>
</li>
</ul>
<!-- Rows added using scores ID -->
<div id="scores">
    <!-- javascript generated inputs -->
</div>

<script>
// Executes on input event and calculates totals
function calculator(event) {
    var key = event.key;
    // Check if the pressed key is the "Tab" key (key code 9) or "Enter" key (key code 13)
    if (key === "Tab" || key === "Enter") { 
        event.preventDefault(); // Prevent default behavior (tabbing to the next element)
   
        var array = document.getElementsByName('score'); // setup array of scores
        var total = 0;  // running total
        var count = 0;  // count of input elements with valid values

        for (var i = 0; i < array.length; i++) {  // iterate through array
            var value = array[i].value;
            if (parseFloat(value)) {
                var parsedValue = parseFloat(value);
                total += parsedValue;  // add to running total
                count++;
            }
        }

        // update totals
        document.getElementById('total').innerHTML = total.toFixed(2); // show two decimals
        document.getElementById('count').innerHTML = count;

        if (count > 0) {
            document.getElementById('average').innerHTML = (total / count).toFixed(2);
        } else {
            document.getElementById('average').innerHTML = "0.0";
        }

        // adds newInputLine, only if all array values satisfy parseFloat 
        if (count === document.getElementsByName('score').length) {
            newInputLine(count); // make a new input line
        }
    }
}

// Creates a new input box
function newInputLine(index) {

    // Add a label for each score element
    var title = document.createElement('label');
    title.htmlFor = index;
    title.innerHTML = index + ". ";    
    document.getElementById("scores").appendChild(title); // add to HTML

    // Setup score element and attributes
    var score = document.createElement("input"); // input element
    score.id =  index;  // id of input element
    score.onkeydown = calculator // Each key triggers event (using function as a value)
    score.type = "number"; // Use text type to allow typing multiple characters
    score.name = "score";  // name is used to group all "score" elements (array)
    score.style.textAlign = "right";
    score.style.width = "5em";
    document.getElementById("scores").appendChild(score);  // add to HTML

    // Create and add blank line after input box
    var br = document.createElement("br");  // line break element
    document.getElementById("scores").appendChild(br); // add to HTML

    // Set focus on the new input line
    document.getElementById(index).focus();
}

// Creates 1st input box on Window load
newInputLine(0);

</script>

Input scores, press tab to add each new number.

Total : 0.0 Count : 0.0 Average : 0.0

%%html


<html lang="en-US">
<head>
    <meta charset="utf-8"
    <title>Grade Calculator</title>
</head>
<body>
<h1>Grade Calculator</h1>
<table>
    <tr>
        <th>Value 1</th>
        <th>Value 2</th>
        <th>Average</th>
    </tr>
    <tr>
        <td><input type="number" id="value1" step="0.01"></td>
        <td><input type="number" id="value2" step="0.01"></td>
        <td><span id="average">-</span></td>
    </tr>
</table>

<button id="calculateButton">Calculate</button>

<script>
    // Get references to the input elements and the average span
    const value1Input = document.getElementById("value1");
    const value2Input = document.getElementById("value2");
    const averageSpan = document.getElementById("average");
    const calculateButton = document.getElementById("calculateButton");

    //Add an event listener to both input elements to calculate the average
    value1Input.addEventListener("input", calculateAverage);
    value2Input.addEventListener("input", calculateAverage);

    // Add a click event listener to the Calculate button
    calculateButton.addEventListener("click", calculateAverage);

    // Function to calculate and display the average
    function calculateAverage() {
        console.log("Button Clicked"); //Add this line for debugging
        const value1 = parseFloat(value1Input.value);
        const value2 = parseFloat(value2Input.value);

        if (!isNaN(value1) && !isNaN(value2)) {
            const average = (value1 + value2) / 2;
            console.log("Average Calculated: " + average.toFuxed*(2)); // For Debugging
            averageSpan.textContent = average.toFixed(2); // Display average with 2 decimal places
        } else {
            averageSpan.textContent = "-"; // Display a dash if input is invalid
        }
    }
    </script>
</body>
</html>

Grade Calculator

Value 1	Value 2	Average
		-