View difference between Paste ID: <a href="/yx2dK8v7">yx2dK8v7</a> and <a href="/YGw6sJPX">YGw6sJPX</a>

<!DOCTYPE html>
1		<!DOCTYPE html>
2		<html lang="pl">
3		<head>
4		<meta charset="UTF-8">
5		<meta name="viewport" content="width=device-width, initial-scale=1.0">
6		<title>To-Do List</title>
7		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
8		</head>
9		<body>
10
11		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
12		<script>
13		document.addEventListener('DOMContentLoaded', () => {
14		// Pobranie elementów z DOM
15		const taskForm = document.getElementById('todoForm'); // Formularz do dodawania zadań
16		const taskInput = document.getElementById('taskInput'); // Pole tekstowe do wprowadzania zadania
17		const taskList = document.getElementById('taskList'); // Lista zadań
18		const progressBar = document.getElementById('progressBar'); // Pasek postępu
19		const alertPlaceholder = document.getElementById('alertPlaceholder'); // Miejsce na alerty
20		const editTaskModal = new bootstrap.Modal(document.getElementById('editTaskModal')); // Modal do edycji zadań
21		const editTaskForm = document.getElementById('editTaskForm'); // Formularz w modal
22		const editTaskInput = document.getElementById('editTaskInput'); // Pole tekstowe w modal
23		let currentEditTaskItem = null; // Zmienna przechowująca aktualnie edytowane zadanie
24
25		// Obsługa zdarzenia 'submit' formularza dodawania zadań
26		taskForm.addEventListener('submit', (e) => {
27		e.preventDefault(); // Zatrzymanie domyślnego działania formularza
28		const taskText = taskInput.value.trim(); // Pobranie i przycięcie wartości z pola tekstowego
29		if (taskText !== '') {
30		addTask(taskText); // Dodanie zadania
31		taskInput.value = ''; // Wyczyść pole tekstowe
32		showAlert('Task added successfully!', 'success'); // Pokaż alert sukcesu
33		} else {
34		showAlert('Task cannot be empty!', 'danger'); // Pokaż alert błędu
35		}
36		});
37
38		// Funkcja dodająca zadanie do listy
39		function addTask(taskText) {
40		const taskItem = document.createElement('li'); // Stworzenie nowego elementu listy
41		taskItem.className = 'list-group-item d-flex justify-content-between align-items-center'; // Dodanie klas Bootstrap
42		taskItem.innerHTML = `
43		<span>${taskText}</span>
44		<div>
45		<button class="btn btn-success btn-sm me-2 complete-btn">Complete</button>
46		<button class="btn btn-secondary btn-sm me-2 edit-btn">Edit</button>
47		<button class="btn btn-danger btn-sm delete-btn">Delete</button>
48		</div>
49		`;
50		taskList.appendChild(taskItem); // Dodanie zadania do listy
51
52		// Obsługa przycisku 'Complete'
53		const completeBtn = taskItem.querySelector('.complete-btn');
54		completeBtn.addEventListener('click', () => {
55		taskItem.classList.toggle('completed'); // Zmiana stanu ukończenia zadania
56		completeBtn.textContent = taskItem.classList.contains('completed') ? 'Undo' : 'Complete'; // Zmiana tekstu przycisku
57		updateProgressBar(); // Aktualizacja paska postępu
58		});
59
60		// Obsługa przycisku 'Edit'
61		const editBtn = taskItem.querySelector('.edit-btn');
62		editBtn.addEventListener('click', () => {
63		currentEditTaskItem = taskItem; // Ustawienie aktualnie edytowanego zadania
64		editTaskInput.value = taskText; // Ustawienie wartości w polu tekstowym modala
65		editTaskModal.show(); // Pokazanie modala
66		});
67
68		// Obsługa przycisku 'Delete'
69		const deleteBtn = taskItem.querySelector('.delete-btn');
70		deleteBtn.addEventListener('click', () => {
71		taskList.removeChild(taskItem); // Usunięcie zadania z listy
72		updateProgressBar(); // Aktualizacja paska postępu
73		showAlert('Task deleted successfully!', 'success'); // Pokaż alert sukcesu
74		});
75		}
76
77		// Obsługa zdarzenia 'submit' formularza edycji zadania
78		editTaskForm.addEventListener('submit', (e) => {
79		e.preventDefault(); // Zatrzymanie domyślnego działania formularza
80		if (currentEditTaskItem) {
81		const newTaskText = editTaskInput.value.trim(); // Pobranie i przycięcie wartości z pola tekstowego
82		if (newTaskText !== '') {
83		currentEditTaskItem.querySelector('span').textContent = newTaskText; // Aktualizacja tekstu zadania
84		editTaskModal.hide(); // Ukrycie modala
85		showAlert('Task updated successfully!', 'success'); // Pokaż alert sukcesu
86		} else {
87		showAlert('Task cannot be empty!', 'danger'); // Pokaż alert błędu
88		}
89		}
90		});
91
92		// Funkcja aktualizująca pasek postępu
93		function updateProgressBar() {
94		const totalTasks = taskList.children.length; // Liczba wszystkich zadań
95		const completedTasks = taskList.querySelectorAll('.completed').length; // Liczba ukończonych zadań
96		const completionRate = totalTasks === 0 ? 0 : (completedTasks / totalTasks) * 100; // Obliczenie procentu ukończenia
97		progressBar.style.width = `${completionRate}%`; // Ustawienie szerokości paska postępu
98		progressBar.setAttribute('aria-valuenow', completionRate); // Ustawienie wartości aria
99		progressBar.textContent = `${Math.round(completionRate)}%`; // Ustawienie tekstu paska postępu
100		}
101
102		// Funkcja pokazująca alert
103		function showAlert(message, type) {
104		const alert = document.createElement('div'); // Stworzenie nowego elementu alertu
105		alert.className = `alert alert-${type} alert-dismissible fade show`; // Dodanie klas Bootstrap
106		alert.role = 'alert'; // Ustawienie roli
107		alert.innerHTML = `
108		${message}
109		<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
110		`;
111		alertPlaceholder.appendChild(alert); // Dodanie alertu do placeholdera
112		setTimeout(() => {
113		if (alert) {
114		alert.classList.remove('show'); // Usunięcie klasy 'show'
115		alert.classList.add('fade'); // Dodanie klasy 'fade'
116		setTimeout(() => alert.remove(), 150); // Usunięcie alertu po krótkim czasie
117		}
118		}, 3000); // Czas trwania alertu
119		}
120		});
121
122		</script>
123
124		<style>
125		.completed {
126		text-decoration: line-through;
127		color: grey;
128		}
129		</style>
130
131		</body>
132		</html>
133