JSFiddle - React, Tailwind, and code Playground

by hiteshsharma

HTML

<script src="https://rawgit.com/hiteshsharma/howcomplete.js/master/js/howcomplete.js"></script>
<div class="message">Start filling fields below</div>
<div>
    <input id="input1" />
</div>
<br/>
<div>
    <input id="input2" />
</div>
<br/>
<div>
    <textarea id="textarea1"></textarea>
</div>
<br/>
<div>
    <label for="disablecheck">Disable</label>
    <input type="checkbox" id="disablecheck" />
</div>
<div class="wrapper">
    <div class="completion-indicator"></div>
</div>
<div class="current-completion">
</div>

CSS

#textarea1 {
    height: 100px;
    width: 300px;
}
body {
    font-family:'Helvetica';
}
.wrapper {
    height: 10px;
    border: 1px solid black;
    border-radius: 8px;
    margin-top: 15px;
    padding: 3px;
}
.completion-indicator {
    width: 0%;
    background-color: black;
    height: 100%;
    border-radius: 5px;
}
.completion-indicator.red {
    background-color: #f04124;
}
.completion-indicator.blue {
    background-color: #128ece;
}
.completion-indicator.green {
    background-color: #43AC6A;
}

JavaScript

$(document).ready(function () {
    $(".completion-indicator").howcomplete({
        elements: [{
            element: $("#input1"),
            weight: 0.2,
            evaluate: function (data) {
                var wordCount = data.words.length;
                return (wordCount > 4 ? 4 : wordCount) / 4;
            },
            defaultData: 0.1
        }, {
            element: $("#input2"),
            weight: 0.4,
            evaluate: function (data) {
                return data.value ? 1 : 0;
            }
        }, {
            element: $("#textarea1"),
            weight: 0.4,
            evaluate: function (data) {
                var wordCount = data.words.length;
                var weight = Math.floor(wordCount / 5) / 4;
                return weight > 1 ? 1 : weight;
            },
            calculateOn: 'keydown'
        }],
        calculateOn: 'keyup change paste',
        evaluateOnInit: true,
        togglePoints: [{
            between: [0, 0.25],
            classname: "red"
        }, {
            between: [0.25, 0.5],
            classname: "blue"
        }, {
            between: [0.5, 1],
            classname: "green"
        }],
        onchange: function (value) {
            var percentCompletion = value * 100 + '%';
            $(this).stop(true).animate({
                width: percentCompletion
            });
            $(".current-completion").text(percentCompletion);
        }
    });

    $("#disablecheck").change(function () {
        var el = $(this);
        var indicator = $(".completion-indicator");
        if ($(this).prop("checked")) {
            indicator.howcomplete("disable", function () {
                $(this).stop(true).animate({
                    width: 0
                });
            });
        } else {
            indicator.howcomplete("enable");
        }
    });
});