How to Create a Todo List with jQuery?

Estimated read time 3 min read

To create a todo list with jQuery, you can follow these steps:

  1. Create an HTML file with a container for the todo list and a form to add new todo items.
  2. Add CSS to style the todo list and form.
  3. Write the jQuery code to add new todo items, mark items as completed, and delete items.

Here’s an example code that demonstrates how to create a todo list with jQuery:

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Todo List</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    #todo-list {
      margin: 20px;
      padding: 0;
      list-style: none;
    }
    #todo-list li {
      margin-bottom: 10px;
    }
    #todo-list li.completed {
      text-decoration: line-through;
    }
    form {
      margin: 20px;
    }
    input[type="text"] {
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 16px;
    }
    button {
      margin-left: 10px;
      padding: 10px;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <ul id="todo-list"></ul>
  <form>
    <input type="text" id="new-todo" placeholder="Add new todo item...">
    <button id="add-todo">Add</button>
  </form>
</body>
</html>

JavaScript:

$(document).ready(function() {
  var $todoList = $('#todo-list');
  var $newTodo = $('#new-todo');

  $('#add-todo').click(function() {
    var todoText = $newTodo.val();
    if (todoText.length === 0) return;
    var $todoItem = $('<li>').text(todoText);
    var $todoDelete = $('<button>').text('X').addClass('delete');
    $todoItem.append($todoDelete);
    $todoItem.click(function() {
      $(this).toggleClass('completed');
    });
    $todoDelete.click(function() {
      $(this).parent().remove();
    });
    $todoList.append($todoItem);
    $newTodo.val('');
  });
});

Explanation:

The JavaScript code sets a click event listener on the add-todo button. When the button is clicked, a new todo item is created from the value of the new-todo input field. If the length of the todo text is 0, the function returns and no todo item is created.

The $todoItem variable creates a new li element with the text of the todo item. The $todoDelete variable creates a new button element with the text “X” and the “delete” class. The $todoItem.append() method appends the $todoDelete button to the $todoItem li element.

The $todoItem.click() method sets a click event listener on the $todoItem li element. When the li element is clicked, it toggles the “completed” class on and off the li element.

The $todoDelete.click() method sets a click event listener on the $todoDelete button element. When the button element is clicked, it removes its parent li element from the todo list.

The $todoList variable gets the todo list element. The $(‘#todo-list’) selector selects the element with the id “todo-list”. The $() function creates a jQuery object from the selected

You May Also Like

More From Author

+ There are no comments

Add yours

Leave a Reply