An HTML madlibs inplimentation for UnkamenSupplies

madlibs.html

<div id="divMadLibs">
    <style>
        #divMadLibs {
            margin: 20px;
        }
        #frmInputs>label,input {
            margin-top: 10px;
            margin-bottom: 10px;
        }
        #divStory {
            margin-top: 10px;
            margin-bottom: 10px;
        }
        #btnReset, #divStory {
            display: none;
        }
        #btnReset {
            margin-top: 10px;
            margin-bottom: 10px;
        }
    </style>

    <h1>Your Story of Rings and Things</h1>
    <form id="frmInputs">
        <label for="input1">Answer to a rumor:</label>
        <input type="text" id="input1" name="input1"><br>

        <label for="input2">Your nickname:</label>
        <input type="text" id="input2" name="input2"><br>

        <label for="input3">A mythical creature you would like to be gifted:</label>
        <input type="text" id="input3" name="input3"><br>

        <label for="input4">An exotic Location you would like to travel to:</label>
        <input type="text" id="input4" name="input4"><br>

        <label for="input5">A battle cry:</label>
        <input type="text" id="input5" name="input5"><br>

        <label for="input6">Your favorite dragon:</label>
        <input type="text" id="input6" name="input6"><br>

        <label for="input7">Pick one:</label>
        <select id="input7" name="input7">
            <option value="magical weapon">Magical weapon</option>
            <option value="protective spell">Protective spell</option>
        </select><br>

        <label for="input8">What you are fighting for:</label>
        <input type="text" id="input8" name="input8"><br>

        <label for="input9">A magical tool you would like:</label>
        <input type="text" id="input9" name="input9"><br>

        <label for="input10">A fictional character you would like to be friends with:</label>
        <input type="text" id="input10" name="input10"><br>
    </form>

    <p id="divStory">

    </p>

    <br>

    <button id="btnSubmit" onclick="madLibber();">Build Story</button>
    <button id="btnReset" onclick="reset();">Reset Story</button>

    <script>
        function madLibber() {
            // Get all the elements
            var form = document.getElementById("frmInputs");
            var input1 = document.getElementById("input1");
            var input2 = document.getElementById("input2");
            var btnSubmit = document.getElementById("btnSubmit");
            var btnReset = document.getElementById("btnReset");
            var divStory = document.getElementById("divStory");

            // The story
            var story = "You, (2), are traveling with (10) to (4) to do a favor for a dragon. \
                With your trusty (9) at your belt and a (7) close to hand, you are ready for anything that should come your way during your travels. \
                When you arrive in (4), you meet (6). \
                They tell you (1), the answer to the rumor you have been wondering about so much. While at the dragons lair, a messenger tells you that you are needed urgently back home to fight for (8).\
                Before you leave, (6) gives you a (3), cautioning that while it is a pleasant creature, it has a tendency to shout (5) at the top of its lungs when hungry.";
            var yourStory = story;

            // Hide the form, show the story, and change the button out
            form.style.display = "none";
            divStory.style.display = "inline";
            btnSubmit.style.display = "none";
            btnReset.style.display = "block";

            // Build the story with replaced words and display it
            for (var i = 0; i < form.elements.length; i++) {
                var word = "(" + String(i+1) + ")";
                var rWord = form.elements[i].value;
                var yourStory = yourStory.split(word).join(rWord);
                divStory.innerHTML = yourStory;
            }

        }
        function reset() {
            // Get all the elements
            form = document.getElementById("frmInputs");
            btnSubmit = document.getElementById("btnSubmit");
            btnReset = document.getElementById("btnReset");
            divStory = document.getElementById("divStory");

            // Hide the story and change the button out
            form.style.display = "inline";
            divStory.style.display = "none";
            btnSubmit.style.display = "block";
            btnReset.style.display = "none";

            // Reset the story
            divStory.innerHTML = "";
        }
    </script>
</div>