svephoto

Christmas Gifts Delivery [JavaScript DOM]

Apr 3rd, 2021 (edited)
288
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function solution() {
  2.     let input = document.querySelector('input');
  3.     let addGiftButton = getElementByInnerText('Add gift', 'button');
  4.  
  5.     let addedGifts = [];
  6.     let sentGifts = [];
  7.     let discardedGifts = [];
  8.    
  9.     let addedUL;
  10.     let sentUL;
  11.     let discardedUL;
  12.        
  13.     addGiftButton.addEventListener('click', (event) => {
  14.         event.preventDefault();
  15.                
  16.         let giftName = input.value;
  17.         addedGifts.push(giftName);
  18.         addedGifts.sort();
  19.        
  20.         addedUL = getElementByInnerText('List of gifts', 'h2').parentNode.getElementsByTagName('ul')[0];
  21.        
  22.         addedUL.innerHTML = '';
  23.        
  24.         for (let i = 0; i < addedGifts.length; i++) {
  25.             let liElement = `<li class="gift">${addedGifts[i]}<button id="sendButton">Send</button><button id="discardButton">Discard</button></li>`;
  26.  
  27.             addedUL.innerHTML += liElement;
  28.         }
  29.        
  30.         input.value = '';
  31.  
  32.         let sendButton = document.querySelector('#sendButton');
  33.         let discardButton = document.querySelector('#discardButton');
  34.        
  35.         sendButton.addEventListener('click', sendGift);
  36.         discardButton.addEventListener('click', discardGift);
  37.     });
  38.    
  39.     function getElementByInnerText(innerText, tagName) {
  40.         let listOfElements = document.getElementsByTagName(tagName);
  41.        
  42.         for (let i = 0; i < listOfElements.length; i++) {
  43.             if (listOfElements[i].innerText === innerText) {
  44.                 return listOfElements[i];
  45.             }
  46.         }
  47.     }
  48.    
  49.     function sendGift(event) {
  50.         let name = event.target.parentNode.firstChild.nodeValue;
  51.         sentGifts.push(name);
  52.        
  53.         sentUL = getElementByInnerText('Sent gifts', 'h2').parentNode.getElementsByTagName('ul')[0];
  54.    
  55.         let list = buildUL(sentGifts, false);
  56.         sentUL.innerHTML = list;
  57.        
  58.         buildListWithGifts(name);
  59.     };
  60.    
  61.     function discardGift(event) {
  62.         let name = event.target.parentNode.firstChild.nodeValue;
  63.         discardedGifts.push(name);
  64.        
  65.         discardedUL = getElementByInnerText('Discarded gifts', 'h2').parentNode.getElementsByTagName('ul')[0];
  66.    
  67.         let list = buildUL(discardedGifts, false);
  68.         discardedUL.innerHTML = list;
  69.        
  70.         buildListWithGifts(name);
  71.     };
  72.        
  73.     function buildUL(elements, withButtons) {
  74.         let list = "";
  75.    
  76.         for (let i = 0; i < elements.length; i++) {
  77.             let buttons = "<button id='sendButton' onclick='sendGift(event)'>Send</button><button id='discardButton' onclick='discardGift(event)'>Discard</button>";
  78.             let li = "<li class='gift'>" + elements[i];
  79.    
  80.             if (withButtons) {
  81.                 li += buttons;
  82.             }
  83.    
  84.             li += "</li>";
  85.             list += li;
  86.         }
  87.    
  88.         return list;
  89.     };
  90.  
  91.     function buildListWithGifts(elementToRemove) { 
  92.         if (elementToRemove) {
  93.             const index = addedGifts.indexOf(elementToRemove);
  94.    
  95.             if (index > -1) {
  96.                 addedGifts.splice(index, 1);
  97.             }
  98.         }
  99.        
  100.         let list = buildUL(addedGifts, true);
  101.        
  102.         addedUL.innerHTML = list;
  103.     }    
  104. }
  105.  
Add Comment
Please, Sign In to add comment