VueJs01

by abds040

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>

<script>
	
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);
}
</script>

JavaScript

var inputEl = document.querySelector('input');
var inputOb = $('input');
var buttonEl = document.querySelector('button');
var buttonOb = $('button');
var ulEl = document.querySelector('ul');
var ulOb = $('ul');

var todos = [];

//buttonEl.addEventListener('click', addToDo);
buttonOb.click(addToDo);


function addToDo(event) {
	//if (inputEl.value.trim() == '') { return;}
	if (inputOb.val().trim() == '') { return;}
	
	var newToDo = {id: _.uniqueId('test-'), value: inputEl.value};
	$('<li>'+inputOb.val()+'</li>')
		.appendTo(ulOb)
		.attr('dataset-id',newToDo.id)
		.click(delToDo);
	//var todoLi = document.createElement('li');
	//todoLi.textContent = inputEl.value;
	//todoLi.addEventListener('click', delToDo);
	//todoLi.dataset.id = newToDo.id;
	//ulEl.appendChild(todoLi);
	
	todos.push(newToDo);
	console.log(todos);
}

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