Advertisement
bebo231312312321

Untitled

Jun 18th, 2023
127
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function solve() {
  2.         const [carModelInput, carYearInput, partNameInput, partNumberInput, conditionInput, imgSrc, confirm, ulInfo, nextBtn] = [
  3.                 '#car-model', '#car-year', '#part-name', '#part-number', '#condition', '#complete-img', '.confirm-list', '.info-list', '#next-btn']
  4.                 .map(selector => document.querySelector(selector));
  5.         nextBtn.addEventListener('click', onNext)
  6.        function onNext(e) {
  7.                 e.preventDefault()
  8.                 const [carModel, carYear, partName, partNumber, condition] = [
  9.                         carModelInput, carYearInput, partNameInput, partNumberInput, conditionInput].map(input => input.value);
  10.                 const isValidInput = [carModel, carYear, partName, partNumber, condition].filter(value => value === "").length === 0 && carYear >= 1980 && carYear <= 2023;
  11.                 if (!isValidInput)  return;
  12.                 let partInfo = onCreat(carModel, carYear, partName, partNumber, condition)
  13.                 ulInfo.appendChild(partInfo)
  14.                 clear(carModelInput, carYearInput, partNameInput, partNumberInput, conditionInput);
  15.  
  16.         }
  17.         function onCreat(carModel, carYear, partName, partNumber, condition) {
  18.                 const liInfo = document.createElement('li');
  19.                 liInfo.classList.add('part-content');
  20.  
  21.                 const article = document.createElement('article');
  22.                 liInfo.appendChild(article);
  23.  
  24.                 const createParagraph = (text) => {
  25.                         const p = document.createElement('p');
  26.                         p.textContent = text;
  27.                         return p;
  28.                 };
  29.                 article.appendChild(createParagraph(`Car Model: ${carModel}`));
  30.                 article.appendChild(createParagraph(`Car Year: ${carYear}`));
  31.                 article.appendChild(createParagraph(`Part Name: ${partName}`));
  32.                 article.appendChild(createParagraph(`Part Number: ${partNumber}`));
  33.                 article.appendChild(createParagraph(`Condition: ${condition}`));
  34.  
  35.                 const creatButtons = (text, className, eventListener) => {
  36.                         const button = document.createElement('button');
  37.                         button.textContent = text;
  38.                         button.classList.add(className);
  39.                         button.addEventListener('click', eventListener);
  40.                         return button;
  41.                 };
  42.                 const editBtn = creatButtons('Edit', 'edit-btn', onEdit, 'edit-button');
  43.                 const continueBtn = creatButtons('Continue', 'continue-btn', onContinue, 'continue-button');    
  44.                 liInfo.appendChild(editBtn);
  45.                 liInfo.appendChild(continueBtn);
  46.                 function onEdit(e) {
  47.                         const [carModel, carYear, partName, partNumber, condition] = e.target.parentElement.querySelectorAll('article > p');
  48.                      
  49.                         carModelInput.value = carModel.textContent.replace('Car Model: ', '');
  50.                         carYearInput.value = carYear.textContent.replace('Car Year: ', '');
  51.                         partNameInput.value = partName.textContent.replace('Part Name: ', '');
  52.                         partNumberInput.value = partNumber.textContent.replace('Part Number: ', '');
  53.                         conditionInput.value = condition.textContent.replace('Condition: ', '');
  54.                      
  55.                         nextBtn.disabled = false;
  56.                         liInfo.remove();
  57.                       }
  58.                 function onContinue(e) {
  59.                         const currentLi = e.target.parentElement;
  60.                         continueBtn.remove();
  61.                         editBtn.remove();
  62.                         confirm.appendChild(currentLi);
  63.                      
  64.                         const confirmBtn = creatButtons('Confirm', 'confirm-btn', onConf);
  65.                         const cancelBtn = creatButtons('Cancel', 'cancel-btn', onCancel);
  66.                      
  67.                         currentLi.appendChild(confirmBtn);
  68.                         currentLi.appendChild(cancelBtn);
  69.                       }
  70.                 function onConf(e) {
  71.                         let currentLi = e.target.parentElement
  72.                         imgSrc.style.visibility = "visible"
  73.                         let completeTxt = document.getElementById("complete-text")
  74.                         completeTxt.textContent = "Part is Ordered!"
  75.                         currentLi.remove()
  76.                         nextBtn.disabled = false
  77.                 }
  78.                 function onCancel(e) {
  79.                         let currentLi = e.target.parentElement
  80.                         currentLi.remove()
  81.                         nextBtn.disabled = false
  82.                 }
  83.                 return liInfo
  84.         }
  85.         function clear(...inputs) {
  86.                 inputs.forEach(input => (input.value = ""));
  87.                 nextBtn.disabled = true;
  88.         }
  89. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement