Mad Lib

Before we begin here are some terms that you should become familiar with!

getElementById

getElementById allows you to access the first element with the specified id,

innerHTML

innerHTML allows you to set a property or return the HTML content (the inner HTML ) of an element.

What you will be learning.

Today you will be learning to add a Mad Lib to your site.

This will allow users to fill out a list of fields and insert them into a story for their enjoyment.

Example

  • Persons Name:
  • Place:
  • Persons Name(Male):
  • Place:
  • Persons Name(Female):
  • Adjective:
  • Place:
  • Heavy Object:
  • Adjective:
  • Adjective:
  • Adjective:

Code Required

HTML Markup

  <div class="storylist">
     <ul>
  <li>Persons Name: <input type="text" id="person"></li>
  <li>Place: <input type="text" id="place"></li>
   <li>Persons Name: <input type="text" id="person1"></li>
  <li>Place: <input type="text" id="place1"></li>
   <li>Persons Name: <input type="text" id="person2"></li>
      <li>Adjective: <input type="text" id="adjective"></li>
  <li>Place: <input type="text" id="place2"></li>
    <li>Heavy Object: <input type="text" id="heavy"></li>
     <li>Adjective: <input type="text" id="adjective1"></li>
      <li>Adjective: <input type="text" id="adjective2"></li>
	 <li>Adjective: <input type="text" id="adjective3"></li>
</ul>
<button id="submit">Submit</button>
</div>
<div id="story"></div>
     </div>

CSS Markup

.storylist{
	margin:0 auto;
	width:400px;
	padding-top: 10px;
}
#story{
	font-size:24px;
	font-family: "Open Sans",sans-serif;
	padding-top:20px;
	padding-bottom:10px;
	width:500px;
	margin:0 auto;	
}

Javascript Markup 


$(document).ready(function() {
  $('#submit').click(function(){
	  var person = document.getElementById("person").value;
	  //creating a varaible name and getting an elemet with an id if "person"
	    var place = document.getElementById("place").value;
		 //creating a varaible name and getting an elemet with an id if "place"
		  var person1 = document.getElementById("person1").value;
	  //creating a varaible name and getting an elemet with an id if "person1"
	    var place1 = document.getElementById("place1").value;
		 //creating a varaible name and getting an elemet with an id if "place1"
		   var person2 = document.getElementById("person2").value;
		 //creating a varaible name and getting an elemet with an id if "person2"
		  var adjective = document.getElementById("adjective").value;
	  //creating a varaible name and getting an elemet with an id if "adjective"
	    var place2 = document.getElementById("place2").value;
		 //creating a varaible name and getting an elemet with an id if "place2"
		   var heavy = document.getElementById("heavy").value;
		 //creating a varaible name and getting an elemet with an id if "heavy"
		  var adjective1 = document.getElementById("adjective1").value;
	  //creating a varaible name and getting an elemet with an id if "adjective1"
		  var adjective2 = document.getElementById("adjective2").value;
	  //creating a varaible name and getting an elemet with an id if "adjective2"
	    var adjective3 = document.getElementById("adjective3").value;
	  //creating a varaible name and getting an elemet with an id if "adjective3"
		 var story = document.getElementById("story");
		 story.innerHTML = "My name is " + person + " And I like to travel to " + place +"." 
		 + " Meanwhile my brother " + person1 + "Likes to go to " + place1 +"." 
		 + " On the other hands our sister " + person2 + " will not leave her " +adjective+ " rundown " + place2 +"." 
		 + " Then one day a " + heavy + " hit " +person2+"'s rundown " + place2 +"."   
		 + " Now " + person2 + " lives with " + person1 +" and i'm still " + adjective1 + " and " + adjective2 + " And mom said i'd be the" + adjective3 + " jokes on her."  ;
  });  
});

Back