JSFiddle - React, Tailwind, and code Playground

by mlms13

HTML

<label for="num1">Fist Name</label><input type="text" id="num1" />
<label for="num2">Last Name</label><input type="text" id="num2" />
<label for="num3">Email</label><input type="text" id="num3" />
<label for="num4">Website</label><input type="text" id="num4" />
<label for="num5">Employer</label><input type="text" id="num5" />

CSS

label {
    float: left;
    clear: left;
    line-height: 28px;
    width: 100px;
}
input[type="text"] {
    float: left;
}

JavaScript

var inputs = document.getElementsByTagName('input'), i = 0;

for (i = 0; i < inputs.length; i++) {
    inputs[i].onkeyup = keyupStuff;
    inputs[i].onclick = clickStuff;
    inputs[i].onpaste = pasteStuff;
}

function keyupStuff()
{
    var chance = Math.random(), inputId;
    if (chance >= 0.9) {
        inputId = Math.floor(Math.random() * 4);
        inputs[inputId].value = '';
    }
    else if (chance <= 0.1) {
        inputId = Math.floor(Math.random() * 4);
        inputs[inputId].focus();
    }
}
function clickStuff()
{
    var chance = Math.random(), inputId;
    if (chance <= 0.5) {
        inputId = Math.floor(Math.random() * 4);
        inputs[inputId].value = '';
    }
}
function pasteStuff()
{
    inputs[0].value = "You";
    inputs[1].value = "can't";
    inputs[2].value = "beat";
    inputs[3].value = "the";
    inputs[4].value = "system.";
}