Skip to content

hw5 #40

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
karnavka wants to merge 1 commit into
base: main
Choose a base branch
from
Open

hw5 #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
133 changes: 132 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,142 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple HTML Page</title>
<title>To do list</title>
<link rel="stylesheet" href="./style/style.css">
<script src="./src/main.js" defer></script>
</head>
<body>
<div class="container">
<h1 class="title">To-Do List</h1>

<div class="input-section">
<input type="text" placeholder="Add a new task" class="task-input">
<button id="add-button" class="add-button">Add</button>
</div>

<div class="controls">
<div class="sort">
<span class="label">Sort by:</span>
<select class="select">
<option> <span class="option">Filter</option>span></option>
<option> <span class="option">Data</option>span></option>
</select>
</div>
<div class="sort">
Filter:
<select class="select" id="sortSelect">
<option>All</option>
<option id="dateSort">Date</option>
</select>
</div>
</div>

<div class="task-list">
<div class="task">
<button class="checkbox-btn" > </button>
<div class="task-info">
<span class="task-title">Купити файні льоди</span>
<span class="priority medium">Medium</span>
</div>
<div class="right-side">
<span class="date">June 26, 2025</span>
<div class ="task-actions">
<button class="edit-btn" >🖉</button>
<button class="delete-btn" >🗑️</button>
</div>
</div>
</div>

<div class="task completed">
<button class="checkbox-btn checked" > </button>
<div class="task-info">
<span class="task-title">Зробити веб</span>
<span class="priority high">High</span>
</div>
<div class="right-side">
<span class="date">June 18, 2025</span>
<div class ="task-actions">
<button class="edit-btn" >🖉</button>
<button class="delete-btn" >🗑️</button>
</div>
</div>

</div>

<div class="task">
<button class="checkbox-btn" > </button>
<div class="task-info">
<span class="task-title">Спекти хліб</span>
<span class="priority low">Low</span>
</div>
<div class="right-side">
<span class="date">June 21, 2025</span>
<div class ="task-actions">
<button class="edit-btn" >🖉</button>
<button class="delete-btn" >🗑️</button>
</div>
</div>
</div>

<div class="task">
<button class="checkbox-btn" > </button>
<div class="task-info">
<span class="task-title">Купити наповнювач Мілашці</span>
<span class="priority high">High</span>
</div>
<div class="right-side">
<span class="date">June 18, 2025</span>
<div class ="task-actions">
<button class="edit-btn" >🖉</button>
<button class="delete-btn" >🗑️</button>
</div>
</div>
</div>
</div>
</div>

<div id="taskPopUp" class="taskPopUp hidden">
<div class="popUp-content">
<span class="close-btn" id="closePopUpBtn"></span>
<h2>Додати завдання</h2>

<label class="name-edit">Назва завдання</label>
<input type="text" placeholder="Наприклад: Завдання 1" />

<label class="date-edit">Дата виконання</label>
<input type="date" />

<label>Пріоритет</label>
<div class="priority-options">
<label><input type="radio" name="priority" /> Високий</label>
<label><input type="radio" name="priority" checked /> Середній</label>
<label><input type="radio" name="priority" /> Низький</label>
</div>

<div class="popUp-buttons">
<button class="add-task-btn">Додати завдання</button>
<button class="cancel-btn" id="cancelPopUpBtn">Скасувати</button>
</div>
</div>
</div>
</div>

<div class="filterByDate hidden" id="filterByDate">
<div class="filterByDate-content">
<h2 class="filterByDate-title">Filter by date</h2>

<label>
<select class="filterByDate-select">
<option>Current</option>
<option>Past</option>
<option>Upcoming</option>
</select>
</label>
<input type="date" class="filterByDate-date" value="2024-03-15">
<div class="button-wrapper">
<button class="apply-button" id="apply-button">Apply</button>
</div>
</div>
</div>
</body>
</html>
38 changes: 38 additions & 0 deletions src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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');
});
});


Loading