01. Car Parts

function solve() {
        const data = {
                carModel: document.querySelector('#car-model'),
                carYear: document.querySelector('#car-year'),
                partName: document.querySelector('#part-name'),
                partNumber: document.querySelector('#part-number'),
                condition: document.querySelector('#condition'),
        };

        document.querySelector('#next-btn').addEventListener('click', next);

        const infoUl = document.querySelector('ul.info-list');
        const confirmUl = document.querySelector('ul.confirm-list');

        function next(e) {
                e.preventDefault();

                for (const key in data) {
                        if (data[key].value === '') {
                                return;
                        }

                        if (key === 'carYear') {
                                if (data[key].value < 1980 || data[key].value > 2023) {
                                        return;
                                }
                        }
                }

                let listItem = document.createElement('li');
                listItem.className = 'part-content';
                infoUl.appendChild(listItem);

                listItem.innerHTML = `<article>
                <p>Car Model: ${data.carModel.value}</p>
                <p>Car Year: ${data.carYear.value}</p>
                <p>Part Name: ${data.partName.value}</p>
                <p>Part Number: ${data.partNumber.value}</p>
                <p>Condition: ${data.condition.value}</p>
                </article>`

                const leftButton = document.createElement('button');
                leftButton.className = 'edit-btn';
                leftButton.textContent = 'Edit';

                const rightButton = document.createElement('button');
                rightButton.className = 'continue-btn';
                rightButton.textContent = 'Continue';

                listItem.appendChild(leftButton);
                listItem.appendChild(rightButton);

                document.querySelector('#next-btn').disabled = true;

                let backUp = {};
                for (const key in data) {
                        backUp[key] = data[key].value;
                        data[key].value = '';
                }

                document.querySelector('#complete-img').style.visibility = 'hidden';
                document.querySelector('#complete-text').textContent = '';

                leftButton.addEventListener('click', edit);

                function edit() {
                        listItem.remove();
                        if (leftButton.textContent === 'Edit') {
                                for (const key in data) {
                                        data[key].value = backUp[key];
                                }
                        }

                        document.querySelector('#next-btn').disabled = false;
                }

                rightButton.addEventListener('click', continueCase);

                function continueCase() {
                        listItem.remove();
                        confirmUl.appendChild(listItem);

                        leftButton.className = 'confirm-btn';
                        leftButton.textContent = 'Confirm';

                        rightButton.className = 'cancel-btn';
                        rightButton.textContent = 'Cancel';

                        leftButton.addEventListener('click', confirm);

                        function confirm() {
                                listItem.remove();
                                document.querySelector('#next-btn').disabled = false;

                                document.querySelector('#complete-img').style.visibility = 'visible';
                                document.querySelector('#complete-text').textContent = 'Part is Ordered!';
                        }

                        rightButton.addEventListener('click', cancelAction);

                        function cancelAction() {
                                listItem.remove();
                                document.querySelector('#next-btn').disabled = false;
                        }
                }
        }

}