Untitled

function solve(){
    const nameInput = document.getElementById('name');
    const locationInput = document.getElementById('location');
    const genderInput = document.getElementById('gender');
    const prepareList = document.getElementById('preparing-list');
    const charList = document.getElementById('character-list');
    const createButton = document.getElementById('create-btn');
    createButton.addEventListener('click', () => {
        if (!nameInput.value || !locationInput.value || !genderInput.value) {
            return;
        }

        const event = createEvent(nameInput.value, locationInput.value, genderInput.value);
        attachEvent(event);

        createButton.disabled = true;
        setValues();
    });

    function attachEvent(element) {
        prepareList.innerHTML = '';
        prepareList.appendChild(element);
    }

    function setValues(name = '', location = '', gender = '') {
        nameInput.value = name;
        locationInput.value = location;
        genderInput.value = gender;
    }

    function createEvent(name, location, gender) {
        const li = document.createElement('li');
        li.classList.add('creating');

        const article = document.createElement('article');

        const h4 = document.createElement('h4');
        h4.innerHTML = name;
        article.appendChild(h4);

        const p1 = document.createElement('p');
        p1.innerHTML = location;
        article.appendChild(p1);

        const p2 = document.createElement('p');
        p2.innerHTML = gender;
        article.appendChild(p2);

        li.appendChild(article);

        const edit = document.createElement('button');
        edit.innerHTML = 'Edit'
        edit.classList.add('action-btn', 'edit');
        edit.addEventListener('click', () => {
            setValues(name, location, gender);
            createButton.disabled = false;
            prepareList.innerHTML = '';
        })

        li.appendChild(edit);

        const done = document.createElement('button');
        done.classList.add('action-btn', 'done');
        done.innerHTML = 'Done';
        done.addEventListener('click', () => {
            const item = prepareList.getElementsByTagName('li')[0];
            document.getElementsByClassName('edit')[0].remove();
            document.getElementsByClassName('done')[0].remove();
            prepareList.innerHTML = '';

            charList.appendChild(item);
            createButton.disabled = false;
        })

        li.appendChild(done);

        return li;
    }
}