-
Notifications
You must be signed in to change notification settings - Fork 1
/
task management.html
152 lines (137 loc) · 3.59 KB
/
task management.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Task Management Application</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
margin-top: 10%;
border-radius: 10%;
background-color: #c5eabe;
}
.container {
max-width: 500px;
max-height: 400px;
margin: 20px auto;
padding: 20px;
background-color: #f2f8f3;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(206, 15, 15, 0.1);
}
h1 {
text-align: center;
color: brown;
}
form {
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
input[type="text"], textarea {
margin-bottom: 10px;
padding: 8px;
border-radius: 4px;
border: 1px solid #ccc;
}
input[type="submit"] {
background-color: #535bfc;
color: #fff;
border: none;
padding: 10px;
border-radius: 4px;
cursor: pointer;
}
.task-list {
list-style-type: none;
padding: 0;
}
.task {
margin-bottom: 10px;
padding: 10px;
border-radius: 4px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.completed {
background-color: #f0f8ff; /* Light blue */
text-decoration: line-through;
}
.task-actions {
display: flex;
justify-content: space-between;
align-items: center;
}
.task-actions button {
padding: 6px 12px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.delete-btn {
background-color: #f44336; /* Red */
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<h1>Task Management Application</h1>
<form id="task-form">
<input type="text" id="task-title" placeholder="Task Title" required>
<textarea id="task-description" placeholder="Task Description" required></textarea>
<input type="submit" value="Add Task">
</form>
<ul class="task-list" id="task-list">
<!-- Tasks will be dynamically added here -->
</ul>
</div>
<script>
const form = document.getElementById("task-form");
const taskList = document.getElementById("task-list");
form.addEventListener("submit", function(event) {
event.preventDefault();
// Get task title and description from form
const title = document.getElementById("task-title").value;
const description = document.getElementById("task-description").value;
// Add task to task list
addTask(title, description);
// Reset form fields
form.reset();
});
// Function to add a new task
function addTask(title, description) {
// Create task element
const task = document.createElement("li");
task.classList.add("task");
// Create task content
const taskContent = `
<div>
<h3>${title}</h3>
<p>${description}</p>
</div>
<div class="task-actions">
<button class="complete-btn">Mark as Completed</button>
<button class="delete-btn">Delete</button>
</div>
`;
task.innerHTML = taskContent;
// Add event listeners for task actions
const completeBtn = task.querySelector(".complete-btn");
const deleteBtn = task.querySelector(".delete-btn");
completeBtn.addEventListener("click", function() {
task.classList.toggle("completed");
});
deleteBtn.addEventListener("click", function() {
task.remove();
});
// Append task to task list
taskList.appendChild(task);
alert("saved")
}
</script>
</body>
</html>