Handlebars test

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script data-require="handlebars.js@*" data-semver="1.3.0" src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
          <p>
        <input type="checkbox" id="mark-all">Mark All Done
      </p>
    <script id="entry-template" type="text/x-handlebars-template">
      <h2>{{appName}}</h2>
      <div id="form-wrapper">
        <input type="text" class="task" placeholder="Task">
        <select class="color">
          <option value="blue">Blue</option>
          <option value="green">Green</option>
          <option value="orange">Orange</option>
        </select>
        <button class="new-task">New task</button>
      </div>
    
      <ul>
      
      {{#each todos}}
<!--    <li class="done-{{done}} current-task {{#if ../clear}} {{#if done}} hidden {{/if}}{{/if}}" style="background-color: {{color}} {{importantClass this}}"> -->
        <li class="done-{{done}} current-task {{importantClass this}}">
        <input type="checkbox" {{#if done}} checked {{/if}} data-index="{{@index}}">
        {{getFunky this}}
        </li>
      {{/each}}
      </ul>
      <button class="clear">Clear complete</button>
    </script>
    
    <div id="container"></div>
    <script src="script.js"></script>
  </body>

</html>

var TODOS =  [
    {action: "do this first", done: false, color: "red"},
    {action: "learn handlebars", done: true, color: "blue", funky: true},
    {action: "learn angular", done: false, color: "green", important: true},
    {action: "do this first", done: false, color: "red", funky: true},
    {action: "learn handlebars", done: true, color: "blue"},
    {action: "learn angular", done: false, color: "green", important: true}
];

Handlebars.registerHelper('importantClass', function(todo) {
  return todo.important ? "q1" : "q2";
});
Handlebars.registerHelper('getFunky', function(todo) {
  var tempAction = todo.action;
  return (!todo.funky ? tempAction : tempAction.split("").reverse().join(""));
});

var source = $("#entry-template").html();
var template = Handlebars.compile(source);
var masterTodo = {todos: TODOS, appName: "Awesome", clear: false}
function render() {
  masterTodo = {todos: TODOS, appName: "Awesome", clear: masterTodo.clear};
  var html    = template(masterTodo);
  $("#container").html(html);
}

render();

$("#container").on("click", ":checkbox:not(#mark-all)", function() {
  var $checkbox = $(this);
  TODOS[$checkbox.data("index")].done = $checkbox.is(":checked");
  render();
});
$("#container").on("click", ".new-task", function() {
  $th = $(this);
  var $task = $th.parents("#form-wrapper").find(".task") || "Invalid";
  var $color = $th.parents("#form-wrapper").find(".color") || "red";
  if ($task.val()) {
    TODOS.push({action: $task.val(), done: false, color: $color.val()});
    $task.val("");
    render();
  }
});
$("#container").on("click", ".clear", function() {
  masterTodo.clear = masterTodo.clear === false;
  render();
});

var markAll = document.getElementById("mark-all");
markAll.addEventListener("click", function() {
  var checked = this.checked;
  TODOS = TODOS.map(function(todo) {
    var tempTodo = todo;
    tempTodo.done = checked;
    return tempTodo;
  });
  render();
});

/* Styles go here */

.current-task {
/*   color: white; */
} 
.done-true {
  color: #bbb;
  text-decoration: line-through;
}
.hidden {
  display: none;
}
.q1 { 
  color: red; 
  font-weight: bold;
}