dilyana2001

Untitled

Oct 19th, 2021 (edited)
151
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function solve() {
  2.  
  3.     document.getElementById('add').addEventListener('click', addFurnitureHandler)
  4.  
  5.     function addFurnitureHandler(e) {
  6.         e.preventDefault();
  7.         const model = document.getElementById('model');
  8.         const year = document.getElementById('year');
  9.         const description = document.getElementById('description');
  10.         const price = document.getElementById('price');
  11.         const furnitureList = document.getElementById('furniture-list');
  12.  
  13.         if (!model.value || !year.value || !description.value ||
  14.             !price.value || year.value <= 0 || price.value <= 0) {
  15.             return;
  16.         }
  17.  
  18.         furnitureList.appendChild(
  19.             addFurniture(model.value, year.value, description.value, price.value)
  20.         );
  21.  
  22.         document.querySelectorAll('.moreBtn').forEach(x => x.addEventListener('click', moreBtnHandler));
  23.         document.querySelectorAll('.buyBtn').forEach(x => x.addEventListener('click', buyItBtnHandler));
  24.  
  25.         model.value = '';
  26.         year.value = '';
  27.         description.value = '';
  28.         price.value = '';
  29.     }
  30.  
  31.     function addFurniture(model, year, description, price) {
  32.         const fragment = document.createDocumentFragment();
  33.  
  34.         const furnitureFirstPart = document.createElement('tr');
  35.         furnitureFirstPart.classList = 'info';
  36.  
  37.         furnitureFirstPart.innerHTML = /*javascript*/ `
  38.                 <td>${model} </td>
  39.                 <td>${Number(price).toFixed(2)}</td>
  40.                 <td>
  41.                     <button class="moreBtn">More Info</button>
  42.                     <button class="buyBtn">Buy it</button>
  43.                 </td>
  44.         `;
  45.  
  46.         const furnitureSecondPart = document.createElement('tr');
  47.         furnitureSecondPart.classList = 'hide';
  48.  
  49.         furnitureSecondPart.innerHTML = /*javascript*/ `
  50.                 <td>Year: ${Number(year)}</td>
  51.                 <td colspan="3">Description: ${description}</td>
  52.            `;
  53.  
  54.         fragment.appendChild(furnitureFirstPart);
  55.         fragment.appendChild(furnitureSecondPart);
  56.  
  57.         return fragment;
  58.     }
  59.  
  60.     function moreBtnHandler(e) {
  61.        const hideTrElement = e.target.parentElement.parentElement.nextElementSibling;
  62.  
  63.         if (e.target.textContent == 'More Info') {
  64.             e.target.textContent = 'Less Info';
  65.             hideTrElement.setAttribute('style', 'display: contents');
  66.         } else if (e.target.textContent == 'Less Info') {
  67.             e.target.textContent = 'More Info';
  68.             hideTrElement.setAttribute('style', 'display: none');
  69.         }
  70.     }
  71.  
  72.     function buyItBtnHandler(e) {
  73.         let totalPriceElement = document.querySelector('.total-price');
  74.         let currentPrice = e.target.parentNode.parentNode.querySelector('td:nth-child(2)');
  75.         totalPriceElement.textContent = (Number(totalPriceElement.textContent) + Number(currentPrice.textContent)).toFixed(2);
  76.         e.target.closest('.info').nextElementSibling.remove();
  77.         e.target.closest('.info').remove();
  78.     }
  79. }
Add Comment
Please, Sign In to add comment