JS Frameworks

What and Why?

HTML

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.core.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);
}

function removeTodo(event) {
	var clickedLi = $(this);
  var itemId = clickedLi.attr('dataset-id');
  for (var i = 0; i < todos.length; i++) {
  	if (todos[i].id == itemId) {
    	todos.splice(i, 1);
      break;
    }
  }
  clickedLi.remove();
  console.log(todos);
}