example 03 lodash(angular-reactjs-vuejs-quickstart-comparison)

by hasandag

HTML

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<input type="text">
<button>Add Todo</button>

<ul></ul>

JavaScript

var inputEl = $("input");
var buttonEl = $("button");
var ulEl = $("ul");
var todos = [];

buttonEl.click(addTodo);

function addTodo() {
  var userInput = inputEl.val();
  if (userInput.trim() == "") {
    return;
  }
  var newTodo = { id: _.uniqueId(), value: userInput };
  todos.push(newTodo);
  $("<li>" + userInput + "</li>")
    .appendTo(ulEl)
    .attr('dataset-id',newTodo.id)
    .click(removeTodo);
  console.log(todos);
  inputEl.value = "";
}

function removeTodo(event) {
  var clickedLi = $(this);
  var itemId = clickedLi.attr('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.remove();
  console.log(todos);
}