autumn adventures

window.addEventListener('load', solve);

function solve() {

    const input = {
        time: document.getElementById('time'),
        date: document.getElementById('date'),
        place: document.getElementById('place'),
        name: document.getElementById('event-name'),
        email: document.getElementById('email')
    };

    const secondField = document.querySelector('.content-second').children[0].children[1];
    const thirdField = document.querySelector('.content-first').children[1].children[1];
    const fourthField = document.querySelector('.content-second').children[1].children[1];

    document.getElementById('add-btn').addEventListener('click', addEvent);

    function addEvent() {

        if (input.time.value == '' || input.date.value == '' || input.place.value == '' || input.name.value == '', input.email.value == '') {
            return;
        }

        const li = create('li', '', 'event-content');
        secondField.appendChild(li);

        const article = create('article');
        li.appendChild(article);

        const values = [input.time.value, input.date.value, input.place.value, input.name.value, input.email.value];

        const begins = create('p', `Begins: ${input.date.value} at: ${input.time.value}`);
        const place = create('p', `In: ${input.place.value}`);
        const event = create('p', `Event: ${input.name.value}`);
        const contact = create('p', `Contact: ${input.email.value}`);
        article.appendChild(begins);
        article.appendChild(place);
        article.appendChild(event);
        article.appendChild(contact);

        document.getElementById('add-btn').disabled = true;
        Object.values(input).forEach(el => el.value = '');

        const editBtn = create('button', 'Edit', 'edit-btn');
        const continueBtn = create('button', 'Continue', 'continue-btn');
        const finishedBtn = create('button', 'Move to Finished', 'finished-btn');

        li.appendChild(editBtn);
        li.appendChild(continueBtn);
        editBtn.addEventListener('click', onEdit);
        continueBtn.addEventListener('click', onContinue);
        finishedBtn.addEventListener('click', onFinished);
        document.getElementById('clear').addEventListener('click', onClear);

        function onEdit() {
            document.getElementById('time').value = values[0];
            document.getElementById('date').value = values[1];
            document.getElementById('place').value = values[2];
            document.getElementById('event-name').value = values[3];
            document.getElementById('email').value = values[4];
            document.getElementById('add-btn').disabled = false;
            li.remove();

        }

        function onContinue() {
            thirdField.appendChild(li);
            editBtn.remove();
            continueBtn.remove();
            li.appendChild(finishedBtn);
        }

        function onFinished() {
            finishedBtn.remove();
            fourthField.appendChild(li);
            document.getElementById('add-btn').disabled = false;
        }

        function onClear(e) {
            li.remove();
        }
    }

    function create(type, content, className) {
        const element = document.createElement(type);
        element.textContent = content;
        if (className) {
            element.className = className;
        }
        return element;
    }
}