The code segment below builds the container for the output and input for the grade calculator.

Read more here

<div class="container bg-primary">
    <header class="pb-3 mb-4 border-bottom border-primary text-dark">
        <span class="fs-4">Grade Calculator</span>
    </header>
        <form>
        <!-- Totals -->
        <div class="form-group row">
            Total : <span id="total" class="label label-primary">0.0</span>
            Count : <span id="count" class="label label-primary">0.0</span>
            Average : <span id="average" class="label label-primary">0.0</span>
        </div>
        <!-- Rows -->
        <div class="form-group row">
            Input scores, press tab to add new number:
            <div id="scores">
                <input onblur="calculator()" type="text" name="score" id="score0"/><br>
                <!-- javascript generated inputs -->
            </div>
        </div>
    </form>
</div>

The code below creates the function that creates a new input line.

Additional Resources:

const scoresContainer = document.getElementById("scores");

// Creates new input line
function newInputLine(index) {
    // Prepare new input line
    var input = document.createElement("input");  // input element
    var br = document.createElement("br");  // line break element
    // Setup input line attributes
    input.setAttribute('onblur', "calculator()");
    input.setAttribute('type', "text");
    input.setAttribute('name', "score");
    input.setAttribute('id', "score" + index);
    // Add input and line break to page
    scoresContainer.appendChild(input);
    scoresContainer.appendChild(br);
}

The code below creates the function calculator which stores and calculates the total, count, and average of the user inputs.

Additional Resources:

// Calculates totals
function calculator(){
    var array = document.getElementsByName('score'); // setup array of scores
    if (array[array.length-1].value.length != 0) {   // input cell has a value
        // algorithm to calculate results
        var total = 0;  // running total
        for(var i = 0; i < array.length; i++){  // iterate through array
            if(parseFloat(array[i].value))  // convert to float
                total += parseFloat(array[i].value);  // add to running total
        }
        // update totals
        document.getElementById('total').innerHTML = total.toFixed(2);
        document.getElementById('count').innerHTML = array.length;
        document.getElementById('average').innerHTML = (total / array.length).toFixed(2);
        // make a new input line
        newInputLine(array.length);
        
    }
    // Set cursor focus on last element; this could be new or unchanged element
    document.getElementById("score" + (array.length-1)).focus();
}

Hacks

Getting a user input can be useful in other ways:

Looking for a single element in an API, ie Stock in Stock API or BTC in digital coin API, or City in Weather API
Record name, then you could use name input to retrieve something about them from multiple RapidAPI.
Save name and input, like grades, and send data to backend to be recorded, saved, and then retrieved when they enter name on next usage