diff --git a/index.html b/index.html index 09c6dc0..0d7b38f 100644 --- a/index.html +++ b/index.html @@ -3,11 +3,142 @@ - Simple HTML Page + To do list +
+

To-Do List

+
+ + +
+ +
+
+ Sort by: + +
+
+ Filter: + +
+
+ +
+
+ +
+ Купити файні льоди + Medium +
+
+ June 26, 2025 +
+ + +
+
+
+ +
+ +
+ Зробити веб + High +
+
+ June 18, 2025 +
+ + +
+
+ +
+ +
+ +
+ Спекти хліб + Low +
+
+ June 21, 2025 +
+ + +
+
+
+ +
+ +
+ Купити наповнювач Мілашці + High +
+
+ June 18, 2025 +
+ + +
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/src/main.js b/src/main.js index e69de29..fe6ba7b 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,38 @@ +const taskPopUp = document.getElementById('taskPopUp'); +const openBtn = document.getElementById('add-button'); +const closeBtn = document.getElementById('closePopUpBtn'); +const cancelBtn = document.getElementById('cancelPopUpBtn'); + +const filterByDate = document.getElementById('filterByDate'); +const filetDateBtn = document.getElementById('sortSelect'); +const applyBtn = document.getElementById('apply-button'); + +const checkButtons = document.querySelectorAll('.checkbox-btn'); + +openBtn.addEventListener('click', () => { + taskPopUp.classList.remove('hidden'); +}); + +closeBtn.addEventListener('click', () => { + taskPopUp.classList.add('hidden'); +}); + +cancelBtn.addEventListener('click', () => { + taskPopUp.classList.add('hidden'); +}); + +filetDateBtn.addEventListener('click', () => { + filterByDate.classList.remove('hidden'); +}); + +applyBtn.addEventListener('click', () => { + filterByDate.classList.add('hidden'); +}); + +checkButtons.forEach(button => { + button.addEventListener('click', () => { + button.classList.toggle('checked'); + }); +}); + + diff --git a/style/style.css b/style/style.css index e69de29..8e75ee5 100644 --- a/style/style.css +++ b/style/style.css @@ -0,0 +1,349 @@ +body { + margin: 0; + padding: 0; +} + +.container { + max-width: 900px; + margin: 40px auto; + background-color: rgb(255, 224, 224); + padding: 24px; + border-radius: 12px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +.title { + text-align: center; + margin-bottom: 20px; +} + +.input-section { + display: flex; + gap: 10px; + margin-bottom: 20px; +} + +.task-input { + flex: 1; + padding: 10px; + border: 2px solid rgb(248, 204, 204); + border-radius: 8px; +} + +.add-button { + padding: 10px; + border: none; + background-color: white; + border: 2px solid rgb(248, 204, 204); + border-radius: 8px; + cursor: pointer; +} + +.controls { + display: flex; + justify-content: space-between; + margin-bottom: 20px; +} + +.sort { + display: flex; + align-items: center; + gap: 5px; + background-color: white; + border: 2px solid rgb(248, 204, 204); + border-radius: 6px; + padding-left: 10px; + padding-right: 7%; + padding-top: 6px; + padding-bottom: 6px; +} + +.select { + border: none; +} + +.task-list { + display: flex; + flex-direction: column; + border: 2px solid rgb(248, 204, 204); + background-color: white; + border-radius: 5px; +} + +.task { + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 2px solid rgb(248, 204, 204); + padding: 8px; +} + +.task-title { + font-size: 18px; +} + +.task.completed .task-title { + text-decoration: line-through; + color: #777; +} + +.task-info { + display: flex; + flex-direction: column; + gap: 4px; + flex: 1; + margin-left: 10px; +} + +.checkbox-btn { + width: 20px; + height: 20px; + border-radius: 50%; + border: 2px solid #ccc; + background-color: #fff; + position: relative; + cursor: pointer; +} + +.checkbox-btn.checked::after { + border-color: #666; + color: #9d9d9d; + content: "✓"; + position: absolute; + transform: translate(-50%, -50%); +} + +.right-side { + display: flex; + align-items: center; + gap: 5px; + font-size: 18px; + color: #666; +} + +.task-actions { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 3px; +} + +@media (max-width: 500px) { + .task-actions { + display: none; + } +} + +.edit-btn, +.delete-btn { + background: none; + border-radius: 4px; + border: 2px solid rgb(248, 204, 204); + font-size: 13px; + cursor: pointer; + color: #a00808; + opacity: 0.7; +} + +.edit-btn:hover, +.delete-btn:hover { + opacity: 1; +} + +.priority { + display: inline-block; + padding: 2px 10px; + border-radius: 8px; + font-size: 12px; + font-weight: 600; + color: white; + width: fit-content; +} + +.priority.low { + background-color: #83c49e; +} + +.priority.medium { + background-color: #f4a261; +} + +.priority.high { + background-color: #dc1021a2; +} + +.hidden { + display: none !important; +} + +.taskPopUp { + position: absolute; + top: 100px; + left: 50%; + transform: translateX(-50%); + z-index: 999; +} + +.popUp-content { + background-color: #fff; + padding: 24px; + border-radius: 12px; + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); + width: 300px; +} + +.popUp-content h2 { + font-size: 30px; + margin-bottom: 20px; +} + +.popUp-content input[type="text"], +.popUp-content input[type="date"] { + align-self: center; + + padding: 14px; + margin-top: 6px; + margin-bottom: 20px; + + width: 80%; + border: 1px solid #d1d5db; + border-radius: 8px; + font-size: 14px; + color: #111827; + background-color: #f9fafb; +} + +.popUp-content label { + display: block; + font-size: 17px; + margin-bottom: 4px; + color: #111; +} + +.priority-options { + display: flex; + justify-content: space-between; + margin-top: 8px; + margin-bottom: 24px; +} + +.priority-options label { + font-size: 14px; + display: flex; + align-items: center; + gap: 6px; + color: #111827; +} + +.popUp-buttons { + display: flex; + justify-content: space-between; + margin-top: 20px; +} + +.add-task-btn { + background-color: #f397bc; + color: white; + border: none; + padding: 10px 18px; + border-radius: 8px; + cursor: pointer; + font-size: 14px; + transition: background-color 0.2s ease-in-out; +} + +.add-task-btn:hover { + background-color: #f777aa; +} + +.cancel-btn { + background-color: #fff; + color: #111827; + border: 1px solid #d1d5db; + padding: 10px 18px; + border-radius: 8px; + cursor: pointer; + font-size: 14px; +} + +.cancel-btn:hover { + background-color: #f3f4f6; +} + +.close-btn { + position: absolute; + top: 16px; + right: 20px; + font-size: 24px; + color: #6b7280; + cursor: pointer; + transition: color 0.2s; +} + +.close-btn:hover { + color: #111827; +} + +.filterByDate { + position: absolute; + top: 100px; + left: 50%; + transform: translateX(-50%); + z-index: 999; +} + +.filterByDate-content { + background-color: #fff; + padding: 24px; + border-radius: 12px; + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); + width: 300px; +} + +.filterByDate-title { + font-size: 20px; + margin-bottom: 20px; +} + +.filterByDate-select { + width: 100%; + padding: 10px; + border-radius: 8px; + border: 1px solid #ccc; + font-size: 16px; + margin-bottom: 16px; +} + +.date-field { + position: relative; +} + +.filterByDate-date { + width: 93%; + padding: 10px; + border-radius: 8px; + border: 1px solid #ccc; + font-size: 16px; + margin-bottom: 16px; +} + +.button-wrapper { + display: flex; + justify-content: flex-end; +} + +.apply-button { + width: 40%; + background-color: #f397bc; + color: white; + padding: 10px; + border: none; + border-radius: 8px; + font-size: 16px; + cursor: pointer; +} + +.apply-button:hover { + background-color: #f777aa; +}