ToDo's List! Aplha 1.0

This is the best to do list out there! YOu can do anything!

by nukeboy212

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<h1>
ToDo's List
</h1>
<select>
<option value="Nice Mode">Nice Mode</option>
<option value="Mean Mode">Mean Mode</option>
</select>
<div id ="TodosSource">
  <input placeholder="Enter Task">
  <button id="submit">
    Add Todo
  </button>

  <ul id="list">

  </ul>
  <button id="delete">
    Kill All Finished ToDo's
  </button>
</div>

CSS

h1 {
  text-align: center;
}

button {
  display: inline=block;
  margin-left: 20px;
}
#delete {
  background-color: red;
  border: 2px solid #8e1300;
}
.ticked {
  text-decoration: line-through;
}
#TodosSource {
  display: block;
  width: 40%;
  margin: auto;
}

JavaScript

var tasks = [];
var nice = true;
var mean = false;
var alert1 = "You need to write something in your Todo!"
var alert2 = "Don't be stupid! You need to write something in your Todo!"
$("#delete").hide();
$("#submit").click(function() {
  var toDo = $("input").val();
  if (toDo.length >0 && !tasks.includes(toDo)) {
    $("ul").append("<li>" + toDo + "<button class='delete'>Done</button></li>");
    $("#delete").show();
    tasks.push(toDo);
  } else if (toDo.length == 0){
  if (mean == false)
    alert(alert1);
  }
  else {
  	alert(alert2)
  }
  else{
  alert("You already made that a ToDo! No room for duplicates!")
  }
});

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

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

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

  console.log(tasks.length);
}

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

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

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