jpetto · August 29, 2015 13:58
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8">
  <title>Basic Backbone Todo List</title>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/pure/0.4.2/pure-min.css">
  <style type="text/css">
    #app-title {
      text-align: center;
      border-bottom: 3px solid #000;
      padding: 15px 0;
      margin-top: 0;
      background: #cde0cf;
      text-transform: uppercase;
      letter-spacing: 0.3em;
    }

    #todo-list {
      width: 500px;
    }

    .todo {
      position: relative;
      padding: 0 10px;
      margin-bottom: 40px;
    }

    .important {
      border-left: 4px solid #67bdd9;
    }

    .completed {
      opacity: 0.5;
    }

    .completed .complete {
      display: none;
    }

    .todo-actions {
      position: absolute;
      top: 0;
      right: 0;
    }

    .todo-action {
      display: block;
      float: left;
      margin-left: 10px;
      font-size: 14px;
      width: 14px;
      height: 14px;
      text-decoration: none;
      padding: 4px;
      overflow: hidden;
      line-height: 12px;
      text-align: center;
      border-radius: 50%;
    }

    .delete {
      background: #ac070b;
      color: #fff;
    }

    .complete {
      background: #38c95b;
      color: #fff;
    }

    .clearfix:after {
      content: '';
      display: table;
      clear: both;
    }
  </style>
 </head>
 <body>

 <h1 id="app-title">Todos</h1>

 <div class="pure-g">
  <div class="pure-u-1-2">
    <form action="" id="todo-form" class="pure-form pure-form-aligned">
      <div class="pure-control-group">
        <label for="title">Title</label>
        <input type="text" id="title" name="title">
      </div>
      <!--<div class="pure-control-group">
        <label for="due">Due</label>
        <input type="date" id="due" name="due">
      </div>-->
      <div class="pure-control-group">
        <label for="notes">Notes</label>
        <textarea name="notes" id="notes" cols="30" rows="4"></textarea>
      </div>
      <div class="pure-control-group">
        <label for="important">Important</label>
        <input type="checkbox" name="important" id="important">
      </div>
      <div class="pure-controls">
        <button type="submit" id="create-todo" class="pure-button pure-button-primary">Add Task</button>
      </div>
    </form>
  </div>
  <div class="pure-u-1-2">
    <ol id="todo-list"></ol>
  </div>
 </div>

 <!--
 Here's the structure of each todo item:
 <li class="todo">
  <strong>Todo Title</strong>
  <br>
  <small>Due: due date (do not render this or above <br> if due date is empty)</small>
  <p>
    The notes for the todo (do not render this tag if notes are empty)
  </p>
  <div class="todo-actions clearfix">
    <a href="#" class="todo-action delete">x</a>
    <a href="#" class="todo-action complete">&#10004;</a>
  </div>
 </li>
 -->

 <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
 <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Basic Backbone Todo List</title>
	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/pure/0.4.2/pure-min.css">
	<style type="text/css">
	#app-title {
	text-align: center;
	border-bottom: 3px solid #000;
	padding: 15px 0;
	margin-top: 0;
	background: #cde0cf;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	}

	#todo-list {
	width: 500px;
	}

	.todo {
	position: relative;
	padding: 0 10px;
	margin-bottom: 40px;
	}

	.important {
	border-left: 4px solid #67bdd9;
	}

	.completed {
	opacity: 0.5;
	}

	.completed .complete {
	display: none;
	}

	.todo-actions {
	position: absolute;
	top: 0;
	right: 0;
	}

	.todo-action {
	display: block;
	float: left;
	margin-left: 10px;
	font-size: 14px;
	width: 14px;
	height: 14px;
	text-decoration: none;
	padding: 4px;
	overflow: hidden;
	line-height: 12px;
	text-align: center;
	border-radius: 50%;
	}

	.delete {
	background: #ac070b;
	color: #fff;
	}

	.complete {
	background: #38c95b;
	color: #fff;
	}

	.clearfix:after {
	content: '';
	display: table;
	clear: both;
	}
	</style>
	</head>
	<body>

	<h1 id="app-title">Todos</h1>

	<div class="pure-g">
	<div class="pure-u-1-2">
	<form action="" id="todo-form" class="pure-form pure-form-aligned">
	<div class="pure-control-group">
	<label for="title">Title</label>
	<input type="text" id="title" name="title">
	</div>
	<!--<div class="pure-control-group">
	<label for="due">Due</label>
	<input type="date" id="due" name="due">
	</div>-->
	<div class="pure-control-group">
	<label for="notes">Notes</label>
	<textarea name="notes" id="notes" cols="30" rows="4"></textarea>
	</div>
	<div class="pure-control-group">
	<label for="important">Important</label>
	<input type="checkbox" name="important" id="important">
	</div>
	<div class="pure-controls">
	<button type="submit" id="create-todo" class="pure-button pure-button-primary">Add Task</button>
	</div>
	</form>
	</div>
	<div class="pure-u-1-2">
	<ol id="todo-list"></ol>
	</div>
	</div>

	<!--
	Here's the structure of each todo item:
	<li class="todo">
	<strong>Todo Title</strong>
	<br>
	<small>Due: due date (do not render this or above <br> if due date is empty)</small>
	<p>
	The notes for the todo (do not render this tag if notes are empty)
	</p>
	<div class="todo-actions clearfix">
	<a href="#" class="todo-action delete">x</a>
	<a href="#" class="todo-action complete">✔</a>
	</div>
	</li>
	-->

	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>

	</body>
	</html>