TO DO LIST

[mounika-aids]

This project is designed to help users manage their daily tasks efficiently with features like adding, editing, and deleting tasks. It improved my skills in UI design, CRUD operations, and user-friendly workflow development.

I’m continuously learning and working on enhancing the functionality to make it more useful and efficient.
Check out my project and feel free to share your feedback!

HTML :

<title>To-Do List</title>

<h2>To-Do List App</h2>
<div class="todo-container">
    <input type="text" id="taskInput" placeholder="Enter a task">
    <button onclick="addTask()">Add</button>
</div>

<ul id="taskList"></ul>

<script src="script.js"></script>

Css:

body {
font-family: Arial, sans-serif;
text-align: center;
background: #f2f2f2;
}

.todo-container {
margin-top: 20px;
}

input {
padding: 10px;
width: 250px;
}

button {
padding: 10px;
cursor: pointer;
background: #007bff;
color: #fff;
border: none;
}

ul {
margin-top: 20px;
list-style: none;
padding: 0;
}

li {
background: #fff;
padding: 10px;
margin: 8px auto;
width: 300px;
border-radius: 5px;
display: flex;
justify-content: space-between;
}

JavaScript:

let taskList = document.getElementById("taskList");

function addTask() {
let taskInput = document.getElementById("taskInput");
let taskValue = taskInput.value.trim();

if (taskValue === "") return alert("Please enter a task!");

let li = document.createElement("li");
li.innerHTML = `
    ${taskValue}
    <button onclick="removeTask(this)">❌</button>
`;

taskList.appendChild(li);
taskInput.value = "";

}

function removeTask