-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathSimple & Responsive Task Manager
163 lines (142 loc) · 4.27 KB
/
Simple & Responsive Task Manager
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
153
154
155
156
157
158
159
160
161
162
163
Simple & Responsive Task Manager USING HTML CSS JS
______________________________________________________
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List</title>
<style>
/* Reset some default styling */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Basic page styling */
body {
font-family: Arial, sans-serif;
background-color: #f0f4f8;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
/* Container for the to-do list with new background color */
.todo-container {
width: 300px;
background: #B9E5E8; /* Light blue background */
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
/* Title styling with new color */
h2 {
font-size: 24px;
margin-bottom: 20px;
color: #7AB2D3; /* Primary color */
text-align: center;
}
/* Styling for the task list */
.task-list {
list-style: none;
}
/* Individual task items */
.task {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid #eee;
font-size: 18px;
color: #555;
}
/* Checkbox styling */
.task input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
}
/* Add task input and button container */
.add-task-container {
display: flex;
margin-top: 20px;
}
/* Input for new task */
.new-task-input {
flex: 1;
padding: 8px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 4px 0 0 4px;
}
/* Add task button with primary color */
.add-task {
padding: 10px;
font-size: 16px;
background-color: #7AB2D3; /* Primary color */
color: #fff;
border: none;
cursor: pointer;
border-radius: 0 4px 4px 0;
}
/* Hover effect with accent color */
.add-task:hover {
background-color: #EB3678; /* Accent color */
}
</style>
</head>
<body>
<div class="todo-container">
<h2>To-Do List</h2>
<ul class="task-list" id="taskList">
<li class="task">
<label>
<input type="checkbox"> Buy groceries
</label>
</li>
<li class="task">
<label>
<input type="checkbox"> Study C++
</label>
</li>
<li class="task">
<label>
<input type="checkbox"> Walk the dog
</label>
</li>
</ul>
<!-- New task input and button -->
<div class="add-task-container">
<input type="text" id="newTaskInput" class="new-task-input" placeholder="New task...">
<button class="add-task" onclick="addTask()">Add Task</button>
</div>
</div>
<script>
// JavaScript function to add a new task
function addTask() {
// Get the value from the input
const taskInput = document.getElementById('newTaskInput');
const taskText = taskInput.value.trim();
// Check if input is not empty
if (taskText) {
// Create a new list item for the task
const newTask = document.createElement('li');
newTask.classList.add('task');
// Add HTML structure for the task (checkbox and label)
newTask.innerHTML = `
<label>
<input type="checkbox"> ${taskText}
</label>
`;
// Append the new task to the task list
document.getElementById('taskList').appendChild(newTask);
// Clear the input field
taskInput.value = '';
} else {
alert("Please enter a task!");
}
}
</script>
</body>
</html>