Back to all Elements

ToDo List

A todo list, created with JavaScript collected through the internet... ;)

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>

Copy

Preview:

Destin's Youtube channel Smarter Every Day is one of my favourite places on the web.

Might also interest you:

Hover to reveal Mask

Cloneable
Code
Design

A fixed background image that is revealed by mouse hover all over the section

Read more

Auto Change Tabs 2.0

Cloneable
Code
Interactions

A new and improved version for a Tabs element that automatically change tabs

Read more

Changing Text

Interactions
Cloneable
Tricks

Change text in a sentence/headline with Webflow's interactions

Read more