SpencerCooley/index.html

## index.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>todo</title>
    <link rel="stylesheet" href="styles.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>


<!--look at all this ugly inline javascript-->
<!--we copied this over from the jsfiddle -->
<script type="text/javascript">
//a simple model defintiion for a todo item.
var Todo = Backbone.Model.extend({
});

//a collection of todo model objects
var TodoList = Backbone.Collection.extend({
  model: Todo
});


var TodoView = Backbone.View.extend({
  el: '#todo-container',
  events: {
    'keyup .new-todo-box': 'handleEnter'
  },
  handleEnter: function(e){
    if(e.keyCode == 13){
      this.createNewTodo();
    }
  },

  initialize: function(){
    this.collection = new TodoList();
    this.listenTo(this.collection, "add", this.refreshList, this);
  },

  refreshList: function(){
    var source   = $("#list-item").html();
    var template = Handlebars.compile(source);
    $('.todo-list').html(template(this.collection.toJSON()))
  },

  createNewTodo: function(){
    var newTodo = new Todo();
    var message = $('.new-todo-box').val()
    newTodo.set({'message': message })
    this.collection.add(newTodo)
    $('.new-todo-box').val("")
  }
});

$(document).ready(function(){
  new TodoView();
});


</script>


  </head>


  <body>

    <!--I copy and pasted this html directly from the js fiddle-->
    <div class="wrapper">
      <div class="todo-container" id="todo-container" >
        <h1>To Do List</h1>
        <input type="text" class="new-todo-box">
        <div class="todo-list">
        </div>
      </div>
    </div>

    <script id="list-item" type="text/x-handlebars-template">
      {{#each this}}
        <div class="list-item">
          {{message}}
        </div>
      {{/each}}
    </script>
  <!--I copy and pasted this html directly from the js fiddle-->


  </body>


</html>


	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>todo</title>
	<link rel="stylesheet" href="styles.css">

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>



	<!--look at all this ugly inline javascript-->
	<!--we copied this over from the jsfiddle -->
	<script type="text/javascript">
	//a simple model defintiion for a todo item.
	var Todo = Backbone.Model.extend({
	});

	//a collection of todo model objects
	var TodoList = Backbone.Collection.extend({
	model: Todo
	});


	var TodoView = Backbone.View.extend({
	el: '#todo-container',
	events: {
	'keyup .new-todo-box': 'handleEnter'
	},
	handleEnter: function(e){
	if(e.keyCode == 13){
	this.createNewTodo();
	}
	},

	initialize: function(){
	this.collection = new TodoList();
	this.listenTo(this.collection, "add", this.refreshList, this);
	},

	refreshList: function(){
	var source = $("#list-item").html();
	var template = Handlebars.compile(source);
	$('.todo-list').html(template(this.collection.toJSON()))
	},

	createNewTodo: function(){
	var newTodo = new Todo();
	var message = $('.new-todo-box').val()
	newTodo.set({'message': message })
	this.collection.add(newTodo)
	$('.new-todo-box').val("")
	}
	});

	$(document).ready(function(){
	new TodoView();
	});


	</script>


	</head>


	<body>

	<!--I copy and pasted this html directly from the js fiddle-->
	<div class="wrapper">
	<div class="todo-container" id="todo-container" >
	<h1>To Do List</h1>
	<input type="text" class="new-todo-box">
	<div class="todo-list">
	</div>
	</div>
	</div>

	<script id="list-item" type="text/x-handlebars-template">
	{{#each this}}
	<div class="list-item">
	{{message}}
	</div>
	{{/each}}
	</script>
	<!--I copy and pasted this html directly from the js fiddle-->


	</body>


	</html>