Build a Todo app: add items on form submit, render with .html(), toggle done on click, and delete with filter(). Use event delegation for dynamic buttons and localStorage to save tasks between page visits.
Todo App with jQuery + AJAX
// Add todo
$('#form').on('submit', function(e) {
e.preventDefault();
const text = $('#input').val().trim();
if (!text) return;
$.post('/todos', { text }, function(todo) {
$('')
.text(todo.text)
.data('id', todo.id)
.appendTo('#list');
$('#input').val('');
});
});
// Delete on click
$('#list').on('click', 'li', function() {
const id = $(this).data('id');
$.ajax({ url: '/todos/' + id, method: 'DELETE',
success: () => $(this).slideUp(() => $(this).remove())
});
});