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>

<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/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>