MadLib Example

-Global Namespace Abatement -Class with Public/Private Features -Constructor Invocation Pattern -Variable Interpolation -Modularity and Decoupling -Arrays, Iteration and Comparison

HTML

<div id="ml-ui-bar">
  <button id="ml-add-word-btn">Add new word</button>->
  <input id="ml-text-input" type="text">
  <input id="ml-text-output" disabled type="text">
</div>
<div id="mad-lib-container">
  <p id="mad-lib">
  There once was a <span class="n1">{noun}</span>,<br>
  who lived by a <span class="n2">{noun}</span>,<br>
  and who carried a very <span class="a1">{adj}</span> <span class="n3">{noun}</span>.<br>
  One day the <span class="n1">{noun}</span> came across a <span class="n4">{noun}</span>,<br>
  laying in the <span class="a2">{noun}</span> of the <span class="n5">{noun}</span>.<br>
  The <span class="n4">{noun}</span> had three big <span class="a3">{adj}</span><br>
  <span class="n6">{noun}</span>'s, that stuck out like a <span class="n7">{noun}</span>'s 
  <span class="n8">{noun}</span>!<br>
  So the <span class="n1">{noun}</span> took out his <span class="a1">{adj}</span> 
  <span class="n3">{noun}</span> and <br>
  chopped off all of the <br><span class="n4">{noun}</span>'s <span class="n9">{noun}</span>s!
</p>
</div>

CSS

#ml-ui-bar {
  width: 100%;
  height: 50px;
  background: limegreen;
  padding-left: 20px;
}
#ml-add-word-btn {
  font-size: 10px;
}
#ml-ui-bar input {
  font-size: 10px;
  margin: 12px;
  width: 50px;
  height: 12px;
}
#ml-text-output {
 background: rgba(255,255,255, .4); 
 width: 50px;
 font-size: 10px;
 text-align: center;
 line-height: 12px;
}
#mad-lib-container {
  color: white;
  font-size: 18px;
  font-family: 'Arial';
  width: 100%;
  height: 800px;
  background: slateblue;
  padding: 20px;
}

#mad-lib {
  
}

JavaScript

var ML = {};     //madlib namespace scope
var madLib = {}; //object to hold the MadLib Class

(function(root){
  
  root.MadLib = function() {
    
    //private variabless
    var self  = this;
    var words = []; //create and empyt array to store our words
    var count = 1;  //count variable to keep track of words
    
    //page elements
    
    var addWordBtn = $('#ml-add-word-btn');
    var textInput  = $('#ml-text-input');
    var textOutput = $('#ml-text-output');
    
    //public methods
    
    self.init = function() {
     showPrompt(); 
    };
    
    //event handlers
    
    addWordBtn.click(function(evt) {
      var word = textInput.attr('value');
      textInput.attr('value', '');
      words.push(word);
      count++;
      if(count <= 12) {
        showPrompt();
      } else {
        resetCount();
        createMadLib();
      }
    });
    
    //private functions
    
    function showPrompt() {
      //order => 1:n1, 2:n2, 3:a1, 4:n3, 5:n4, 6:a2, 7:n5, 8:a3, 9:n6, 10:n7, 11:n8, 12:n9
      
      if(count === 3 || count === 6 || count === 8) { //is an adjective
        textOutput.attr('value', count + ': Adj');
      } else { //is a noun
        textOutput.attr('value', count + ': Noun');
      }
    };
      
    function createMadLib() {
      var adjs = 1, nouns = 1;
      
      for(var i = 0, l = words.length; i < l; i++) {
        if(count === 3 || count === 6 || count === 8) { //is an adjective
          $('.a' + adjs).text(words[i]);
          adjs++;
        } else {
          $('.n' + nouns).text(words[i]);
          nouns++;
        }
        count++;
      }
      resetCount();
      textOutput.attr('value', count + 'done!');
    };
    
    function resetCount() {
      count = 1;
    };
  
  }
  
})(ML);

$(function(e){
  madLib = new ML.MadLib();
  madLib.init();
});