Advertisement
GeorgiLukanov87

01. Service - Js Advanced Final Retake Exam - 10 December 2021

Mar 23rd, 2023 (edited)
666
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // 01. Service
  2. // Js Advanced Final Retake Exam - 10 December 2021
  3. // https://judge.softuni.org/Contests/Practice/Index/3296#0
  4.  
  5. function solve() {
  6.     const productTypeElement = document.getElementById('type-product');
  7.     const descriptionElement = document.getElementById('description');
  8.     const nameElement = document.getElementById('client-name');
  9.     const phoneElement = document.getElementById('client-phone');
  10.  
  11.     const receivedOrders = document.getElementById('received-orders');
  12.     const completedOrders = document.getElementById('completed-orders');
  13.     document.querySelector('#completed-orders button').addEventListener('click', clearCompletedOrders);
  14.     document.querySelector('#right > form > button').addEventListener('click', sendInfo);
  15.  
  16.     function sendInfo(e) {
  17.         e.preventDefault();
  18.         let data = {
  19.             product: productTypeElement.value,
  20.             description: descriptionElement.value,
  21.             name: nameElement.value,
  22.             phone: phoneElement.value,
  23.         }
  24.         if (data.product == '' || data.description == '' || data.name == '' || data.phone == '') {
  25.             alert('Fill all inputs');
  26.             return;
  27.         }
  28.  
  29.         let div = document.createElement('div');
  30.         div.setAttribute('class', 'container');
  31.  
  32.         let h2 = document.createElement('h2');
  33.         h2.textContent = `Product type for repair: ${data.product}`;
  34.         let h3 = document.createElement('h3');
  35.         h3.textContent = `Client information: ${data.name}, ${data.phone}`;
  36.         let h4 = document.createElement('h4');
  37.         h4.textContent = `Description of the problem: ${data.description}`;
  38.  
  39.         let startBtn = document.createElement('button');
  40.         startBtn.textContent = 'Start repair'
  41.         startBtn.classList.add('start-btn');
  42.         startBtn.addEventListener('click', startRepair)
  43.  
  44.         let finishBtn = document.createElement('button');
  45.         finishBtn.textContent = 'Finish repair';
  46.         finishBtn.classList.add('finish-btn');
  47.         finishBtn.disabled = true;
  48.         finishBtn.addEventListener('click', finishRepair)
  49.  
  50.         div.appendChild(h2);
  51.         div.appendChild(h3);
  52.         div.appendChild(h4);
  53.         div.appendChild(startBtn);
  54.         div.appendChild(finishBtn);
  55.         receivedOrders.appendChild(div);
  56.         clearInputs();
  57.     }
  58.  
  59.     function startRepair(e) {
  60.         let startBtn = e.target;
  61.         let finishBtn = e.target.nextElementSibling;
  62.         startBtn.disabled = true;
  63.         finishBtn.disabled = false;
  64.     }
  65.  
  66.     function finishRepair(e) {
  67.         let currentOrder = e.target.parentNode;
  68.         let divContainer = document.createElement('div');
  69.         divContainer.classList.add('container');
  70.         let completedH2Node = currentOrder.children[0]
  71.         let completedH3Node = currentOrder.children[1]
  72.         let completedH4Node = currentOrder.children[2]
  73.  
  74.         divContainer.appendChild(completedH2Node);
  75.         divContainer.appendChild(completedH3Node);
  76.         divContainer.appendChild(completedH4Node);
  77.         completedOrders.appendChild(divContainer);
  78.  
  79.         currentOrder.remove();
  80.     }
  81.  
  82.     function clearCompletedOrders(e) {
  83.         Array.from(e.target.parentNode.querySelectorAll('div')).forEach(order => {
  84.             order.remove();
  85.         })
  86.     }
  87.  
  88.     function clearInputs() {
  89.         descriptionElement.value = '';
  90.         nameElement.value = '';
  91.         phoneElement.value = '';
  92.     }
  93. }
  94.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement