taskManager2

function solve() {
    const [task, description, date] = document.querySelectorAll(
        'form input, textarea'
    );
    const [_, labelDescription, labelDate] = Array.from(
        document.querySelectorAll('form label')
    ).map((l) => l.textContent);

    const btnAdd = document.getElementById('add');

    const [__, divOrange, divYellow, divGreen] = document.querySelectorAll(
        'section div:last-of-type'
    );
    console.log(divOrange, divYellow, divGreen);

    btnAdd.addEventListener('click', (e) => {
        e.preventDefault();
        if ([task, description, date].some((f) => f.value === '')) {
            return;
        }
        let newArticle = document.createElement('article');
        newArticle.innerHTML = `
        <h3>${task.value}</h3>
        <p>${labelDescription}: ${description.value}</p>
        <p>${labelDate}: ${date.value}</p>
        <div class="flex">
        <button class="green">Start</button>
         <button class="red">Delete</button>
         </div>`;

        const [btnStart, btnDelete] = newArticle.querySelectorAll('button');

        divOrange.appendChild(newArticle);
        [task, description, date].forEach((e) => (e.value = ''));

        btnDelete.addEventListener('click', (e) => {
            newArticle.remove();
        });
        btnStart.addEventListener('click', (e) => {
            divYellow.appendChild(newArticle);
            btnStart.remove();
            let btnFinish = document.createElement('button');
            btnFinish.className = 'orange';
            btnFinish.textContent = 'Finish';
            newArticle.querySelector('div').appendChild(btnFinish);

            btnFinish.addEventListener('click', (e) => {
                divGreen.appendChild(newArticle);
                newArticle.querySelector('div').remove();
            });
        });
    });
}