JSFiddle - React, Tailwind, and code Playground

by GolfGirl21

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>Noun1</li>
        <li><input type="text" id="adjective1" /><br>Adjective1</li>
        <li><input type="text" id="verb1" /><br>Verb1</li>
        <li><input type="text" id="adverb1" /><br>Adverb1</li>
        <li><input type="text" id="noun2" /><br>Noun2</li>
        <li><input type="text" id="adjective2" /><br>Adjective2</li>
        <li><input type="text" id="pluralNoun1" /><br>Pluralnoun1</li>
        <li><input type="text" id="pluralNoun2" /><br>Pluralnoun2</li>
        <li><input type="text" id="pluralNoun3" /><br>Pluralnoun3</li>
        <li><input type="text" id="bodyPart1" /><br>Bodypart1</li>
        <li><input type="text" id="noun3" /><br>Noun3</li>
        <li><input type="text" id="noun4" /><br>Noun4</li>
        <li><input type="text" id="noun5" /><br>Noun5</li>
        <li><input type="text" id="noun6" /><br>Noun6</li>
        <li><input type="text" id="bodyPart2" /><br>Bodypart2</li>
    </ul>
    
    
    <div id="buttonDiv">
        <button id="swapButton">Insert 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 = "<span...