09. Task Manager

function solve() {
    const taskField = document.getElementById('task');
    const descriptionField = document.getElementById('description');
    const dateField = document.getElementById('date');
    const addBtn = document.getElementById('add');
    const openArea = document.querySelectorAll('section')[1].querySelector('div');
    const progressArea = document.querySelectorAll('section')[2].querySelector('div');
    const completeArea = document.querySelectorAll('section')[3].querySelector('div');

    addBtn.addEventListener('click', addTask);

    function addTask(e) {
        e.preventDefault();
        const task = taskField.value.trim();
        const description = descriptionField.value.trim();
        const date = dateField.value.trim();

        if (!task || !description || !date) {
            return;
        }

        createArticle('OpenTask', 'Start', 'Delete', 'green', 'red', task, description, date);
    }

    function createArticle(status, btn1Text, btn2Text, btn1Class, btn2Class, task, description, date) {
        const article = document.createElement('article');
        const h3 = document.createElement('h3');
        h3.textContent = task;
        const p1 = document.createElement('p');
        p1.textContent = `Description: ${description}`;
        const p2 = document.createElement('p');
        p2.textContent = `Due Date: ${date}`;

        article.appendChild(h3);
        article.appendChild(p1);
        article.appendChild(p2);

        const divEl = document.createElement('div');
        divEl.classList.add('flex');

        const btn1 = document.createElement('button');
        btn1.textContent = btn1Text;
        btn1.classList.add(btn1Class);
        btn1.addEventListener('click', function() {
            if (status === 'OpenTask') {
                moveToInProgress(article, task, description, date);
            } else if (status === 'ProgressTask') {
                deleteTask(article);
            }
        });

        const btn2 = document.createElement('button');
        btn2.textContent = btn2Text;
        btn2.classList.add(btn2Class);
        btn2.addEventListener('click', function() {
            if (status === 'OpenTask') {
                deleteTask(article);
            } else if (status === 'ProgressTask') {
                finishTask(article, task, description, date);
            }
        });

        divEl.appendChild(btn1);
        divEl.appendChild(btn2);
        article.appendChild(divEl);

        if (status === 'OpenTask') {
            openArea.appendChild(article);
        } else if (status === 'ProgressTask') {
            progressArea.appendChild(article);
        } else if (status === 'CompleteTask') {
            completeArea.appendChild(article);
        }

        function moveToInProgress(article, task, description, date) {
            article.remove();
            createArticle('ProgressTask', 'Delete', 'Finish', 'red', 'orange', task, description, date);
        }

        function finishTask(article, task, description, date) {
            article.remove();
            createArticle('CompleteTask', null, null, null, null, task, description, date);
        }

        function deleteTask(article) {
            article.remove();
        }
    }
}