Mad Libs Pirate Start Code

Starting Code, minimal functionality

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>
    </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 thePirateStory = "<h1>Talk Like A Pirate!</h1>";
    // thePirateStory += "Ye can always pretend to be a bloodthirsty " + noun1 + ", threatening everyone by waving yer " + adjective1 +  " sword in the air, but until ye learn to " + verb1 + " like a pirate, ye'll never be " + adverb1 + " accepted as an authentic " + noun2 + ".<br></br>";
        
    document.getElementById("story").innerHTML = thePirateStory;
        
}