Advertisement
Liliana797979

1. Music site - js advanced exam

Feb 26th, 2022
845
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function solve() {
  2.     let inputElements = document.querySelector('form').querySelectorAll('input');
  3.     let input = {
  4.         genre: inputElements[0],
  5.         name: inputElements[1],
  6.         author: inputElements[2],
  7.         date: inputElements[3],
  8.     };
  9.  
  10.     let addButton = document.querySelector('#add-btn');
  11.     addButton.addEventListener('click', addSong);
  12.  
  13.     let addedSongsElement = document.querySelectorAll('.all-hits-container')[0];
  14.     let savedSongs = document.querySelectorAll('.saved-container')[0];
  15.     let pLikesCountElement = document.querySelectorAll('.likes')[0].querySelector('p');
  16.  
  17.     function addSong(e){
  18.         e.preventDefault();
  19.  
  20.         if (input.name.value == '' || input.genre.value == ''|| input.author.value == '' || input.date.value == '') {
  21.             return;
  22.         }
  23.  
  24.         let divElement = createElement('div', '', 'hits-info');
  25.  
  26.         let imageElement = document.createElement('img');
  27.         imageElement.setAttribute('src', './static/img/img.png');
  28.  
  29.         let h2Genre = createElement('h2', 'Genre: ' + input.genre.value);
  30.         let h2Name = createElement('h2', 'Name: ' + input.name.value);
  31.         let h2Author = createElement('h2', 'Author: ' + input.author.value);
  32.         let h3Date = createElement('h3', 'Date: ' + input.date.value);
  33.  
  34.         let saveButton = createElement('button', 'Save song', 'save-btn');
  35.         let likeButton = createElement('button', 'Like song', 'like-btn');
  36.         let deleteButton = createElement('button', 'Delete', 'delete-btn');
  37.  
  38.         divElement.appendChild(imageElement);
  39.         divElement.appendChild(h2Genre);
  40.         divElement.appendChild(h2Name);
  41.         divElement.appendChild(h2Author);
  42.         divElement.appendChild(h3Date);
  43.         divElement.appendChild(saveButton);
  44.         divElement.appendChild(likeButton);
  45.         divElement.appendChild(deleteButton);
  46.  
  47.         addedSongsElement.appendChild(divElement);
  48.  
  49.         input.name.value = '';
  50.         input.author.value  = '';
  51.         input.genre.value  = '';
  52.         input.date.value  = '';
  53.  
  54.         deleteButton.addEventListener('click', deleteSong);
  55.         likeButton.addEventListener('click', increaseLikes);
  56.         saveButton.addEventListener('click', saveSong);
  57.     }
  58.  
  59.     function saveSong(e){
  60.         let elementToMove = e.currentTarget.parentElement;
  61.         savedSongs.appendChild(elementToMove);
  62.  
  63.         let buttons = elementToMove.querySelectorAll('button');
  64.  
  65.         let saveButton =buttons[0];
  66.         let likeButton =buttons[1];
  67.  
  68.         saveButton.remove();
  69.         likeButton.remove();
  70.     }
  71.  
  72.     function increaseLikes(e){
  73.         let pInfo = pLikesCountElement.textContent.split(' ');
  74.         let count = Number(pInfo[2]);
  75.         count++;
  76.         pLikesCountElement.textContent = `Total Likes: ${count}`;
  77.         let button = e.currentTarget;
  78.         button.setAttribute('disabled', '');
  79.     }
  80.  
  81.     function deleteSong(e){
  82.         let parentElement = e.currentTarget.parentElement;
  83.         parentElement.remove();
  84.  
  85.         //let pInfo = pLikesCountElement.textContent.split(' ');
  86.         //let count = Number(pInfo[2]);
  87.        // count--;
  88.         //pLikesCountElement.textContent = `Total Likes: ${count}`;
  89.     }
  90.  
  91.     function createElement(tagName, content, className){
  92.         let element = document.createElement(tagName);
  93.         element.textContent = content;
  94.         if(className){
  95.               element.classList.add(className);
  96.            }
  97.  
  98.         return element;
  99.      }
  100. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement