Here's a complete example of a responsive Todo List web page with HTML, CSS, and JavaScript. It includes core features like adding, completing, and deleting todos:
HTML (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Todo List</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="todo-container">
<h1>Todo List</h1>
<div class="add-todo">
<input type="text" id="todo-input" placeholder="Add a new todo...">
<button id="add-btn">Add Todo</button>
</div>
<ul id="todo-list"></ul>
</div>
<script src="script.js"></script>
</body>
</html>CSS (styles.css)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
body {
background-color: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.todo-container {
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
width: 100%;
max-width: 500px;
}
h1 {
color: #333;
text-align: center;
margin-bottom: 1.5rem;
}
.add-todo {
display: flex;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
#todo-input {
flex: 1;
padding: 0.8rem;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 1rem;
}
#add-btn {
padding: 0.8rem 1.5rem;
border: none;
background-color: #2196F3;
color: white;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
transition: background-color 0.3s;
}
#add-btn:hover {
background-color: #1976D2;
}
#todo-list {
list-style: none;
}
.todo-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.8rem;
border-bottom: 1px solid #eee;
transition: background-color 0.3s;
}
.todo-item:hover {
background-color: #f9f9f9;
}
.todo-text {
cursor: pointer;
}
.todo-text.completed {
text-decoration: line-through;
color: #888;
}
.todo-actions {
display: flex;
gap: 0.5rem;
}
.complete-btn, .delete-btn {
padding: 0.5rem 0.8rem;
border: none;
border-radius: 3px;
cursor: pointer;
font-size: 0.9rem;
}
.complete-btn {
background-color: #4CAF50;
color: white;
}
.delete-btn {
background-color: #f44336;
color: white;
}
/* Responsive adjustments */
@media (max-width: 400px) {
.todo-container {
padding: 1.5rem;
}
.add-todo {
flex-direction: column;
}
}JavaScript (script.js)
// Select elements
const todoInput = document.getElementById('todo-input');
const addBtn = document.getElementById('add-btn');
const todoList = document.getElementById('todo-list');
// Add todo function
function addTodo() {
const todoText = todoInput.value.trim();
if (todoText === '') return; // Ignore empty input
// Create todo item element
const todoItem = document.createElement('li');
todoItem.classList.add('todo-item');
// Todo text
const todoTextElement = document.createElement('span');
todoTextElement.classList.add('todo-text');
todoTextElement.textContent = todoText;
todoTextElement.addEventListener('click', toggleComplete);
// Actions (complete and delete buttons)
const actionsDiv = document.createElement('div');
actionsDiv.classList.add('todo-actions');
const completeBtn = document.createElement('button');
completeBtn.classList.add('complete-btn');
completeBtn.textContent = 'Complete';
completeBtn.addEventListener('click', toggleComplete);
const deleteBtn = document.createElement('button');
deleteBtn.classList.add('delete-btn');
deleteBtn.textContent = 'Delete';
deleteBtn.addEventListener('click', () => todoItem.remove());
// Assemble todo item
actionsDiv.appendChild(completeBtn);
actionsDiv.appendChild(deleteBtn);
todoItem.appendChild(todoTextElement);
todoItem.appendChild(actionsDiv);
// Add to list
todoList.appendChild(todoItem);
// Clear input
todoInput.value = '';
}
// Toggle complete status
function toggleComplete(e) {
const todoText = e.target.closest('.todo-item').querySelector('.todo-text');
todoText.classList.toggle('completed');
}
// Event listeners
addBtn.addEventListener('click', addTodo);
todoInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') addTodo();
});Key Features:
- Responsive Design: Works on mobile and desktop (adjusts layout for small screens).
- Add Todo: Type a task and click "Add Todo" or press Enter.
- Complete Todo: Click the todo text or "Complete" button to mark as done (strikethrough).
- Delete Todo: Click the "Delete" button to remove a task.
- Clean UI: Modern, minimal design with hover effects and shadows.
To use this, save the three files in the same folder and open index.html in a browser. It's self-contained and requires no external libraries. You can customize the colors, fonts, and layout by modifying the CSS.
（免责声明：本文为本网站出于传播商业信息之目的进行转载发布，不代表本网站的观点及立场。本文所涉文、图、音视频等资料的一切权利和法律责任归材料提供方所有和承担。本网站对此资讯文字、图片等所有信息的真实性不作任何保证或承诺，亦不构成任何购买、投资等建议，据此操作者风险自担。） 本文为转载内容，授权事宜请联系原著作权人，如有侵权，请联系本网进行删除。
