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>Noun</li>
        <li><input type="text" id="adjective" /><br>adjective</li>
        <li><input type="text" id="verd1" /><br>verb</li>
        <li><input type="text" id="adverb" /><br>adverb</li>
        <!-- add a list item for adjective1 -->
        <!-- add a list item for verb1 -->
        <!-- add a list item for adverb1 -->
        <!-- add a list item for noun2 -->
    </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
  // Create a variable then hook it up to the UI button
  // Add a click event listener to the variable which will run the function below

// Create a function which will swap words into specific places in our story
// Then display the updated story in the UI
function swapWords() {
    // create a variable then assign it the word you want to swap into the story
    // create a variable for adjective1 and assign the value from the UI
    // create a variable for adjective1 and assign the value from the UI
    // create a variable for verb1 and assign the value from the UI
    // create a variable for adverb1 and assign the value from the UI
    // create a variable for noun2 and assign the value from the UI
        
    // here is the title of the story in a variable
    var thePirateStory = "<h1>Talk Like A Pirate!</h1>";
        
    // write a line of code that will display our story in the HTML story element
        
}