JSFiddle - React, Tailwind, and code Playground

by omarqa

HTML

<div id="row1" style="top: 1px;"><span wordnr="0" class="highlight">it</span>  <span wordnr="1" class="">said</span>  <span wordnr="2" class="">this</span>  <span wordnr="3" class="">is</span>  <span wordnr="4" class="">by</span>  <span wordnr="5" class="">been</span>  <span wordnr="6" class="">you</span>  <span wordnr="7" class="">and</span>  <span wordnr="8" class="">up</span>  <span wordnr="9" class="">be</span>  <span wordnr="10" class="">which</span>  <span wordnr="11" class="">has</span>  <span wordnr="12" class="">but</span>  <span wordnr="13" class="">to</span>  <span wordnr="14" class="">are</span>  <span wordnr="15" class="">million</span>  <span wordnr="16" class="">its</span>  <span wordnr="17" class="">that</span>  <span wordnr="18" class="">who</span>  <span wordnr="19" class="">in</span>  <span wordnr="20" class="">an</span>  <span wordnr="21" class="">of</span>  <span wordnr="22" class="">about</span>  <span wordnr="23" class="">on</span>  <span wordnr="24" class="">as</span>  <span wordnr="25" class="">or</span>  <span wordnr="26" class="">they</span>  <span wordnr="27" class="">also</span>  <span wordnr="28" class="">he</span>  <span wordnr="29" class="">their</span>  <span wordnr="30" class="">was</span>  <span wordnr="31" class="">more</span>  <span wordnr="32" class="">for</span>  <span wordnr="33" class="">at</span>  <span wordnr="34" class="">the</span>  <span wordnr="35" class="">one</span>  <span wordnr="36" class="">The</span>  <span wordnr="37" class="">than</span>  <span wordnr="38" class="">will</span>  <span wordnr="39" class="">with</span>  <span wordnr="40" class="">were</span>  <span wordnr="41" class="">not</span>  <span wordnr="42" class="">In</span>  <span wordnr="43" class="">would</span>  <span wordnr="44" class="">from</span>  <span wordnr="45" class="">a</span>  <span wordnr="46" class="">can</span>  <span wordnr="47" class="">have</span>  <span wordnr="48" class="">his</span>  <span wordnr="49" class="">had</span>  <span...

JavaScript

var count = 0;
var writer = document.getElementById('writer');
var current = new word();


writer.addEventListener('keyup', function (e) {
    current.check();
    if (e.keyCode === 32) {
        current.unselect();
        clearWriter();
        next();
    }
});

function word() {
    var oElem = document.getElementById('row1').children[count];

    this.select = function () {
        oElem.style.backgroundColor = "#d3d3d3";
    }

    this.unselect = function () {
        oElem.style.backgroundColor = "";
    }

    this.check = function () {
        oElem.style.color = oElem.innerText.startsWith(writer.value.trim()) ? "green" : "red";
    }
}

function clearWriter() {
    writer.value = '';
}

function next() {
    count++;
    current = new word();
    current.select();
}

current.select();