Material Lite/Typescript Todo

index.html

<div class="container">

  <h1>Todo App</h1>
  <div id="todo-list">

  </div>
  <input type="text" id="new-todo" placeholder="New todo Item"></input>
  <button id="add-todo" class="add-todo mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" onclick="addTodo()">Add Todo</button>

</div>

material-lite-typescript-todo.markdown

Material Lite/Typescript Todo

A Pen by Drew Miller on CodePen.

License.

script.js

var newTodo = document.getElementById("new-todo");
var add = document.getElementById("add-todo");
var todoList = document.getElementById("todo-list");
var deleteButton = '<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-button--mini-fab delete"><i class="material-icons">delete</i></button>';
var todos = [
  {
    id: 1,
    todo: "Go to store",
    complete: false
  },
  {
    id: 2,
    todo: "Buy coffee",
    complete: false
  },
  {
    id: 3,
    todo: "Fix car",
    complete: false
  },
  {
    id: 4,
    todo: "Plan a trip to Japan",
    complete: false
  },
  {
    id: 5,
    todo: "Learn a new song",
    complete: false
  },
  {
    id: 6,
    todo: "Get a haircut",
    complete: false
  }
];

init();

function init() {
  show();
}

function addTodo() {
  todos.push({
    id: todos.length,
    todo: newTodo.value,
    complete: false
  });
  show();
}

newTodo.addEventListener("keyup", function(event) {
  //add todo with 'enter' 
  if (event.keyCode === 13) {
    add.click();
  }
});

function removeTodo(event){
  this.parentElement.parentElement.classList.add("hide");
}

function show() {
  var ul = document.createElement("UL");
  var node, textnode, remove;
  todoList.removeChild(todoList.childNodes[0]);

  todos.forEach((todo, index) => {
    node = document.createElement("LI");
    textnode = document.createTextNode(todo.todo);
    node.appendChild(textnode);
    deleteIcon = document.createElement("SPAN");
    deleteIcon.innerHTML = deleteButton;
    node.appendChild(deleteIcon);
    node.addEventListener('click', function(event) {
      this.classList.toggle("done");
    });
    ul.appendChild(node);
  });
  todoList.appendChild(ul);
  
  var buttons = document.getElementsByClassName('delete');
  for (var i=0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', removeTodo);
  };
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

style.css

body {
  background: tomato;
}

.container {
  margin: 3rem;
  background: white;
  padding: 2rem;
  font-size: 30px;
}

.hide {
  display: none;
}

.done {
  text-decoration: line-through;
}

input {
  width: 30%;
  height: 3rem;
}

input[type="text"] {
    font-size:25px;
}

.add-todo {
  margin-left: 2rem;
}

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  font-size: 3rem;
}
li {
  position: relative;
  display: block;
  list-style: none;
  padding: 6px 0;
}

li span {
  margin-left: 1rem;
}

li:not(:last-child) {
  border-bottom: 1px solid #AAA;
}
li button.add-todo {
  margin: 6px 0;
}