Gem Collection - Task 1 from JS Advanced Exam - 05 April 2023

app.js

window.addEventListener("load", solve);

function solve() {
    
    const inputElements = ['gem-name', 'color', 'carats', 'price', 'type'];

    const previewEl = document.querySelector('#preview-list');
    const collectionEl = document.querySelector('#collection');
    
    function getFormInputsAndValues() {
        return inputElements.reduce((inputsAndValues, el) => {
            const element = document.querySelector('#' + el);

            if ( ! inputsAndValues.hasOwnProperty('inputs') ) inputsAndValues.inputs = {};
            inputsAndValues.inputs[el] = element;

            if ( ! inputsAndValues.hasOwnProperty('values') ) inputsAndValues.values = {}
            inputsAndValues.values[el] = element.value.trim();

            return inputsAndValues;
        }, {});
    }

    function createElement( type, properties = {} ) {
        
        const element = document.createElement(type);

        Object.entries(properties).forEach(([ key, value ]) => {
            element[key] = value;
        });

        return element;
    }

    function createElementParagraph( content = '' ) {
        return createElement('p', { textContent: content, className: 'collection-item' })
    }

    const buttonElAddGem = document.querySelector('#add-btn');

    buttonElAddGem.addEventListener('click', (e) => {
        e.preventDefault()
        
        const { inputs, values } = getFormInputsAndValues();

        // check if any value is empty
        if ( Object.values(values).indexOf('') != -1 ) return;

        // reset values for all input elements
        Object.values(inputs).forEach(el => el.value = '' );

        buttonElAddGem.setAttribute('disabled', 'disabled');
        
        const listEl = createElement('li', { className: 'gem-info' });
        const articleEl = createElement('article');

        articleEl.append(
            createElement('h4', { textContent: values['gem-name'] }),
            createElementParagraph(`Color: ${values['color']}`), 
            createElementParagraph(`Carats: ${values['carats']}`),
            createElementParagraph(`Price: ${values['price']}`),
            createElementParagraph(`Type: ${values['type']}`)
        );
        
        const saveBtn = createElement('button', { textContent: 'Save to Collection', className: 'save-btn' });
        const editBtn = createElement('button', { textContent: 'Edit Information', className: 'edit-btn' });
        const cancelBtn = createElement('button', { textContent: 'Cancel', className: 'cancel-btn' });
        
        listEl.append( articleEl, saveBtn, editBtn, cancelBtn );
        previewEl.append( listEl );
        
        editBtn.addEventListener('click', (e) => { editReview( listEl, values ); });
        saveBtn.addEventListener("click", (e) => { savePreview( listEl, values ); });
        cancelBtn.addEventListener("click", (e) => { cancelPreview( listEl ); });
    });

    function editReview( listEl, values ){
        listEl.remove()

        Object.entries(values).forEach( ([id, value]) => document.querySelector('#' + id).value = value );

        buttonElAddGem.removeAttribute('disabled');
    }

    function savePreview( listEl, values ){
        listEl.remove();

        const newListEl = createElement('li');
        newListEl.append( createElementParagraph( `${values['gem-name']} - Color: ${values['color']}/ Carats: ${values['carats']}/ Price: ${values['price']}/ Type: ${values['type']}` ) );
        collectionEl.append( newListEl );

        buttonElAddGem.removeAttribute('disabled');
    }
    
    function cancelPreview( listEl ){
        listEl.remove();

        buttonElAddGem.removeAttribute('disabled');
    }
}