Advertisement
Guest User

Untitled

a guest
Feb 25th, 2020
93
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.23 KB | None | 0 0
  1. function solve() {
  2.  
  3. let author = document.getElementById('creator');
  4. let title = document.getElementById('title');
  5. let category = document.getElementById('category');
  6. let content = document.getElementById('content');
  7.  
  8. let createButton = document.querySelector('button');
  9.  
  10. createButton.addEventListener('click', (e) => {
  11. e.preventDefault();
  12.  
  13. let articleSection = document.querySelector('main section');
  14.  
  15. // Article
  16. let articleElement = document.createElement('article');
  17.  
  18. // Title
  19. let titleH1 = document.createElement('h1');
  20. titleH1.innerHTML = title.value;
  21. articleElement.appendChild(titleH1);
  22.  
  23. // Paragraph
  24. let categoryP = document.createElement('p');
  25. categoryP.textContent = "Category:"
  26. let categoryStrong = document.createElement('strong');
  27. categoryStrong.innerHTML = category.value;
  28. categoryP.appendChild(categoryStrong);
  29. articleElement.appendChild(categoryP);
  30.  
  31. // Creator
  32. let creatorP = document.createElement('p');
  33. creatorP.textContent = "Creator:"
  34. let creatorStrong = document.createElement('strong');
  35. creatorStrong.innerHTML = author.value;
  36. creatorP.appendChild(creatorStrong);
  37. articleElement.appendChild(creatorP);
  38.  
  39. // Content
  40. let contentP = document.createElement('p');
  41. contentP.innerHTML = content.value;
  42. articleElement.appendChild(contentP);
  43.  
  44. // Buttons
  45. let buttonsDiv = document.createElement('div');
  46. buttonsDiv.classList.add('buttons');
  47.  
  48. let deleteButton = document.createElement('button');
  49. deleteButton.innerHTML = 'Delete';
  50. deleteButton.classList.add('btn', 'delete');
  51. deleteButton.addEventListener('click', function (event) {
  52. const article = event.target.parentElement.parentElement;
  53. document.querySelector('main section').removeChild(article);
  54. });
  55. buttonsDiv.appendChild(deleteButton);
  56.  
  57. let archiveButton = document.createElement('button');
  58. archiveButton.innerHTML = 'Archive';
  59. archiveButton.classList.add('btn', 'archive');
  60. archiveButton.addEventListener('click', function (event) {
  61. const archiveTitle = event.target.parentElement.parentElement.querySelector('h1').innerHTML;
  62.  
  63. const li = document.createElement('li');
  64. li.innerHTML = archiveTitle;
  65.  
  66. const archiveSection = document.querySelector('.archive-section ul');
  67. archiveSection.appendChild(li);
  68.  
  69. const items = Array.from(archiveSection.children);
  70. items.sort(function (a, b) {
  71. return a.innerHTML.localeCompare(b.innerHTML);
  72. });
  73.  
  74. // Remove all
  75. for (i = 0; i < items.length; ++i) {
  76. archiveSection.removeChild(items[i]);
  77. }
  78.  
  79. // Add sorted
  80. for (i = 0; i < items.length; ++i) {
  81. archiveSection.appendChild(items[i]);
  82. }
  83.  
  84. const article = event.target.parentElement.parentElement;
  85. document.querySelector('main section').removeChild(article);
  86. });
  87.  
  88. buttonsDiv.appendChild(archiveButton);
  89. articleElement.appendChild(buttonsDiv);
  90. articleSection.appendChild(articleElement);
  91. });
  92. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement