JSFiddle - React, Tailwind, and code Playground

by shapeshifta

HTML

<p>Fortschritt: <span id="progress">0</span>%</p>
<p>
    <input type="text" placeholder="Vorname" name="first" />
</p>
<p>
    <input type="text" placeholder="Nachname" name="last" />
</p>
<p>
    <input type="text" placeholder="E-Mail" name="email" />
</p>
<div id="thanks"></div>

CSS

body {
    font-family: Helvetica, Arial, sans-serif;
    padding:10px;
}
input[type=text] {
    padding:4px;
}
p {
    margin-bottom:5px
}
#thanks {
    display:none;
}

JavaScript

var userProgress = $.Deferred(),
    profileFields = $("input"),
    totalFields = profileFields.length;

userProgress.progress(function (filledFields) {
    var pctComplete = (filledFields / totalFields) * 100;
    $("#progress").html(pctComplete.toFixed(0));
});

userProgress.done(function () {
    $("#thanks").html("Danke für's ausfüllen!").show();
});

$("input").on("change", function () {
    var filledFields = profileFields.filter("[value!='']").length;
    userProgress.notify(filledFields);
    if (filledFields === totalFields) {
        userProgress.resolve();
    }
});