JSFiddle - React, Tailwind, and code Playground

by Skooljester

HTML

<section> 
<button id="show" disabled="disabled">Show Answers</button>
<button id="submit">Submit Answers</button>
<p>Please change all umlauts to the letter followed by an "e" and all ßs to "ss".</p>
<p>If a verb can have both ist and hat as an auxiliary, please list it as "ist/hat" in the input.</p>
</section>

CSS

table {
    margin-bottom:20px;
}
td input {
    width:50px;
}
.wrong {
    background:#FF0000;
    color:#FFFFFF;
}

JavaScript

var verbMap1 = [
    {
        infinitive: "gehen",
        thirdPres: "geht",
        thirdPast: "ging",
        aux: "ist",
        pastPart: "gegangen",
        english: "go"
    },
    {
        infinitive: "gelingen",
        thirdPres: "gelingt",
        thirdPast: "gelang",
        aux: "ist",
        pastPart: "gelungen",
        english: "succeed"
    },
    {
        infinitive: "gelten",
        thirdPres: "gilt",
        thirdPast: "galt",
        aux: "hat",
        pastPart: "gegolten",
        english: "be valid"
    },
    {
        infinitive: "geniessen",
        thirdPres: "geniesst",
        thirdPast: "genoss",
        aux: "hat",
        pastPart: "genossen",
        english: "enjoy"
    },
    {
        infinitive: "geschehen",
        thirdPres: "geschieht",
        thirdPast: "geschah",
        aux: "ist",
        pastPart: "geschehen",
        english: "happen"
    },
    {
        infinitive: "gewinnen",
        thirdPres: "gewinnt",
        thirdPast: "gewann",
        aux: "hat",
        pastPart: "gewonnen",
        english: "win"
    },
    {
        infinitive: "graben",
        thirdPres: "graebt",
        thirdPast: "grub",
        aux: "hat",
        pastPart: "gegraben",
        english: "dig"
    },
    {
        infinitive: "halten",
        thirdPres: "haelt",
        thirdPast: "hielt",
        aux: "hat",
        pastPart: "gehalten",
        english: "stop"
    },
    {
        infinitive: "haengen",
        thirdPres: "haengt",
        thirdPast: "hing",
        aux: "hat",
        pastPart: "gehangen",
        english: "hang"
    },
    {
        infinitive: "heben",
        thirdPres: "hebt",
        thirdPast: "hob",
        aux: "hat",
        pastPart: "gehoben",
        english: "raise"
    },
    {
        infinitive: "heissen",
        thirdPres: "heisst",
        thirdPast: "hiess",
        aux: "hat",
        pastPart: "geheissen",
        english: "be called"
    },
    {
        infinitive: "helfen",
       ...