ToDoList

index.html

<!-- Note: depends on jQuery being included via Pen Settings -->
<input id="new-todo" type="text" onkeypress="checkForEnter(event);" />
<button onclick="addToDo()" >Add</button>
<button onclick="deleteAll()">Delete All</button>
<ul id="todos"></ul>

script.js

function addToDo() {
  
  // Get <input> element via "#id" CSS selector
  var todoInput = $("#new-todo");
  
  // Get user's text value from <input> element
  var todoText = todoInput.val();
  
  // Build a <li> HTML fragment (as a text string)
  // that contains the user's text
  var todoHTML = "<li class='todo'>" + todoText + "</li>";
  
  // Get To Do list <ul> element via "#id" CSS selector
  var todosList = $("#todos");
  
  // Append new HTML (as a child) to <ul> element
  todosList.append(todoHTML);
}

function deleteAll() {
  $(".todo").remove();
}

function checkForEnter(event) {
   if (event.keyCode === 13) {
     addToDo();
     return true;
   }
  
  var ch = event.which;
  if (!( (ch > 48) && (ch < 57))) {
    event.preventDefault();
    return false;
  }
 
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

todolist.markdown

ToDoList

A basic non-MVC To Do List.

A Pen by Alan Moore on CodePen.

License.