Untitled

<!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/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/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>