Task Management Tool

Written by

in

Task Management Tool

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
&lt;meta charset="UTF-8">
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0">
&lt;title>Task Management Tool&lt;/title>
&lt;link rel="stylesheet" href="styles.css"></head>
<body>
&lt;div class="container">
    &lt;h1>Task Manager&lt;/h1>
    &lt;input type="text" id="taskInput" placeholder="Add a new task...">
    &lt;button id="addTaskButton">Add Task&lt;/button>
    &lt;ul id="taskList">&lt;/ul>
&lt;/div>
&lt;script src="script.js">&lt;/script></body>
</html>

CSS (styles.css)

body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;}

.container {
max-width: 600px;
margin: auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}

h1 {
text-align: center;}

input[type="text"] {
width: 70%;
padding: 10px;
margin-right: 10px;
border: 1px solid #ccc;
border-radius: 4px;}

button {
padding: 10px;
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;}

button:hover {
background-color: #218838;}

ul {
list-style: none;
padding: 0;}

li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
border-bottom: 1px solid #ddd;}

li.completed {
text-decoration: line-through;
color: #aaa;}

.delete-button {
background: none;
border: none;
color: #dc3545;
cursor: pointer;}

JavaScript (script.js)

document.getElementById('addTaskButton').addEventListener('click', addTask);
document.getElementById('taskInput').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
    addTask();
}});

function addTask() {
const taskInput = document.getElementById('taskInput');
const taskText = taskInput.value.trim();

if (taskText === '') {
    alert('Please enter a task');
    return;
}
const li = document.createElement('li');
li.textContent = taskText;
const completeButton = document.createElement('button');
completeButton.textContent = '✓';
completeButton.onclick = () => {
    li.classList.toggle('completed');
};

const deleteButton = document.createElement('button');
deleteButton.textContent = '✖';
deleteButton.classList.add('delete-button');
deleteButton.onclick = () => {
    li.remove();
};
li.appendChild(completeButton);
li.appendChild(deleteButton);
document.getElementById('taskList').appendChild(li);

taskInput.value = '';}

How to Run

Create a Project Directory: Create a folder for your project, e.g., task-manager.
Create Files: Inside this folder, create three files: index.html, styles.css, and script.js.
Copy the Code: Copy the HTML, CSS, and JavaScript code provided above into their respective files.
Open in a Browser: Open index.html in your web browser to see the task management tool in action.

Comments

Leave a Reply Cancel reply

More posts