Form Percentage Complete Calculator

A simple form completion calculator.

by Ian Hazzard

HTML

<form name="contact">
    <input type="text" onblur="updateCompletion()" />
    <br/>
    <input type="text" onblur="updateCompletion()" />
    <br/>
    <input type="text" onblur="updateCompletion()" />
    <br/>
    <input type="text" onblur="updateCompletion()" />
    <br/>
    <input type="text" onblur="updateCompletion()" />
    <br/>
</form>
<div id="container">
    <div id="fill"></div>
</div>

CSS

input[type=text] {
    border: none;
    outline: none;
    border-bottom: 2px solid blue;
    border-radius: 5px;
    text-align: center;
}
#container {
    position: relative;
    overflow: hidden;
    width: 50px;
    height: 50px;
    border-radius: 29px;
    border: 4px solid gray;
}
#fill {
    width: 100%;
    position: absolute;
    bottom: 0;
    background: green;
    transition: height 1s;
}

JavaScript

document.getElementById('fill').style.height = "0";

function updateCompletion() {

    var completed = [];

    for (i = 0; i < document.forms['contact'].elements.length; i++) {

        if (document.forms['contact'].elements[i].value !== "") {

            completed[completed.length] = document.forms['contact'].elements[i];

        };

    }

    var percent = ((completed.length / document.forms['contact'].elements.length) * 100) + "%";

    document.getElementById('fill').style.height = percent;

}