Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- function solve(){
- let h2 = document.querySelectorAll('h2')[0];
- let section = h2.parentElement;
- let author = document.getElementById('creator');
- let title = document.getElementById('title');
- let category = document.getElementById('category');
- let content = document.getElementById('content');
- let createButton = document.querySelector('form').lastElementChild;
- createButton.addEventListener('click', (e) =>{
- e.preventDefault();
- //create elements
- let article = document.createElement('article');
- let h1 = document.createElement('h1');
- let pCategory = document.createElement('p');
- let pCreator = document.createElement('p');
- let pContent = document.createElement('p');
- let div = document.createElement('div');
- let deleteButton = document.createElement('button');
- let archiveButton = document.createElement('button');
- //set elements content
- h1.textContent = title.value;
- pCategory.innerHTML = `Category:<strong>${category.value}</strong>`;
- pCreator.innerHTML = `Creator:<strong>${author.value}</strong>`;
- pContent.textContent = content.value;
- div.className='buttons';
- deleteButton.className = 'btn delete';
- deleteButton.textContent = 'Delete';
- archiveButton.className = 'btn archive';
- archiveButton.textContent = 'Archive';
- //append children to parents
- //1. deleteButton, archiveButton = > div
- div.appendChild(deleteButton);
- div.appendChild(archiveButton);
- //2. h1, pCategory, pCreator,pContent, div => article
- article.appendChild(h1);
- article.appendChild(pCategory);
- article.appendChild(pCreator);
- article.appendChild(pContent);
- article.appendChild(div);
- //3. article => section
- section.appendChild(article);
- deleteButton.addEventListener('click', ()=>{
- article.remove();
- })
- archiveButton.addEventListener('click', () =>{
- let ulArchive = document.querySelector('.archive-section ul');
- let liArchive = document.createElement('li');
- liArchive.textContent = h1.textContent;
- Array.from(ulArchive.getElementsByTagName('li'))
- .sort((a,b) =>a.textContent.localeCompare(b.textContent))
- .forEach(li => ulArchive.appendChild(li));
- article.remove();
- })
- })
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement