Javascript Inputs using a Grade Calculator

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:

• Create Element
• Set Attribute

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:

• Get Elements by ID
• Get Elements by Name

// 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