Advertisement
ralichka

Untitled

Oct 23rd, 2020
1,883
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function solve(){
  2.    let h2 = document.querySelectorAll('h2')[0];
  3.    let section = h2.parentElement;
  4.  
  5.    let author = document.getElementById('creator');
  6.    let title = document.getElementById('title');
  7.    let category = document.getElementById('category');
  8.    let content = document.getElementById('content');
  9.  
  10.    let createButton = document.querySelector('form').lastElementChild;
  11.  
  12.    createButton.addEventListener('click', (e) =>{
  13.       e.preventDefault();
  14.  
  15.       //create elements
  16.       let article = document.createElement('article');
  17.       let h1 = document.createElement('h1');
  18.       let pCategory = document.createElement('p');
  19.       let pCreator = document.createElement('p');
  20.       let pContent = document.createElement('p');
  21.       let div = document.createElement('div');
  22.       let deleteButton = document.createElement('button');
  23.       let archiveButton = document.createElement('button');
  24.  
  25.       //set elements content
  26.  
  27.       h1.textContent = title.value;
  28.       pCategory.innerHTML = `Category:<strong>${category.value}</strong>`;
  29.       pCreator.innerHTML = `Creator:<strong>${author.value}</strong>`;
  30.       pContent.textContent = content.value;
  31.       div.className='buttons';
  32.       deleteButton.className = 'btn delete';
  33.       deleteButton.textContent = 'Delete';
  34.       archiveButton.className =  'btn archive';
  35.       archiveButton.textContent = 'Archive';
  36.  
  37.  
  38.       //append children to parents
  39.       //1. deleteButton, archiveButton = > div
  40.       div.appendChild(deleteButton);
  41.       div.appendChild(archiveButton);
  42.  
  43.       //2. h1, pCategory, pCreator,pContent, div => article
  44.       article.appendChild(h1);
  45.       article.appendChild(pCategory);
  46.       article.appendChild(pCreator);
  47.       article.appendChild(pContent);
  48.       article.appendChild(div);
  49.  
  50.       //3. article => section
  51.       section.appendChild(article);
  52.  
  53.       deleteButton.addEventListener('click', ()=>{
  54.          article.remove();
  55.       })
  56.  
  57.       archiveButton.addEventListener('click', () =>{
  58.  
  59.          let ulArchive = document.querySelector('.archive-section ul');
  60.          
  61.          
  62.          let liArchive = document.createElement('li');
  63.          liArchive.textContent = h1.textContent;
  64.    
  65.  
  66.          Array.from(ulArchive.getElementsByTagName('li'))
  67.             .sort((a,b) =>a.textContent.localeCompare(b.textContent))
  68.             .forEach(li => ulArchive.appendChild(li));
  69.          
  70.            
  71.          
  72.  
  73.          article.remove();
  74.          
  75.       })
  76.  
  77.    })
  78.  
  79.  
  80.  
  81.   }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement