example 02 (angular-reactjs-vuejs-quickstart-comparison)

by hasandag

HTML

<input type="text">
<button>Add Todo</button>

<ul></ul>

JavaScript

var inputEl = document.querySelector("input");
var buttonEl = document.querySelector("button");
var ulEl = document.querySelector("ul");
var todos = [];

buttonEl.addEventListener('click', addTodo);

function addTodo() {
  var userInput = inputEl.value
  if (userInput.trim() == "") {
    return;
  }
  var newTodo = { id: Math.random(), value: userInput};
  todos.push(newTodo);
  var todoLi = document.createElement("LI");
  todoLi.textContent = userInput;
  todoLi.addEventListener('click', removeTodo);
  todoLi.dataset.id = newTodo.id;
  ulEl.appendChild(todoLi);
  console.log(todos);
  inputEl.value = "";
}


function removeTodo(event){
  var clickedLi = event.target;
  var itemId = clickedLi.dataset.id;
  //console.log("itemId: " +itemId);
  for(var i = 0; i< todos.length;i++){
   // console.log("todos[i].id: "+ todos[i].id)
    if(todos[i].id == itemId){
      todos.splice(i,1);
      break;
    }
      
  }
  clickedLi.parentNode.removeChild(clickedLi);
  console.log(todos);
}