ToDo's List!

by nukeboy212

HTML

<h1>
ToDo's List
</h1>
<input placeholder="Enter Task">
<button id="submit">
  Add Todo
</button>

<ul id="list">

</ul>
<button id="delete">
  Delete All Completed Todo's
</button>

CSS

h1 {
  text-align: center;
}

button {
  display: inline=block;
  margin-left: 20px;
}

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

JavaScript

var tasks = [];
$("#delete").hide();
$("#submit").click(function() {
  var toDo = $("input").val();
  if (toDo != "") {
    $("ul").append("<li>" + toDo + "<button class='delete'>Done</button></li>");
    $("#delete").show();
    tasks.push(toDo);
  } else {
    alert("You need to write something in your Todo!");
  }
});

$(document).on("click", ".delete", checkItem);

function checkItem() {
  $(this).parent().addClass("ticked");
}

function deleteAll() {
  console.log(tasks.length);
  var number = $(".ticked").length
  for(var i = 0; i<number; i++) {
  tasks.pop()
  }
  console.log(number);
  $(".ticked").remove();
  
  console.log(tasks.length);
}

$("#delete").click(function() {
  deleteAll();
});

function showButton() {
  if (tasks.length > 0) {
    $("#delete").show();
  } else {
    $("#delete").hide();
  }
}

setInterval(function(){
showButton();
},100/30);