Chapter 10 - Word Replacement Game

The finished program from Chapter 10 of JavaScript for Kids For Dummies by Chris Minnick and Eva Holland

by rosakaufman

HTML

<div id="inputWords">
  <ul>
    <li><input type="text" id="adj1" /><br>Adjective</li>
    <li><input type="text" id="verbIng" /><br>Verb (ending in "-ing")</li>
    <li><input type="text" id="roomInHouse" /><br>Room in a house</li>
    <li><input type="text" id="color" /><br>Color</li>
    <li><input type="text" id="nounPlural" /><br>Plural noun</li>
    <li><input type="text" id="pastVerb" /><br>Verb (past tense)</li>
    <li><input type="text" id="beverage" /><br>Beverage</li>
    <li><input type="text" id="musicType" /><br>Type of music</li>
    <li><input type="text" id="diffRoom" /><br>Different Room in a house</li>
    <li><input type="text" id="exclamation" /><br>Exclamation</li>
    <li><input type="text" id="pastVerb2" /><br>Verb (past tense)</li>
    <li><input type="text" id="adjDance" /><br>Adjective</li>
    <li><input type="text" id="animal" /><br>Animal</li>
    <li><input type="text" id="city" /><br>City</li>
    <li><input type="text" id="verb" /><br>Verb</li>
  </ul>
  <div id="buttonDiv">
    <button id="replaceButton">Replace it!</button>
  </div>
</div>

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

CSS

body {
  font-family: "Comic Sans MS";
}

#inputWords {
  float: left;
  width: 45%;
}

ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

li {
  line-height: 2em;
  text-transform: uppercase;
  margin-top: 8px;
}

input[type=text] {
  border-width: 0 0 1px 0;
  border-color: #333;
}

#buttonDiv {
  text-align: center;
}

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

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

.replacement {
  text-decoration: underline;
  text-transform: uppercase;
}

JavaScript

var replaceButton = document.getElementById("replaceButton");
replaceButton.addEventListener("click", replaceIt);

function replaceIt() {
  var storyDiv = document.getElementById("story");
  var adj1 = "<span class='replacement'>" + document.getElementById("adj1").value + "</span>";
  var verbIng = "<span class='replacement'>" + document.getElementById("verbIng").value + "</span>";
  var roomInHouse = "<span class='replacement'>" + document.getElementById("roomInHouse").value + "</span>";
  var color = "<span class='replacement'>" + document.getElementById("color").value + "</span>";
  var nounPlural = "<span class='replacement'>" + document.getElementById("nounPlural").value + "</span>";
  var pastVerb = "<span class='replacement'>" + document.getElementById("pastVerb").value + "</span>";
  var beverage = "<span class='replacement'>" + document.getElementById("beverage").value + "</span>";
  var musicType = "<span class='replacement'>" + document.getElementById("musicType").value + "</span>";
  var diffRoom = "<span class='replacement'>" + document.getElementById("diffRoom").value + "</span>";
  var exclamation = "<span class='replacement'>" + document.getElementById("exclamation").value + "</span>";
  var pastVerb2 = "<span class='replacement'>" + document.getElementById("pastVerb2").value + "</span>";
  var adjDance = "<span class='replacement'>" + document.getElementById("adjDance").value + "</span>";
  var animal = "<span class='replacement'>" + document.getElementById("animal").value + "</span>";
  var city = "<span class='replacement'>" + document.getElementById("city").value + "</span>";
  var verb = "<span class='replacement'>" + document.getElementById("verb").value + "</span>";

  var theStory = "<h1>Douglas's Dance Party</h1>";
  theStory += "Un " + adj1 + " día, Douglas estaba " + verbIng + " en su " + roomInHouse + ", leyendo un libro sobre " + color + " " + nounPlural + ".<br><br>";
  theStory += "Mientras " + pastVerb + " su " + beverage + ",...