Feb 3, 2020
Back to all Elements
This Todo list is a bit more complicated than my usual stuff... It includes ~40 lines of code and combines Variables, 'If' functions and other JavaScript elements.
<script>
$(document).ready(function () {
$('form').submit(function() {
return false;
});
function addTodoItem() {
var todoItem = $("#new-todo-item").val();
$("#list").append("<div class=" + "'list-group-item w-clearfix'" + "><div class=" + "'list-txt'" + "value='" + todoItem + "'>" + todoItem + "</div><div class=" + "'buttons-wrap'" + "><div class=" + "'todo-item-done'" + ">Done</div><div class=" + "'remove'" + ">x</div></div>");
$("#new-todo-item").val("");
}
function deleteTodoItem(e, item) {
e.preventDefault();
$(item).parent().parent().fadeOut('slow', function() {
$(item).parent().parent().remove();
});
}
function completeTodoItem() {
$(this).toggleClass("grey");
$(this).parent().parent().toggleClass("done");
}
$(function() {
$("#add-todo-item").on('click', function(e) {
e.preventDefault();
addTodoItem()
});
var input = document.getElementById("new-todo-item");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("add-todo-item").click();
}
});
$("#list").on('click', '.remove', function(e) {
var item = this;
deleteTodoItem(e, item)
})
$(document).on('click', ".todo-item-done", completeTodoItem)
});
});
</script>
.png)
Try avoiding using "Transition: All". It is heavy on the browser's engine.
.png)
.png)