MADLIB

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

by rosakaufman

HTML

<title>MADLIB</title>
    	 
		  
  </head>
  <body>
     <header>
     <h1>MADLIB</h1>
     </header>  
    
    <div id="inputPalabras">
	 <ul>
	  <li><input type="text" id="nombre"/><br/>NOMBRE</li>
	  <li><input type="text" id="parientes"/><br/>PARIENTES</li>
	  <li><input type="text" id="nombreLugar"/><br/>ARTÍCULO + NOMBRE DE LUGAR</li>
	  <li><input type="text" id="día"/><br/>DÍA DE LA SEMANA</li>
	  <li><input type="text" id="mes"/><br/>UN MES</li>
	  <li><input type="text" id="accidenteGeo"/><br/>ACCIDENTE, LUGAR GEOGRÁFICO FEM </li>
	  <li><input type="text" id="accidenteGeo2"/><br/>ACCIDENTE, LUGAR GEOGRÁFICO FEM 2</li>
	  <li><input type="text" id="vegetación"/><br/>VEGETACIÓN FEM PLURAL</li>
	  <li><input type="text" id="gerundio"/><br/>GERUNDIO</li>
	  <li><input type="text" id="adverbio"/></br>ADVERBIO</li>
	 </ul> 
	 <div id="buttonDiv">
	 <button id="reemplazarButton">¡REEMPLAZA!</button></div>
	</div>
	
	<div  id="historia"></div>

CSS

body {
  text-align: left;
  font-family: Merriweather-Bold;
  src: url("../fonts/Merriweather-Bold.ttf"); 
  font-size: 15px;  
}
header{
    text-align: center;
  font-family: Merriweather-Bold;
  src: url("../fonts/Merriweather-Bold.ttf"); 
  font-size: 20px;   
  }
#al{
   position:absolute;
   left:55%;
   top:85%;
   width: 20%;
   height:16%;
   }
#inputPalabras{
   float: left;
   width: 30%; 
   background-color:#369e9c;  
   }
ul{
   list-style-type: none;
   padding:10%;
   margin: 10%;
   }   
li{
   line-height: 2em;
   text-transform:uppercase;
   margin-top:2%;
   }
input[type=text]{
   border-width:0 0 2px 0;
   border.color:#000;
   font-size:20px;
   }
#buttonDiv{
   text-align:center;
    margin-top:10%;
   }
#reemplazarButton{
   font-size:100%;   
   }
#historia{
   float: left;
   width: 60%; 
   background-color:#f54272;
   border: 2px dashed blue;
   font-size: 30px;
   padding: 2%;
   }  
.replacement{
   text-decoration: underline;
   text-transform: none;
   }

JavaScript

var reemplazarButton = document.getElementById("reemplazarButton");
	reemplazarButton.addEventListener("click", replaceIt);
	
	function replaceIt(){
	var storyDiv = document.getElementById("historia");
	var nombre = "<span class='replacement'>" +document.getElementById("nombre").value + "</span>"
	var parientes = "<span class='replacement'>" +document.getElementById("parientes").value + "</span>"
	var nombreLugar= "<span class='replacement'>" +document.getElementById("nombreLugar").value + "</span>"
	var día ="<span class='replacement'>" +document.getElementById("día").value + "</span>"
	var mes= "<span class='replacement'>" +document.getElementById("mes").value + "</span>"
	var accidenteGeo= "<span class='replacement'>" +document.getElementById("accidenteGeo").value + "</span>"
	var accidenteGeo2= "<span class='replacement'>" +document.getElementById("accidenteGeo2").value + "</span>"
	var vegetación= "<span class='replacement'>" +document.getElementById("vegetación").value + "</span>"
	var gerundio= "<span class='replacement'>" +document.getElementById("gerundio").value + "</span>"
    var adverbio="<span class='replacement'>" +document.getElementById("adverbio").value + "</span>"
    
	var theStory = "<h1>DOBLES</H1>";
	theStory += nombre + " y sus " +parientes+ " visitaron " + adverbio +"  "+ nombreLugar + ", un " + día + " del mes de " + mes + ".</br>"; 
	theStory += "De repente se encontraron en la cueva de la "+  accidenteGeo + " y decidieron entrar a explorar. </br>";
	theStory+= " Lo que encontraron fue increible. </br>";
	theStory+= " Una "+accidenteGeo2+ " en miniatura pero tan real ¡¡que ellos mismos aparecían adentro, moviéndose y hablando!! </br>";
	theStory+= " Recién en octubre del año siguiente volvieron a su casa, con todo tipo de "+vegetación+ " y, mientras iban "+gerundio+ " las regalaban como souvenir. </br>"
	theStory+= " ¿Qué suponés que pasó todo ese tiempo en que estuvieron ausentes? </br>";
	historia.innerHTML=theStory;
	}