Object Challenge

by Jonathon Mascorella

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
  <div class="row">
  <div class="col-xs-12">
    <h3>Comments? Leave them here!</h3>
    <form class="form">
      <div class="form-group">
        <input class="form-control" type="text" id="sender" name="sender" placeholder="Name" required>
      </div>
      <div class="form-group">
        <input class="form-control" type="email" id="email" name="email" placeholder="Email" required>
      </div>
      <div class="form-group">
        <textarea class="form-control" name="comment" id="comment" placeholder="Comments..." required></textarea>
      </div>
      <div class="checkbox">
      <label>
        <input type="checkbox" name="hide_email" id="hide_email" >Hide email?</label>
      </div>
      <div class="btn-group">
          <a class="btn btn-success" id="comment_submit">Comment!</a>
      </div>
    </form>
  </div>
  <div class="row">
    <hr />
    <div class="col-xs-10 col-xs-offset-1 comment-loader" id="comment_loader">
      <p id="no_comments">
        Loading comments...
      </p>
    </div>
    </div>
  </div>
</div>

JavaScript

var MAJLibrary = { //JSON Object creation
'cb_items' : [],
  'cb_store' : function(item_to_store) {
  //Clear the comment area
  if(this.cb_items.length == 0){
    	$("#comment_loader").empty();
    }
  //Store the item into the items array
  	var number_of_comments = this.cb_items.length;
    var id = number_of_comments--; 
    //obviously, we start at 0 items in the array of comments. This would normally be managed by a DB
    item_to_store.push(id);
    this.cb_items.push(item_to_store);
    if(this.cb_items[id][3] == true){
      $("#comment_loader").prepend('<div class="col-xs-12"><h5>'+this.cb_items[id][0]+'</h5><p>'+this.cb_items[id][2]+'</p></div>');
    }else{
      $("#comment_loader").prepend('<div class="col-xs-12"><h5><a href="mailto:'+this.cb_items[id][1]+'">'+this.cb_items[id][0]+'</a></h5><p>'+this.cb_items[id][2]+'</p></div>');
    }
    console.log(this.cb_items);
    return this;
  },
  'cb_retrieve_all' : function() {
    //Retrieve all comments and display
    if(this.cb_items.length > 0){
      for (var i = 0; i < this.cb_items.length; i++){
      	if(this.cb_items[i][3] == true){
        	$("#comment_loader").empty();
          $("#comment_loader").prepend('<div class="col-xs-12"><h5>'+this.cb_items[i][0]+'</h5><p>'+this.cb_items[i][2]+'</p></div>');
        }else{
        	$("#comment_loader").empty();
          $("#comment_loader").prepend('<div class="col-xs-12"><h5><a href="mailto:'+this.cb_items[i][1]+'">'+this.cb_items[i][0]+'</a></h5><p>'+this.cb_items[i][2]+'</p></div>');
        }
      }
    }else{
			$("#comment_loader").empty();
      $("#comment_loader").prepend("<p>No comments to load!</p>");
    }
    return this;
  },
  'cb_retrieve_last' : function(id) {
  
  }
}; //Note the semicolon at the end

$('#comment_submit').click( function() {
	var name = $("#sender").val();
  var email = $("#email").val();
  var comment = $("#comment").val(); //You MUST ALWAYS strip tags - I wont here but for any projects you MUST.
  var...