<!DOCTYPE html>
<html>
<head>
<title>To-Do List</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
/* Define CSS styles */
#todo-list {
list-style: none;
padding: 0;
}
li {
margin: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>To-Do List</h1>
<input type="text" id="new-task" placeholder="Add a new task">
<button id="add-task">Add</button>
<ul id="todo-list"></ul>
<script>
$(document).ready(function () {
// Event handling when the "Add" button is clicked
$("#add-task").click(function () {
var taskText = $("#new-task").val(); // Get the entered text
if (taskText.trim() === "") {
alert("Please enter a task.");
return;
}
// Add a new task to the list
var listItem = $("<li>").text(taskText);
$("#todo-list").append(listItem);
// Clear the input field
$("#new-task").val("");
});
// Event handling to remove an item when clicked
$("#todo-list").on("click", "li", function () {
$(this).remove();
});
});
</script>
</body>
</html>
1. **HTML Structure**:
- An input field (`#new-task`) allows users to type in new tasks.
- A button (`#add-task`) adds the entered task to the to-do list when clicked.
- An unordered list (`#todo-list`) displays the tasks added by the user.
2. **CSS Styling**:
- The to-do list (`#todo-list`) has no default list styling and no padding, for a clean look.
- Each list item (`li`) has a slight margin for spacing and a cursor pointer to indicate it's clickable.
3. **jQuery Script**:
- **Adding Tasks**: The script listens for clicks on the `#add-task` button. When clicked, it retrieves the value from the `#new-task` input field. If the input isn't empty (after trimming white spaces), it creates a new list item (`<li>`) with the task text and appends it to the `#todo-list`. It then clears the input field.
- **Removing Tasks**: The script also listens for clicks on any list item (`li`) within the `#todo-list`. When a list item is clicked, it's removed from the list. This is achieved using jQuery's `.on()` method with event delegation, allowing dynamically added list items to be clickable and removable.
### Key Points:
- The application demonstrates basic CRUD (Create and Delete) operations in a web interface, using jQuery for DOM manipulation and event handling.
- It showcases how to handle user input, including adding items to a list and providing a simple interaction to remove them.
- The use of jQuery's `.on()` method for event delegation is particularly noteworthy, as it ensures that even elements added after the page load will have event listeners attached.
### Possible Improvements:
- **Task Persistence**: Currently, tasks disappear upon page reload. Integrating local storage or a backend database could allow tasks to persist.
- **Validation and Feedback**: While there's a basic check for an empty task, further validation and user feedback (e.g., striking through completed tasks, input validation messages) could enhance usability.
- **Styling and UX Enhancements**: Additional CSS styling and jQuery effects (e.g., animations for adding/removing tasks) could improve the visual appeal and user experience.
- **Editing Functionality**: Implementing a way to edit existing tasks would extend the application's functionality, making it more versatile.
'개념 > JQuery' 카테고리의 다른 글
| JQuery) jQuery Mobile Advanced List View Example (0) | 2025.03.13 |
|---|---|
| JQuery) Multi-Page Mobile Web Application with jQuery Mobile (0) | 2025.03.12 |
| JQuery) Bubble Chart Example with Chart.js (0) | 2025.03.10 |
| JQuery) Pie Chart Example with Chart.js (0) | 2025.03.09 |
| JQuery) jQuery Event Handling Example (0) | 2025.03.08 |