From 625b750cd8cde9b81a176c91437e065f84baa2bf Mon Sep 17 00:00:00 2001 From: Alina Borozniak Date: Wed, 18 Jun 2025 11:19:08 +0300 Subject: [PATCH 1/3] Lab4 --- images/calendar.svg | 1 + images/cancel.svg | 22 +++ images/delete.svg | 4 + images/edit.svg | 4 + images/tick.svg | 4 + index.html | 195 +++++++++++++++++++- src/main.js | 33 ++++ style/style.css | 421 ++++++++++++++++++++++++++++++++++++++++++++ 8 files changed, 683 insertions(+), 1 deletion(-) create mode 100644 images/calendar.svg create mode 100644 images/cancel.svg create mode 100644 images/delete.svg create mode 100644 images/edit.svg create mode 100644 images/tick.svg diff --git a/images/calendar.svg b/images/calendar.svg new file mode 100644 index 0000000..89b1812 --- /dev/null +++ b/images/calendar.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/cancel.svg b/images/cancel.svg new file mode 100644 index 0000000..971b2e0 --- /dev/null +++ b/images/cancel.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/delete.svg b/images/delete.svg new file mode 100644 index 0000000..5618f76 --- /dev/null +++ b/images/delete.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/images/edit.svg b/images/edit.svg new file mode 100644 index 0000000..074aecd --- /dev/null +++ b/images/edit.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/images/tick.svg b/images/tick.svg new file mode 100644 index 0000000..eb038a3 --- /dev/null +++ b/images/tick.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/index.html b/index.html index 09c6dc0..c144a8a 100644 --- a/index.html +++ b/index.html @@ -3,11 +3,204 @@ - Simple HTML Page + To-Do List +
+

To-Do List

+
+ + +
+
+
+ + +
+ +
+ + +
+
+ +
+
+
+ + +
+ Complete the project + Medium +
+
+
+ May 1, 2024 +
+ + +
+
+
+ +
+
+ + +
+ Read the book + Low +
+
+
+ April 25, 2024 +
+ + +
+
+
+ +
+
+ + +
+ Go to the gym + High +
+
+
+ April 23, 2024 +
+ + +
+
+
+ +
+
+ + +
+ Make a doctor's appointment + Medium +
+
+
+ April 20, 2024 +
+ + +
+
+
+
+
+ + + + \ No newline at end of file diff --git a/src/main.js b/src/main.js index e69de29..761a599 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,33 @@ +const addTaskBtn = document.querySelector('.add-task-button'); +const editBtn = document.querySelectorAll('.edit-button'); +const taskForm = document.querySelector('.task-form'); +const cancelFormBtn = document.querySelector('.cancel-button'); +const filterSelect = document.querySelector('#filter-by'); +const dateFilterInput = document.querySelector('.date-filter-input'); +const applyFilterBtn = document.querySelector('#apply-filter'); + +addTaskBtn.addEventListener('click', () => { + taskForm.classList.remove('hidden'); +}); + +editBtn.forEach(button => { + button.addEventListener('click', () => { + taskForm.classList.remove('hidden'); + }); +}); + +cancelFormBtn.addEventListener('click', () => { + taskForm.classList.add('hidden'); +}); + +filterSelect.addEventListener('change', () => { + if (filterSelect.value === 'date') { + dateFilterInput.classList.remove('hidden'); + } else { + dateFilterInput.classList.add('hidden'); + } +}); + +applyFilterBtn.addEventListener('click', () => { + dateFilterInput.classList.add('hidden'); +}); diff --git a/style/style.css b/style/style.css index e69de29..fda1b5c 100644 --- a/style/style.css +++ b/style/style.css @@ -0,0 +1,421 @@ +* { + box-sizing: border-box; + font-family: Arial, sans-serif; +} + +body { + display: flex; + background-color: #f4f4f4; +} + +.to-do-container { + width: 600px; + margin: 0 auto; +} + +h1 { + text-align: center; +} + +.input-task-container { + display: flex; + gap: 10px; + margin-bottom: 20px; +} + +.task-input { + flex: 1; + padding: 10px 15px; + color: #333; + outline: none; +} + +.add-task-button { + padding: 10px 20px; + color: black; + cursor: pointer; +} + +.task-input, .add-task-button { + border-radius: 8px; + font-size: 18px; + background-color: #ffffff; + border: 1px solid #ccc; +} + +.add-task-button:active { + background-color: #f0f0f0; +} + +.sorting-and-filtering { + display: flex; + align-items: center; + margin-bottom: 20px; + justify-content: space-between; +} + +.sort, .filter { + display: flex; + gap: 10px; + padding: 10px; + background-color: #ffffff; + border: 1px solid #ccc; + border-radius: 8px; +} + +.sort-label, .filter-label { + font-size: 16px; + color: black; +} + +.sort select, .filter select { + font-size: 16px; + border: none; + color: #555; + cursor: pointer; + outline: none; +} + +.date-filter-input { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + display: flex; + flex-direction: column; + background-color: #ffffff; + border: 1px solid #e3e3e3; + gap: 10px; + padding: 15px; + border-radius: 8px; + width: 100%; + max-width: 250px; + box-shadow: 0 1px 6px rgba(0,0,0,0.1); +} + +.date-filter-input span { + margin: 0; + font-size: 18px; + font-weight: bold; + color: #333; +} + +.date-filter-input input[type="date"] { + width: 100%; + padding: 5px 10px; + border-radius: 6px; + background-color: #ffffff; + border: 1px solid #ccc; + font-size: 14px; + outline: none; +} + +.container-date-filter { + width: 100%; + padding: 8px 10px; + border: none; + border-radius: 6px; + background-color: #e9e9e9; +} + +.date-filter-input select { + width: 100%; + background-color: #e9e9e9; + font-size: 14px; + border: none; + outline: none; +} + +.date-filter-input input[type="date"] { + background-color: #ffffff; + border: 1px solid #e3e3e3; +} + +.date-filter-actions { + display: flex; + justify-content: flex-end; +} + +#apply-filter { + padding: 8px 16px; + background-color: #3b82f6; + color: white; + font-size: 14px; + border: none; + border-radius: 6px; + cursor: pointer; +} + +#apply-filter:active { + background-color: #0f59a8; +} + +.task-list { + display: flex; + flex-direction: column; + background-color: #ffffff; + border: 1px solid #ccc; + border-radius: 8px; + padding: 5px 15px; +} + +.task-item { + display: flex; + justify-content: space-between; + align-items: stretch; + padding: 10px 0px +} + +.task-item:not(:last-child) { + border-bottom: 1px solid #ddd; +} + +.left-side { + display: flex; + align-items: flex-start; + gap: 10px; +} + +.text-block, .buttons { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: space-between; + height: 100%; +} + +.task-text { + font-size: 18px; +} + +.tag { + display: inline-block; + font-size: 16px; + padding: 3px 8px; + border-radius: 8px; +} + +.tag.low { + background-color: #e9e9e9; + color: #555; +} + +.tag.medium { + background-color: #f1820b; + color: #fff; +} + +.tag.high { + background-color: #f25c54; + color: #fff; +} + +.right-side { + display: flex; + align-items: flex-start; + gap: 18px; +} + +.task-date { + font-size: 18px; + color: #888; +} + +.edit-button, .delete-button { + width: 20px; + height: 20px; + padding: 0; + border: none; + background: none; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; +} + +.edit-button img, .delete-button img { + width: 100%; + height: 100%; + object-fit: contain; + display: block; +} + +.custom-checkbox input { + display: none; +} + +.custom-checkbox .checkmark { + display: inline-block; + position: relative; + width: 20px; + height: 20px; + border-radius: 50%; + border: 2px solid #888; + cursor: pointer; +} + +.custom-checkbox input:checked + .checkmark::after { + content: ''; + position: absolute; + width: 100%; + height: 100%; + background-image: url('../images/tick.svg'); + background-repeat: no-repeat; + background-size: contain; + background-position: center; +} + +.task-form { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + display: flex; + flex-direction: column; + gap: 16px; + + width: 100%; + max-width: 400px; + + padding: 20px; + + background-color: #fdfdfd; + border: 1px solid #ddd; + border-radius: 8px; + box-shadow: 0 1px 6px rgba(0,0,0,0.1); +} + +.form-name { + display: flex; + justify-content: space-between; + align-items: center; +} + +.task { + font-size: 22px; + font-weight: bold; +} + +.cancel-image-button { + width: 20px; + height: 20px; + padding: 0; + border: none; + background: none; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; +} + +.cancel-image-button img { + width: 100%; + height: 100%; + object-fit: contain; +} + +.add-task, .add-date, .add-priority { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 5px; +} + +.task-name label, .task-date label, .task-priority label { + font-size: 14px; +} + +.add-task input, .add-date input { + width: 100%; + padding: 10px; + border-radius: 4px; + border: 1px solid #ccc; + color: #626262; + outline: none; +} + +.form-buttons { + display: flex; + gap: 5px; +} + +.add-button, .cancel-button { + flex: 1; + padding: 8px 0px; + font-size: 16px; +} + +.add-button { + background-color: #3b82f6; + color: white; + border: none; + border-radius: 6px; + cursor: pointer; +} + +.cancel-button { + background-color: #fdfdfd; + color: #626262; + border: 2px solid #ccc; + border-radius: 6px; + cursor: pointer; +} + +.add-button:active { + background-color: #0f59a8; +} + +.cancel-button:active { + background-color: #f0f0f0;; +} + +.custom-radio { + display: flex; + align-items: center; + cursor: pointer; +} + +.priority-options { + display:flex; + justify-content: space-between; + width: 100%; +} + +.custom-radio input { + display: none; +} + +.custom-radio .radio-mark { + width: 20px; + height: 20px; + border-radius: 50%; + border: 2px solid #888; + margin-right: 8px; +} + +.custom-radio input:checked + .radio-mark { + border: 4px solid #3b82f6; +} + +.hidden { + display: none; +} + +.custom-date-picker { + position: relative; + width: 100%; +} + +.custom-date-picker input[type="date"]::-webkit-calendar-picker-indicator { + opacity: 0; +} + +.custom-date-picker .calendar-icon { + position: absolute; + top: 50%; + right: 10px; + transform: translateY(-50%); + pointer-events: none; +} \ No newline at end of file From 3994049993ed1960c52c6f4baf463aa4566f853d Mon Sep 17 00:00:00 2001 From: Alina Borozniak Date: Mon, 23 Jun 2025 13:46:08 +0300 Subject: [PATCH 2/3] Lab5 --- index.html | 60 +++---- src/main.js | 430 +++++++++++++++++++++++++++++++++++++++++++++--- style/style.css | 242 +++++++++++++-------------- task.json | 26 +++ 4 files changed, 585 insertions(+), 173 deletions(-) create mode 100644 task.json diff --git a/index.html b/index.html index c144a8a..62a6f0f 100644 --- a/index.html +++ b/index.html @@ -4,34 +4,27 @@ To-Do List +
-

To-Do List

-
- - +
+

To-Do List

+
-
+
-
- -
- -
+
@@ -48,8 +41,8 @@

To-Do List

- May 1, 2024 -
+ 2025-05-01 +
@@ -73,8 +66,8 @@

To-Do List

- April 25, 2024 -
+ 2025-04-25 +
@@ -98,8 +91,8 @@

To-Do List

- April 23, 2024 -
+ 2025-04-23 +
@@ -123,8 +116,8 @@

To-Do List

- April 20, 2024 -
+ 2025-04-20 +
@@ -137,13 +130,14 @@

To-Do List

- -