Skip to content

Commit b6d4376

Browse files
QyeaQyea
committed
Homework 6
1 parent 0fafbe1 commit b6d4376

File tree

4 files changed

+280
-0
lines changed

4 files changed

+280
-0
lines changed

‎Homework6/README.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Home task 6
2+
3+
## Todo App
4+
5+
### Create an application consists of three parts
6+
7+
**Add tasks form**
8+
Allows you to add tasks to the list. Task fields available for filling (only
9+
the title is required):
10+
● Heading
11+
● Description
12+
● Date
13+
● Priority (dropdown list with more than one value) After adding a
14+
task to the list, the form fields are reset (clean) to their initial value
15+
(all except the date).
16+
17+
**Filter for task list**
18+
The filter controls which tasks will be available in the list below. The filter
19+
allows you to adjust the following settings
20+
● whether to show completed tasks
21+
● text search (case insensitive, search in both title and description)
22+
● filter by date (minimum and maximum dates - both can be
23+
specified, one can be any, none)
24+
25+
**Task list**
26+
Displays the list of tasks in table form. The table header contains
27+
controls that allow you to sort the table by column (in forward and
28+
reverse order
29+
30+
> **PS:** I really hope that I have completed **all** the requirements.

‎Homework6/index.html‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Todo App</title>
7+
<link rel="preconnect" href="https://fonts.googleapis.com" />
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
11+
rel="stylesheet"
12+
/>
13+
<link rel="stylesheet" href="./style.css" />
14+
</head>
15+
<body>
16+
<div class="add-task-section">
17+
<h1>Add Task</h1>
18+
<form id="addTaskForm">
19+
<div class="task-header">
20+
<label for="title">Title:</label>
21+
<input type="text" id="title" required /><br /><br />
22+
23+
<label for="date">Date:</label>
24+
<input type="date" id="date" /><br /><br />
25+
26+
<label for="priority">Priority:</label>
27+
<select id="priority">
28+
<option value="low">Low</option>
29+
<option value="medium">Medium</option>
30+
<option value="high">High</option></select
31+
><br /><br />
32+
</div>
33+
34+
<div class="description">
35+
<label for="description">Description:</label>
36+
<textarea type="text" id="description"></textarea><br /><br />
37+
</div>
38+
39+
<button class="add-button" type="submit">Add</button>
40+
</form>
41+
</div>
42+
43+
<div class="add-task-section">
44+
<h2>Filter</h2>
45+
<label>Show completed tasks:</label>
46+
<input type="checkbox" id="showCompleted" checked="checked" />
47+
<br /><br />
48+
49+
<label>Search:</label>
50+
<input type="text" id="search" />
51+
<br /><br />
52+
53+
<label>Minimum Date:</label>
54+
<input type="date" id="minDate" />
55+
<br /><br />
56+
57+
<label>Maximum Date:</label>
58+
<input type="date" id="maxDate" />
59+
<br /><br />
60+
</div>
61+
62+
<div class="add-task-section">
63+
<h2>Task List</h2>
64+
<table>
65+
<thead>
66+
<tr>
67+
<th>Completed</th>
68+
<th>Title</th>
69+
<th>Description</th>
70+
<th>Date</th>
71+
<th>Priority</th>
72+
</tr>
73+
</thead>
74+
<tbody id="taskList"></tbody>
75+
</table>
76+
</div>
77+
</body>
78+
<script src="./main.js" defer></script>
79+
</html>

‎Homework6/main.js‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
const addTaskForm = document.getElementById('addTaskForm');
2+
const taskList = document.getElementById('taskList');
3+
const showCompletedCheckbox = document.getElementById('showCompleted');
4+
const searchInput = document.getElementById('search');
5+
const minDateInput = document.getElementById('minDate');
6+
const maxDateInput = document.getElementById('maxDate');
7+
8+
let tasks = [];
9+
10+
addTaskForm.addEventListener('submit', function (event) {
11+
event.preventDefault();
12+
13+
const titleInput = document.getElementById('title');
14+
const descriptionInput = document.getElementById('description');
15+
const dateInput = document.getElementById('date');
16+
const priorityInput = document.getElementById('priority');
17+
18+
const task = {
19+
title: titleInput.value,
20+
description: descriptionInput.value,
21+
date: dateInput.value,
22+
priority: priorityInput.value,
23+
completed: false,
24+
};
25+
26+
tasks.push(task);
27+
renderTaskList();
28+
addTaskForm.reset();
29+
});
30+
31+
function renderTaskList() {
32+
const showCompleted = showCompletedCheckbox.checked;
33+
const searchKeyword = searchInput.value.toLowerCase();
34+
const minDate = minDateInput.value;
35+
const maxDate = maxDateInput.value;
36+
37+
const filteredTasks = tasks.filter((task) => {
38+
if (!showCompleted && task.completed) {
39+
return false;
40+
}
41+
42+
if (
43+
searchKeyword &&
44+
!task.title.toLowerCase().includes(searchKeyword) &&
45+
!task.description.toLowerCase().includes(searchKeyword)
46+
) {
47+
return false;
48+
}
49+
50+
if (minDate && task.date < minDate) {
51+
return false;
52+
}
53+
54+
if (maxDate && task.date > maxDate) {
55+
return false;
56+
}
57+
58+
return true;
59+
});
60+
61+
taskList.innerHTML = '';
62+
63+
filteredTasks.forEach((task) => {
64+
const row = document.createElement('tr');
65+
const completedCell = document.createElement('td');
66+
const titleCell = document.createElement('td');
67+
const descriptionCell = document.createElement('td');
68+
const dateCell = document.createElement('td');
69+
const priorityCell = document.createElement('td');
70+
71+
let checkbox = document.createElement('input');
72+
checkbox.type = 'checkbox';
73+
checkbox.checked = task.completed;
74+
75+
checkbox.addEventListener('change', () => {
76+
task.completed = !task.completed;
77+
});
78+
79+
completedCell.appendChild(checkbox);
80+
titleCell.textContent = task.title;
81+
descriptionCell.textContent = task.description;
82+
dateCell.textContent = task.date;
83+
priorityCell.textContent = task.priority;
84+
85+
row.appendChild(completedCell);
86+
row.appendChild(titleCell);
87+
row.appendChild(descriptionCell);
88+
row.appendChild(dateCell);
89+
row.appendChild(priorityCell);
90+
91+
taskList.appendChild(row);
92+
});
93+
}
94+
95+
showCompletedCheckbox.addEventListener('change', renderTaskList);
96+
searchInput.addEventListener('input', renderTaskList);
97+
minDateInput.addEventListener('change', renderTaskList);
98+
maxDateInput.addEventListener('change', renderTaskList);
99+
100+
renderTaskList();

‎Homework6/style.css‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
body {
2+
font-family: Inter;
3+
color: black;
4+
}
5+
6+
h1 {
7+
margin: 0;
8+
padding: 1rem;
9+
background-color: rgb(10, 156, 127);
10+
color: white;
11+
}
12+
13+
table {
14+
width: 100%;
15+
border-collapse: collapse;
16+
}
17+
18+
thead {
19+
background-color: rgb(10, 156, 127);
20+
color: white;
21+
}
22+
23+
th,
24+
td {
25+
padding: 8px;
26+
text-align: left;
27+
border-bottom: 1px solid #ddd;
28+
}
29+
30+
input[type='checkbox'] {
31+
accent-color: rgb(10, 91, 85);
32+
}
33+
34+
select {
35+
color: rgb(10, 91, 85);
36+
}
37+
38+
.task-header {
39+
display: flex;
40+
align-items: center;
41+
gap: 0.75rem;
42+
}
43+
44+
.description {
45+
display: flex;
46+
flex-direction: column;
47+
}
48+
49+
.add-button {
50+
padding: 0.5rem 0.75rem;
51+
background-color: rgb(10, 156, 127);
52+
color: white;
53+
border: none;
54+
border-radius: 0.25rem;
55+
56+
&:hover {
57+
background-color: rgb(10, 91, 85);
58+
}
59+
}
60+
61+
.add-task-section {
62+
padding: 0 0 1rem;
63+
border-bottom: 2px dashed rgb(10, 156, 127);
64+
}
65+
66+
#addTaskForm {
67+
padding: 1rem 1rem 0;
68+
display: flex;
69+
flex-direction: column;
70+
gap: 1rem;
71+
}

0 commit comments

Comments
 (0)