**HTML:**
```html
<!DOCTYPE html>
<html>
<head>
<title>To-Do List</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container">
<h1>To-Do List</h1>
<input type="text" id="taskInput" placeholder="Enter task...">
<button id="addButton">Add Task</button>
<ul id="taskList"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
```
**CSS (styles.css):**
```css
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
}
input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f9f9f9;
padding: 10px;
margin-bottom: 5px;
border-radius: 3px;
}
.delete-button {
background-color: #dc3545;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}
```
**JavaScript (script.js):**
```javascript
const taskInput = document.getElementById("taskInput");
const addButton = document.getElementById("addButton");
const taskList = document.getElementById("taskList");
addButton.addEventListener("click", addTask);
function addTask() {
const taskText = taskInput.value;
if (taskText.trim() === "") return;
const li = document.createElement("li");
li.innerHTML = `
<span>${taskText}</span>
<button class="delete-button">Delete</button>
`;
const deleteButton = li.querySelector(".delete-button");
deleteButton.addEventListener("click", () => {
taskList.removeChild(li);
});
taskList.appendChild(li);
taskInput.value = "";
}
```
This simple To-Do List project allows users to add tasks and delete them. When the "Add Task" button is clicked, a new task is added to the list with a delete button. Clicking the delete button removes the corresponding task from the list.
Remember to have the HTML, CSS, and JavaScript files in the same directory and open the HTML file in a web browser to see the project in action. This is just a starting point, and you can enhance the project by adding more features like editing tasks, marking tasks as completed, or using local storage to save tasks.
0 Comments