Advertisement
ErolKZ

Untitled

Feb 17th, 2022
23
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.38 KB | None | 0 0
  1.  
  2. function solve() {
  3.  
  4. let divCollectionOfSongs = document.getElementsByClassName('all-hits-container')[0];
  5.  
  6. let addButtonElement = document.getElementById('add-btn');
  7.  
  8. let divHitsInfo = document.createElement('div');
  9.  
  10. divHitsInfo.classList.add('hits-info');
  11.  
  12. let imgElement = document.createElement('img');
  13.  
  14. imgElement.src = './static/img/img.png';
  15.  
  16. let h2GenreElement = document.createElement('h2');
  17.  
  18. let h2NameElement = document.createElement('h2');
  19.  
  20. let h2AuthorElement = document.createElement('h2');
  21.  
  22. let h3DateElement = document.createElement('h3');
  23.  
  24. let saveBtnElement = document.createElement('button');
  25.  
  26. saveBtnElement.classList.add('save-btn');
  27.  
  28. let likeBtnElement = document.createElement('button');
  29.  
  30. likeBtnElement.classList.add('like-btn');
  31.  
  32. let deleteBtnElement = document.createElement('button');
  33.  
  34. deleteBtnElement.classList.add('delete-btn');
  35.  
  36. saveBtnElement.textContent = 'Save song';
  37.  
  38. likeBtnElement.textContent = 'Like song';
  39.  
  40. deleteBtnElement.textContent = 'Delete';
  41.  
  42. let totalLikesDiv = document.querySelector('.likes p');
  43.  
  44. let likes = 0;
  45.  
  46. totalLikesDiv.textContent = `Total Likes: ${likes}`;
  47.  
  48. let divSavedSongsElement = document.getElementsByClassName('saved-container')[0];
  49.  
  50.  
  51.  
  52. addButtonElement.addEventListener('click', (e) => {
  53.  
  54. let genreElement = document.getElementById('genre');
  55.  
  56. let nameElement = document.getElementById('name');
  57.  
  58. let authorElement = document.getElementById('author');
  59.  
  60. let dateElement = document.getElementById('date');
  61.  
  62. divHitsInfo.appendChild(imgElement);
  63.  
  64. h2GenreElement.textContent = `Genre: ${genreElement.value}`;
  65.  
  66. h2NameElement.textContent = `Name: ${nameElement.value}`;
  67.  
  68. h2AuthorElement.textContent = `Author: ${authorElement.value}`;
  69.  
  70. h3DateElement.textContent = `Date: ${dateElement.value}`;
  71.  
  72. let pattern = /^\d{2}\.\d{2}\.\d{4}$/;
  73.  
  74. let arr = [genreElement.value, nameElement.value, authorElement.value, dateElement.value];
  75.  
  76.  
  77. if (arr.includes('') === false && pattern.test(dateElement.value)) {
  78.  
  79. divHitsInfo.appendChild(h2GenreElement);
  80.  
  81. divHitsInfo.appendChild(h2NameElement);
  82.  
  83. divHitsInfo.appendChild(h2AuthorElement);
  84.  
  85. divHitsInfo.appendChild(h3DateElement);
  86.  
  87. divHitsInfo.appendChild(saveBtnElement);
  88.  
  89. divHitsInfo.appendChild(likeBtnElement);
  90.  
  91. divHitsInfo.appendChild(deleteBtnElement);
  92.  
  93. divCollectionOfSongs.appendChild(divHitsInfo);
  94.  
  95. genreElement.value = null;
  96.  
  97. nameElement.value = null;
  98.  
  99. authorElement.value = null;
  100.  
  101. dateElement.value = null;
  102.  
  103. }
  104.  
  105. event.preventDefault();
  106.  
  107. });
  108.  
  109.  
  110. likeBtnElement.addEventListener('click', (e) => {
  111.  
  112. likes++;
  113.  
  114. totalLikesDiv.textContent = `Total Likes: ${likes}`;
  115.  
  116. likeBtnElement.disabled = true;
  117.  
  118. });
  119.  
  120.  
  121. saveBtnElement.addEventListener('click', (e) => {
  122.  
  123. divSavedSongsElement.appendChild(divHitsInfo);
  124.  
  125. saveBtnElement.remove();
  126.  
  127. likeBtnElement.remove();
  128.  
  129. likeBtnElement.disabled = false;
  130.  
  131. });
  132.  
  133.  
  134. deleteBtnElement.addEventListener('click', (e) => {
  135.  
  136. divHitsInfo.remove();
  137.  
  138. });
  139.  
  140.  
  141. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement