یک تودو لیست با بوتاسترپ5 بساز که دکمه افزودن و حذف داشته باشد
<!DOCTYPE html>
<html lang="en">
<head>
<title>To-Do List with Bootstrap 5</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container my-5">
<h1 class="text-center mb-4">To-Do List</h1>
<div class="row justify-content-center">
<div class="col-lg-6">
<form class="form-inline mb-3" id="addForm">
<div class="form-group">
<label for="taskInput" class="sr-only">Task</label>
<input type="text" class="form-control mr-2" id="taskInput" placeholder="Add Task">
</div>
<button type="submit" class="btn btn-primary">Add</button>
</form>
<pre><code> <ul class="list-group" id="taskList">
</ul>
<button class="btn btn-danger mt-3" id="clearBtn">Clear All Tasks</button>
</div>
</code></pre>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<script>
const addForm = document.querySelector('#addForm');
const taskList = document.querySelector('#taskList');
const clearBtn = document.querySelector('#clearBtn');
let tasks = [];
// Add Task
addForm.addEventListener('submit', (e) => {
e.preventDefault();
const taskInput = document.querySelector('#taskInput');
const task = taskInput.value.trim();
if (task.length) {
tasks.push(task);
updateTasks();
taskInput.value = '';
}
});
// Remove Task
taskList.addEventListener('click', (e) => {
if (e.target.classList.contains('delete')) {
const task = e.target.parentElement.textContent.trim();
const index = tasks.indexOf(task);
tasks.splice(index, 1);
updateTasks();
}
});
// Clear All Tasks
clearBtn.addEventListener('click', () => {
tasks = [];
updateTasks();
});
// Update Tasks
const updateTasks = () => {
taskList.innerHTML = '';
tasks.forEach((task) => {
const li = document.createElement('li');
li.classList.add('list-group-item', 'd-flex', 'justify-content-between', 'align-items-center');
li.innerHTML = `${task} <button type="button" class="btn btn-danger btn-sm delete">Delete</button>`;
taskList.appendChild(li);
});
};
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/wpt 著作权归作者所有。请勿转载和采集!