JSFiddle - React, Tailwind, and code Playground

by Matt Hopkins

HTML

<div id="main">
    <form name="MadLibForm">
        <table>
            <tr>
                <th colspan="2">wEiRd Mad Lib</th>
            </tr>
            <tr>
                <td>Your Name</td>
                <td>
                    <input type="text" name="name" class="inputs"/>
                </td>
            </tr>
            <tr>
                <td>Object</td>
                <td>
                    <input type="text" name="object" class="inputs"/>
                </td>
            </tr>
            <tr>
                <td>Another Object</td>
                <td>
                    <input type="text" name="objecttwo" class="inputs"/>
                </td>
            </tr>
            <tr>
                <td>Place</td>
                <td>
                    <input type="text" name="place" class="inputs"/>
                </td>
            </tr>
            <tr>
                <td>Verb</td>
                <td>
                    <input type="text" name="verb" class="inputs" placeholder="related to the object"/>
                </td>
            </tr>
            <tr>
                <td>Adjective</td>
                <td>
                    <input type="text" name="adjective" class="inputs"/>
                </td>
            </tr>
            <tr>
                <td>Adverb</td>
                <td>
                    <input type="text" name="adverb" class="inputs"/>
                </td>
            </tr>
            <tr>
                <td>Mood</td>
                <td>
                    <input type="text" name="mood" class="inputs"/>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="radio" name="gender" id="male" value="Male"/>Male
                </td>
            </tr>
            <tr>
                <td>
                    <input type="radio" name="gender" id="female" value="Female"/>Female
                </td>
            </tr>
            <tr>
                <td>
...

JavaScript

function madLib() {
    var name, object, objectTwo, adjective, adverb, verb, place, mood, genderHisHer, genderHeShe, genderHimHer, genderHeSheCaps, buildingStructure;
    name = document.MadLibForm.name.value;
    object = document.MadLibForm.object.value;
    objectTwo = document.MadLibForm.objecttwo.value;
    adjective = document.MadLibForm.adjective.value;
    adverb = document.MadLibForm.adverb.value;
    verb = document.MadLibForm.verb.value;
    place = document.MadLibForm.place.value;
    mood = document.MadLibForm.mood.value;

    if (document.getElementById('male').checked) {
        genderHisHer = "his";
        genderHeShe = "he";
        genderHimHer = "him";
        genderHeSheCaps = "He";
    } else if (document.getElementById('female').checked) {
        genderHisHer = "her";
        genderHeShe = "she";
        genderHimHer = "her";
        genderHeSheCaps = "She";
    }

    buildingStructure = name + " went to " + place + " after a long time. " + name + " loved " + place + " because it was " + genderHisHer + " favorite place when " + genderHeShe + " was a kid. " + name + " took the " + adjective + " " + object + " with " + genderHimHer + " to the " + place + ", which " + genderHeShe + " used to it " + adverb + " " + verb + ". " + genderHeSheCaps + " also took " + objectTwo + " with " + genderHimHer + ", but did not use it at all during the visit. Still, at the end of the visit, " + genderHeShe + " was very " + mood + " .";

    document.MadLibForm.displayFullMadLib.value = buildingStructure;
}