furnitureStore

window.addEventListener('load', solve);

function solve() {
    let bodyFurniture = document.getElementById('furniture-list');
    let totalPrice = document.querySelector('.total-price');
    function ce(type, content, className){
        const result = document.createElement(type);
        result.textContent = content;
        if(className){
            result.className = className;
        }
        return result;
    }

    let button = document.getElementById('add').addEventListener('click', (e) => {
        e.preventDefault();
        let model = document.querySelector('input[name=model]');
        let year = document.querySelector('input[name=year]');
        let description = document.getElementById('description');
        let price = document.querySelector('input[name=price]');

        if(model.value != '' && description.value != '' && Number(year.value) > 0 && Number(price.value) > 0){
            let trEl = ce('tr', '', 'info');
            let tdModel = ce('td', `${model.value}`);
            let pricetoFixed = Number(price.value).toFixed(2);
            let tdPrice = ce('td', `${pricetoFixed}`);
            let tdElem = ce('td');
            let moreBtn = ce('button', 'More Info', 'moreBtn');
            let buyBtn = ce('button', 'Buy it', 'buyBtn');

            tdElem.appendChild(moreBtn);
            tdElem.appendChild(buyBtn);

            let trHide = ce('tr', '', 'hide');
            let yearTr = ce('td', `Year: ${Number(year.value)}`);
            let trDesc = ce('td', `Description: ${description.value}`);
            trDesc.setAttribute('colspan', '3');
            trHide.appendChild(yearTr);
            trHide.appendChild(trDesc);

            trEl.appendChild(tdModel);
            trEl.appendChild(tdPrice);
            trEl.appendChild(tdElem);


            bodyFurniture.appendChild(trEl);
            bodyFurniture.appendChild(trHide);

            moreBtn.addEventListener('click', () => {
                if(moreBtn.textContent == 'More Info'){
                    moreBtn.textContent = 'More Info' ? 'Less Info' : 'More Info';
                    trHide.style.display = 'none' ? 'contents' : 'none';
                } else if(moreBtn.textContent == 'Less Info'){
                    moreBtn.textContent = 'Less Info' ? 'More Info' : 'Less Info';
                    trHide.style.display = 'contents' ? 'none' : 'contents';
                }

            });

            buyBtn.addEventListener('click', () => {
                trEl.remove();
                trHide.remove();

                totalPrice.textContent = (Number(totalPrice.textContent) + Number(pricetoFixed)).toFixed(2);
            });
        model.value = '';
        year.value = '';
        description.value = '';
        price.value = '';
        }

    });
}