01.Fitness Journey

function solve() {
    const data = {
        name: document.querySelector('#name'),
        email: document.querySelector('#email'),
        number: document.querySelector('#contact-number'),
        classType: document.querySelector('#class-type'),
        classTime: document.querySelector('#class-time'),
    }

    const ulClassInfo = document.querySelector('ul.class-info');
    const ulConfirmClass = document.querySelector('ul.confirm-class');

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

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

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

        let listItem = document.createElement('li');
        listItem.className = 'info-item';
        ulClassInfo.appendChild(listItem);

        listItem.innerHTML = `<article class="personal-info">
        <p>${backUp.name}</p>
        <p>${backUp.email}</p>
        <p>${backUp.number}</p>
        <p>${backUp.classType}</p>
        <p>${backUp.classTime}</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;

        leftButton.addEventListener('click', edit);

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

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

        rightButton.addEventListener('click', continueConfirmation);

        function continueConfirmation() {
            listItem.remove();
            ulConfirmClass.appendChild(listItem);

            listItem.className = 'continue-info';

            leftButton.className = 'cancel-btn';
            leftButton.textContent = 'Cancel';
            leftButton.removeEventListener('click', edit);

            rightButton.className = 'confirm-btn';
            rightButton.textContent = 'Confirm';
            rightButton.removeEventListener('click', continueConfirmation);

            leftButton.addEventListener('click', abort);

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

            rightButton.addEventListener('click', finalise);

            function finalise() {
                document.querySelector('div#main').remove();

                const h1El = document.createElement('h1');
                h1El.id = 'thank-you';
                h1El.textContent = 'Thank you for scheduling your appointment, we look forward to seeing you!';

                const buttonEl = document.createElement('button');
                buttonEl.id = 'done-btn'
                buttonEl.textContent = 'Done';

                document.querySelector('body').appendChild(h1El);
                document.querySelector('body').appendChild(buttonEl);

                buttonEl.addEventListener('click', reload);

                function reload() {
                    location.reload();
                }
            }
        }
    }
}