Advertisement
ilianrusev

01. Music Site

Jan 31st, 2022
160
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function solve() {
  2. document.getElementById("add-btn").type = "button";
  3. let genreinput = document.getElementById("genre");
  4. let nameinput = document.getElementById("name");
  5. let authorinput = document.getElementById("author");
  6. let dateinput = document.getElementById("date");
  7.  
  8. let buttonAdd = document.getElementById("add-btn")
  9.  
  10.  
  11. buttonAdd.addEventListener("click", onClick)
  12.  
  13. let count = 0;
  14.  
  15. function onClick() {
  16. if (genreinput.value != "" &&
  17. nameinput.value != "" &&
  18. authorinput.value != "" &&
  19. dateinput.value != "") {
  20.  
  21. let divHitsInfo = document.createElement("div");
  22. divHitsInfo.classList = "hits-info";
  23. let img = document.createElement("img");
  24. img.src = "./static/img/img.png"
  25. let headingGenres = document.createElement("h2");
  26. let headingName = document.createElement("h2");
  27. let headingAuthor = document.createElement("h2");
  28. let headingDate = document.createElement("h3");
  29.  
  30. let buttonSave = document.createElement("button");
  31. buttonSave.classList = "save-btn";
  32. buttonSave.textContent = "Save song"
  33.  
  34. buttonSave.addEventListener("click", onSave)
  35.  
  36. let buttonLike = document.createElement("button");
  37. buttonLike.classList = "like-btn";
  38. buttonLike.textContent = "Like song";
  39.  
  40. buttonLike.addEventListener("click", onLike);
  41.  
  42. let buttonDelete = document.createElement("button");
  43. buttonDelete.classList = "delete-btn"
  44. buttonDelete.textContent = "Delete";
  45.  
  46. buttonDelete.addEventListener("click", onDelete)
  47.  
  48.  
  49. headingGenres.textContent = `Genre: ${genreinput.value}`;
  50. headingName.textContent = `Name: ${nameinput.value}`;
  51. headingAuthor.textContent = `Author: ${authorinput.value}`;
  52. headingDate.textContent = `Date: ${dateinput.value}`
  53.  
  54. divHitsInfo.appendChild(img);
  55. divHitsInfo.appendChild(headingGenres)
  56. divHitsInfo.appendChild(headingName)
  57. divHitsInfo.appendChild(headingAuthor)
  58. divHitsInfo.appendChild(headingDate)
  59. divHitsInfo.appendChild(buttonSave)
  60. divHitsInfo.appendChild(buttonLike)
  61. divHitsInfo.appendChild(buttonDelete)
  62.  
  63. document.querySelector(".all-hits-container").appendChild(divHitsInfo);
  64.  
  65. genreinput.value = '';
  66. nameinput.value = '';
  67. authorinput.value = '';
  68. dateinput.value = '';
  69.  
  70. function onLike(ev) {
  71. count++
  72. document.querySelector(".likes").children[0].textContent = `Total Likes: ${count}`
  73. ev.target.disabled = true;
  74. }
  75.  
  76. function onSave() {
  77. document.querySelector(".saved-container").appendChild(divHitsInfo)
  78. divHitsInfo.removeChild(buttonSave)
  79.  
  80. divHitsInfo.removeChild(buttonLike)
  81. }
  82.  
  83. function onDelete(ev) {
  84. ev.target.parentNode.parentNode.removeChild(divHitsInfo);
  85.  
  86. }
  87. }
  88. }
  89. }
Advertisement
RAW Paste Data Copied
Advertisement