JSFiddle - React, Tailwind, and code Playground

by rbrousla

HTML

<!-- We are creating a simple user interface for a MadLibs type of game -->
<!-- First we need to create the list of words we will swap into our story -->
<!-- Then we need to create a button which will run our swap function -->
<!-- Lastly, we need a place for our story to appear on the UI -->

<div id="swapList">
    <ul>
        <li><input type="text" id="noun1" /><br>Noun</li>
        <li><input type="text" id="adjective1" /><br>Adjective</li>
        <li><input type="text" id="verb1" /><br>Verb</li>
        <li><input type="text" id="adverb1" /><br>Adverb</li>
        <li><input type="text" id="noun2" /><br>Noun</li>
        <li><input type="text" id="adjective2" /><br>Adjective</li>
        <li><input type="text" id="pluralNoun1" /><br>Plural Noun</li>
        <li><input type="text" id="pluralNoun2" /><br>Plural Noun</li>  
        <li><input type="text" id="pluralNoun3" /><br>Plural Noun</li>
        <li><input type="text" id="bodyPart1" /><br>Part Of The Body</li> 
        <li><input type="text" id="noun3" /><br>Noun</li>
        <li><input type="text" id="noun4" /><br>Noun</li>
        <li><input type="text" id="noun5" /><br>Noun</li>
        <li><input type="text" id="noun6" /><br>Noun</li>
        <li><input type="text" id="bodyPart2" /><br>Part Of The Body</li>
    </ul>
    <div id="buttonDiv">
        <button id="swapButton">Swap In Words!</button>
    </div>
</div>

<div id="story"></div>

CSS

/* Create CSS selectors that hook into the unique id's or classes in the HTML */

body {
    font-family: Impact, Charcoal, fantasy;
}

#swapList {
    float:left;
    width: 50%;
}

ul {
    list-style-type: square; 
    margin: 2px;
}

li {
    line-height: 200%;
    margin-top: 10px;
}

input[type=text] {
    border-width: 0 0 1px 0;
    border-color: #333;
    color: red;
    font-size: 12pt;
}

#buttonDiv {
    text-align: center;
}

#swapButton {
    margin-top: 30px;
    width: 200px;
}

#story {
    margin-top: 12px;
    width: 45%;
    border: 1px dashed blue;
    padding: 8px;
    float: left;
}

.replacement {
    text-decoration: underline;
    color: DarkRed;
}

JavaScript

/* This is the JavaScript for our simple MadLibs type game.
Step 1 - Create a hook to the button in the UI and add an event listener
which waits for a click event.
Step 2 - Create a function which is called swapWords(), which will insert
the words from our swap list into the story.
Step 3 - Make the updated story display in the UI. */ 

// Hook JavaScript into the UI button
var swapButton = document.getElementById("swapButton");
swapButton.addEventListener("click",swapWords);

// Create a function which will swap words into specific places in our story
// Then display the updated story in the UI
function swapWords() {
    var noun1 = "<span class='replacement'>" + document.getElementById("noun1").value + "</span>";
    var adjective1 = "<span class='replacement'>" + document.getElementById("adjective1").value + "</span>";
    var verb1 = "<span class='replacement'>" + document.getElementById("verb1").value + "</span>";
    var adverb1 = "<span class='replacement'>" + document.getElementById("adverb1").value + "</span>";
    var noun2 = "<span class='replacement'>" + document.getElementById("noun2").value + "</span>";
    var adjective2 = "<span class='replacement'>" + document.getElementById("adjective2").value + "</span>";
    var pluralNoun1 = "<span class='replacement'>" + document.getElementById("pluralNoun1").value + "</span>";
    var pluralNoun2 = "<span class='replacement'>" + document.getElementById("pluralNoun2").value + "</span>";
    var pluralNoun3 = "<span class='replacement'>" + document.getElementById("pluralNoun3").value + "</span>";
    var bodyPart1 = "<span class='replacement'>" + document.getElementById("bodyPart1").value + "</span>";
    var noun3 = "<span class='replacement'>" + document.getElementById("noun3").value + "</span>";
    var noun4 = "<span class='replacement'>" + document.getElementById("noun4").value + "</span>";
    var noun5 = "<span class='replacement'>" + document.getElementById("noun5").value + "</span>";
    var noun6 =...