Central Cinema

function solve() {
    document.querySelector('#container button').addEventListener('click', createMovie);
    document.querySelector('#add-new').addEventListener('submit', e => e.preventDefault());
    document.querySelector('#archive > button').addEventListener('click', clearArchive);

    function createMovie() {
        const fields = Array.from(document.querySelectorAll('#container input'));
        const values = fields.map(x => x.value);
        let [movieName, hall, ticketPrice] = values;
        ticketPrice = Number(ticketPrice).toFixed(2);
        const gotEverything = values.filter(x => x != '').length == 3 && !isNaN(values[2]);
        if (gotEverything) { createLi(); fields.forEach(field => field.value = ''); }

        function createLi() {
            const mainEl = document.createElement('li');
            const outerSpanEl = document.createElement('span');
            const outerStrongEl = document.createElement('strong');
            const divEl = document.createElement('div');
            const divStrongEl = document.createElement('strong');
            const divButtonEl = document.createElement('button');
            const divInputEl = document.createElement('input');
            outerSpanEl.textContent = movieName;
            outerStrongEl.textContent = `Hall: ${hall}`;
            divStrongEl.textContent = ticketPrice;
            divInputEl.placeholder = 'Tickets Sold';
            divButtonEl.textContent = 'Archive';
            divButtonEl.addEventListener('click', archiveMovie);
            divEl.appendChild(divStrongEl);
            divEl.appendChild(divInputEl);
            divEl.appendChild(divButtonEl);
            mainEl.appendChild(outerSpanEl);
            mainEl.appendChild(outerStrongEl);
            mainEl.appendChild(divEl);
            document.querySelector('#movies ul').appendChild(mainEl);
        }
    }

    function archiveMovie() {
        const tickets = this.parentNode.parentNode.querySelector('input').value;
        if (!isNaN(tickets) && tickets != '') {
            const mainParentEl = this.parentNode.parentNode;
            const price = Number(this.parentNode.querySelector('strong').textContent);
            const name = mainParentEl.querySelector('span').textContent;
            const totalProfit = (price * tickets).toFixed(2);
            document.querySelector('#archive > ul').appendChild(createEl(name, totalProfit));
            mainParentEl.remove();
        }

        function createEl(name, totalProfit) {
            const liEL = document.createElement('li');
            const spanEl = document.createElement('span');
            const strongEl = document.createElement('strong');
            const btnEl = document.createElement('button');
            spanEl.textContent = name;
            strongEl.textContent = `Total amount: ${totalProfit}`;
            btnEl.textContent = 'Delete';
            btnEl.addEventListener('click', deleteMovie);
            liEL.appendChild(spanEl);
            liEL.appendChild(strongEl);
            liEL.appendChild(btnEl);
            return liEL;
        }
    }

    function deleteMovie() {
        this.parentNode.remove();
    }

    function clearArchive() {
        const movies = document.querySelector('#archive > ul');
        while (movies.firstChild) {movies.removeChild(movies.lastChild);}
    }
}