HTML

Identify the HTML for a grade calculator; it enables input and totals.

DIV element defines a division or a section in an HTML document. Used to divide headings, totals, and input in this example.
SPAN element defines a inline container within text. Used to capture different totals in this example.
INPUT tag specifies an input field where the user can enter data. Used to capture series of numbers in this example.
ID attributes are used by CSS for style and JavaScript for reference. Used to update totals in this example.

Resources HTML

JavaScript newInputLine

Identify the function that generates a new input line after each score is entered.

Resources createElement

JavaScript calculator

Indentify the code below calculates the the total, count, and average of the user inputs.

Resources getElements

HTML Magic runs Calculator

The code below runs in VSCode and on Jupyter Notebook.

SCRIPT tag is used to embed JavaScript inside of HTML

Explanation of code:

User Interface:

It creates a simple web page with a heading, instructions, and a section for input. Input Handling:

Users can input scores into input boxes. Pressing the “Tab” key or “Enter” key after entering a score triggers an event. Event Handling:

The calculator function is called when the “Tab” or “Enter” key is pressed in an input box. It calculates the following: The total of all valid scores. The count of valid scores. The average of valid scores (if there are valid scores). It then updates the displayed total, count, and average. Input Generation:

The newInputLine function is responsible for creating new input boxes. Each input box is labeled with an index number. The function is initially called to create the first input box on page load. User Interaction:

Users can keep entering scores, and each time they press “Tab” or “Enter,” a new input box is generated if all previous input boxes contain valid scores.

<!-- Heading -->
<h1>Grade Calculator</h1>
<h2>Input scores, press tab to add each new number.</h2>
<!-- Totals -->
<h3>
    Total : <span id="total">0.0</span>
    Count : <span id="count">0.0</span>
    Average : <span id="average">0.0</span>
</h3>
<!-- Rows -->
<div id="scores">
    <!-- javascript generated inputs -->
</div>

<script>
// Function to create 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 "score" elements
    score.style.textAlign = "right";
    score.style.width = "5em";
    document.getElementById("scores").appendChild(score);  // add to HTML

    // Create and add a blank line after the 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();
}

// Handles events 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 an 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 the array
            var value = array[i].value;
            if (parseFloat(value)) {
                var parsedValue = parseFloat(value);
                total += parsedValue;  // add to the running total
                count++;
            }
        }

        // update totals
        document.getElementById('total').innerHTML = total.toFixed(2); // display with two decimal places
        document.getElementById('count').innerHTML = count;

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

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

// Creates the first input box on Window load
newInputLine(0);

</script>

JS Input • 12 min read

Description