Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- function solve() {
- let author = document.getElementById('creator');
- let title = document.getElementById('title');
- let category = document.getElementById('category');
- let content = document.getElementById('content');
- let createButton = document.querySelector('button');
- createButton.addEventListener('click', (e) => {
- e.preventDefault();
- let articleSection = document.querySelector('main section');
- // Article
- let articleElement = document.createElement('article');
- // Title
- let titleH1 = document.createElement('h1');
- titleH1.innerHTML = title.value;
- articleElement.appendChild(titleH1);
- // Paragraph
- let categoryP = document.createElement('p');
- categoryP.textContent = "Category:"
- let categoryStrong = document.createElement('strong');
- categoryStrong.innerHTML = category.value;
- categoryP.appendChild(categoryStrong);
- articleElement.appendChild(categoryP);
- // Creator
- let creatorP = document.createElement('p');
- creatorP.textContent = "Creator:"
- let creatorStrong = document.createElement('strong');
- creatorStrong.innerHTML = author.value;
- creatorP.appendChild(creatorStrong);
- articleElement.appendChild(creatorP);
- // Content
- let contentP = document.createElement('p');
- contentP.innerHTML = content.value;
- articleElement.appendChild(contentP);
- // Buttons
- let buttonsDiv = document.createElement('div');
- buttonsDiv.classList.add('buttons');
- let deleteButton = document.createElement('button');
- deleteButton.innerHTML = 'Delete';
- deleteButton.classList.add('btn', 'delete');
- deleteButton.addEventListener('click', function (event) {
- const article = event.target.parentElement.parentElement;
- document.querySelector('main section').removeChild(article);
- });
- buttonsDiv.appendChild(deleteButton);
- let archiveButton = document.createElement('button');
- archiveButton.innerHTML = 'Archive';
- archiveButton.classList.add('btn', 'archive');
- archiveButton.addEventListener('click', function (event) {
- const archiveTitle = event.target.parentElement.parentElement.querySelector('h1').innerHTML;
- const li = document.createElement('li');
- li.innerHTML = archiveTitle;
- const archiveSection = document.querySelector('.archive-section ul');
- archiveSection.appendChild(li);
- const items = Array.from(archiveSection.children);
- items.sort(function (a, b) {
- return a.innerHTML.localeCompare(b.innerHTML);
- });
- // Remove all
- for (i = 0; i < items.length; ++i) {
- archiveSection.removeChild(items[i]);
- }
- // Add sorted
- for (i = 0; i < items.length; ++i) {
- archiveSection.appendChild(items[i]);
- }
- const article = event.target.parentElement.parentElement;
- document.querySelector('main section').removeChild(article);
- });
- buttonsDiv.appendChild(archiveButton);
- articleElement.appendChild(buttonsDiv);
- articleSection.appendChild(articleElement);
- });
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement