Scribd
Upload
30 views4 pages

To-Do List

The document is an HTML code for a simple To-Do List application. It includes a user interface with an input field for tasks, a button to add tasks, and a list to display them. The application allows users to add tasks and delete them using a delete button next to each task.

Uploaded by

bhavana.m.connect
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
30 views4 pages

To-Do List

The document is an HTML code for a simple To-Do List application. It includes a user interface with an input field for tasks, a button to add tasks, and a list to display them. The application allows users to add tasks and delete them using a delete button next to each task.

Uploaded by

bhavana.m.connect
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

<!

DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8”>

<title>Simple To-Do List</title>

<style>

Body {

Font-family: Arial, sans-serif;

Margin: 30px;

Background-color: #f4f4f4;

H1 {

Color: #333;

Input {

Padding: 10px;

Width: 250px;

Margin-right: 10px;

Border: 1px solid #ccc;

Border-radius: 5px;

Button {

Padding: 10px 15px;

Border: none;

Background-color: #28a745;

Color: white;

Border-radius: 5px;
Cursor: pointer;

Button:hover {

Background-color: #218838;

Ul {

List-style: none;

Padding: 0;

Margin-top: 20px;

Li {

Background-color: white;

Margin-bottom: 10px;

Padding: 10px;

Border-radius: 5px;

Display: flex;

Justify-content: space-between;

Align-items: center;

.delete-btn {

Background-color: #dc3545;

Color: white;

Border: none;

Padding: 5px 10px;

Border-radius: 5px;

Cursor: pointer;

}
.delete-btn:hover {

Background-color: #c82333;

</style>

</head>

<body>

<h1>My To-Do List</h1>

<input type=”text” id=”taskInput” placeholder=”Enter a task”>

<button onclick=”addTask()”>Add Task</button>

<ul id=”taskList”></ul>

<script>

Function addTask() {

Let task = document.getElementById(“taskInput”).value;

If (task === “”) {

Alert(“Please enter a task!”);

Return;

Let li = document.createElement(“li”);

li.textContent = task;

let deleteBtn = document.createElement(“button”);


deleteBtn.textContent = “Delete”;

deleteBtn.className = “delete-btn”;

deleteBtn.onclick = function() {

li.remove();

};

li.appendChild(deleteBtn);

document.getElementById(“taskList”).appendChild(li);

document.getElementById(“taskInput”).value = “”;

</script>

</body>

</html>

You might also like