View difference between Paste ID: sEhfj3Fk and tWG3t2Tq

 <!DOCTYPE html>
 <html lang="pl">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>To-Do List</title>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
 
 <div class="container mt-5">
     <div class="row">
         <div class="col-md-8 offset-md-2">
             <div class="card">
                 <div class="card-header bg-primary text-white text-center">
                     <h3>To-Do List</h3>
                 </div>
                 <div class="card-body">
                     <form id="todoForm" class="mb-3">
                         <div class="input-group">
                             <input type="text" class="form-control" id="taskInput" placeholder="Enter new task" required>
                             <button type="submit" class="btn btn-primary">Add Task</button>
                         </div>
                     </form>
                     <div id="alertPlaceholder"></div>
                     <ul class="list-group" id="taskList">
                         <!-- Zadania będą dodawane tutaj dynamicznie -->
                     </ul>
                     <div class="mt-3">
                         <div class="progress">
                             <div id="progressBar" class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </div>
 
 <!-- Modal do edycji zadania -->
 <div class="modal fade" id="editTaskModal" tabindex="-1" aria-labelledby="editTaskModalLabel" aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title" id="editTaskModalLabel">Edit Task</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">
                 <form id="editTaskForm">
                     <div class="mb-3">
                         <label for="editTaskInput" class="form-label">Task</label>
                         <input type="text" class="form-control" id="editTaskInput" required>
                     </div>
                     <button type="submit" class="btn btn-primary">Save changes</button>
                 </form>
             </div>
         </div>
     </div>
 </div>
 
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
 <script>
     document.addEventListener('DOMContentLoaded', () => {
         // Pobranie elementów z DOM
         const taskForm = document.getElementById('todoForm'); // Formularz do dodawania zadań
         const taskInput = document.getElementById('taskInput'); // Pole tekstowe do wprowadzania zadania
         const taskList = document.getElementById('taskList'); // Lista zadań
         const progressBar = document.getElementById('progressBar'); // Pasek postępu
         const alertPlaceholder = document.getElementById('alertPlaceholder'); // Miejsce na alerty
         const editTaskModal = new bootstrap.Modal(document.getElementById('editTaskModal')); // Modal do edycji zadań
         const editTaskForm = document.getElementById('editTaskForm'); // Formularz w modal
         const editTaskInput = document.getElementById('editTaskInput'); // Pole tekstowe w modal
         let currentEditTaskItem = null; // Zmienna przechowująca aktualnie edytowane zadanie
 
         // Obsługa zdarzenia 'submit' formularza dodawania zadań
         taskForm.addEventListener('submit', (e) => {
             e.preventDefault(); // Zatrzymanie domyślnego działania formularza
             const taskText = taskInput.value.trim(); // Pobranie i przycięcie wartości z pola tekstowego
             if (taskText !== '') {
                 addTask(taskText); // Dodanie zadania
                 taskInput.value = ''; // Wyczyść pole tekstowe
                 showAlert('Task added successfully!', 'success'); // Pokaż alert sukcesu
             } else {
                 showAlert('Task cannot be empty!', 'danger'); // Pokaż alert błędu
             }
         });
 
         // Funkcja dodająca zadanie do listy
         function addTask(taskText) {
             const taskItem = document.createElement('li'); // Stworzenie nowego elementu listy
             taskItem.className = 'list-group-item d-flex justify-content-between align-items-center'; // Dodanie klas Bootstrap
             taskItem.innerHTML = `
         <span>${taskText}</span>
         <div>
             <button class="btn btn-success btn-sm me-2 complete-btn">Complete</button>
             <button class="btn btn-secondary btn-sm me-2 edit-btn">Edit</button>
             <button class="btn btn-danger btn-sm delete-btn">Delete</button>
         </div>
         `;
             taskList.appendChild(taskItem); // Dodanie zadania do listy
 
             // Obsługa przycisku 'Complete'
             const completeBtn = taskItem.querySelector('.complete-btn');
             completeBtn.addEventListener('click', () => {
                 taskItem.classList.toggle('completed'); // Zmiana stanu ukończenia zadania
                 completeBtn.textContent = taskItem.classList.contains('completed') ? 'Undo' : 'Complete'; // Zmiana tekstu przycisku
                 updateProgressBar(); // Aktualizacja paska postępu
             });
 
             // Obsługa przycisku 'Edit'
             const editBtn = taskItem.querySelector('.edit-btn');
             editBtn.addEventListener('click', () => {
                 currentEditTaskItem = taskItem; // Ustawienie aktualnie edytowanego zadania
                 editTaskInput.value = taskText; // Ustawienie wartości w polu tekstowym modala
                 editTaskModal.show(); // Pokazanie modala
             });
 
             // Obsługa przycisku 'Delete'
             const deleteBtn = taskItem.querySelector('.delete-btn');
             deleteBtn.addEventListener('click', () => {
                 taskList.removeChild(taskItem); // Usunięcie zadania z listy
                 updateProgressBar(); // Aktualizacja paska postępu
                 showAlert('Task deleted successfully!', 'success'); // Pokaż alert sukcesu
             });
         }
 
         // Obsługa zdarzenia 'submit' formularza edycji zadania
         editTaskForm.addEventListener('submit', (e) => {
             e.preventDefault(); // Zatrzymanie domyślnego działania formularza
             if (currentEditTaskItem) {
                 const newTaskText = editTaskInput.value.trim(); // Pobranie i przycięcie wartości z pola tekstowego
                 if (newTaskText !== '') {
                     currentEditTaskItem.querySelector('span').textContent = newTaskText; // Aktualizacja tekstu zadania
                     editTaskModal.hide(); // Ukrycie modala
                     showAlert('Task updated successfully!', 'success'); // Pokaż alert sukcesu
                 } else {
                     showAlert('Task cannot be empty!', 'danger'); // Pokaż alert błędu
                 }
             }
         });
 
         // Funkcja aktualizująca pasek postępu
         function updateProgressBar() {
             const totalTasks = taskList.children.length; // Liczba wszystkich zadań
             const completedTasks = taskList.querySelectorAll('.completed').length; // Liczba ukończonych zadań
             const completionRate = totalTasks === 0 ? 0 : (completedTasks / totalTasks) * 100; // Obliczenie procentu ukończenia
             progressBar.style.width = `${completionRate}%`; // Ustawienie szerokości paska postępu
             progressBar.setAttribute('aria-valuenow', completionRate); // Ustawienie wartości aria
             progressBar.textContent = `${Math.round(completionRate)}%`; // Ustawienie tekstu paska postępu
         }
 
         // Funkcja pokazująca alert
         function showAlert(message, type) {
             const alert = document.createElement('div'); // Stworzenie nowego elementu alertu
             alert.className = `alert alert-${type} alert-dismissible fade show`; // Dodanie klas Bootstrap
             alert.role = 'alert'; // Ustawienie roli
             alert.innerHTML = `
         ${message}
         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
         `;
             alertPlaceholder.appendChild(alert); // Dodanie alertu do placeholdera
             setTimeout(() => {
                 if (alert) {
                     alert.classList.remove('show'); // Usunięcie klasy 'show'
                     alert.classList.add('fade'); // Dodanie klasy 'fade'
                     setTimeout(() => alert.remove(), 150); // Usunięcie alertu po krótkim czasie
                 }
             }, 3000); // Czas trwania alertu
         }
     });
 
 </script>
 
 <style>
     .completed {
         text-decoration: line-through;
         color: grey;
     }
 </style>
 
 </body>
 </html>