function solve() {
    let main = document.querySelector('main');
    main.addEventListener('click', (e)=>{
        if(e.target.textContent === "Add"){
            addToOpen(e);
        }
        if(e.target.textContent === "Start"){
            addToInProgress(e)
        }
        if(e.target.textContent === "Finish"){
            addToFinish(e)
        }
        if(e.target.textContent === "Delete"){
            deleteArticle(e)
        }
    })

    function deleteArticle(e){
        e.preventDefault();
        let article = e.target.parentNode.parentNode;
        article.remove();
    }

    function addToFinish(e){
        e.preventDefault();
        let article = e.target.parentNode.parentNode;
        let complete = document.querySelector('h1[class="green"]').parentNode.parentNode.children[1];
        article.children[3].remove();
        complete.appendChild(article);
    }

    function addToInProgress(e){
        e.preventDefault();
        let article = e.target.parentNode.parentNode;
        let inProgress = document.querySelector('#in-progress');
        let newButtons = `<div class="flex">
                               <button class="red">Delete</button>
                               <button class="orange">Finish</button>
                          </div>`
        article.children[3].remove();
        article.insertAdjacentHTML("beforeend", newButtons);
        inProgress.appendChild(article);
    }

    function addToOpen(e){
        e.preventDefault();
        let task = document.querySelector('#task');
        let description = document.querySelector('#description');
        let date = document.querySelector('#date')

        if(task.value.trim() === "" || description.value.trim() === "" || date.value.trim() === ""){
            return;
        }
        let open = document.querySelector('h1[class="orange"]').parentNode.parentNode.children[1];
        let htmlString = `<article>
                            <h3>${task.value}</h3>
                            <p>Description: ${description.value}</p>
                            <p>Due Date: ${date.value}</p>
                            <div class="flex">
                               <button class="green">Start</button>
                               <button class="red">Delete</button>
                            </div>
                          </article>`;
        open.insertAdjacentHTML("beforeend", htmlString);
    }
}