dimoBs

Untitled

Oct 23rd, 2021
760
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. window.addEventListener('load', solve);
  2.  
  3. function solve(ev) {
  4.     const genre = document.querySelector('#genre');
  5.     const nameSong = document.querySelector('#name');
  6.     const author = document.querySelector('#author')
  7.     const btnAdd = document.querySelector('button');
  8.     const dateInput = document.querySelector('#date');
  9.     const div = document.querySelector('.all-hits-container');
  10.     const totalLikes = document.querySelector('#total-likes p')
  11.     console.log(totalLikes.textContent);
  12.     const savedSong = document.querySelector('.saved-container');
  13.     btnAdd.addEventListener('click', onAdd);
  14.     let allLikes = 0;
  15.     // genre.value = 'Genere name'
  16.     // //console.log(genre.value);
  17.     // nameSong.value = "I Love You"
  18.     // author.value = 'Rihana the best'
  19.     // dateInput.value = '27.18.2020'
  20.  
  21.  
  22.  
  23.     function onAdd(ev) {
  24.         ev.preventDefault();
  25.  
  26.  
  27.         if (genre.value == "" || nameSong.value == "" || author.value == "" || dateInput.value == "") {
  28.             return;
  29.         }
  30.  
  31.         //let validDate = dateInput.value.
  32.  
  33.         const divHis = creatElement('div', undefined, 'hits-info');
  34.         const img = creatElement('img');
  35.         img.src = "./static/img/img.png"
  36.         const h2 = creatElement('h2', `Genre: ${genre.value}`);
  37.         const h21 = creatElement('h2', `Name: ${nameSong.value}`)
  38.         const h22 = creatElement('h2', `Author: ${author.value}`)
  39.         const h31 = creatElement('h3', `Date: ${convertDate(dateInput.value)}`);
  40.         const btnSaveSong = creatElement('button', `Save song`, 'save-btn');
  41.  
  42.         btnSaveSong.addEventListener('click', (saved) => {
  43.             let wholeEl = (saved.target.parentNode);
  44.             wholeEl.querySelectorAll('button').forEach(x => x.remove())
  45.             const btnDelete = creatElement('button', `Delete`, `delete-btn`);
  46.             wholeEl.appendChild(btnDelete);
  47.             savedSong.appendChild(wholeEl)
  48.             btnDelete.addEventListener('click', (onD) => {
  49.             (onD.target.parentNode).remove();
  50.             })
  51.  
  52.         })
  53.         const btnLike = creatElement('button', `Like song`, 'like-btn');
  54.  
  55.  
  56.         btnLike.addEventListener('click', (evt) => {
  57.             allLikes++;
  58.             totalLikes.textContent = `Total Likes: ${allLikes}`;
  59.             evt.target.parentNode.querySelectorAll('button')[1].disabled = true;
  60.             //   evt.target.parentNode.querySelectorAll('buttons')[1].disable = true
  61.         })
  62.         const btnDelete = creatElement('button', `Delete`, 'delete-btn');
  63.  
  64.  
  65.         [img, h2, h21, h22, h31, btnSaveSong, btnLike, btnDelete].map(x => divHis.appendChild(x));
  66.         div.appendChild(divHis)
  67.  
  68.         btnDelete.addEventListener('click', (del) => {
  69.             (del.target.parentNode).remove();
  70.         })
  71.  
  72.         function creatElement(type, content, attribute) {
  73.             const el = document.createElement(type);
  74.             if (attribute) {
  75.                 el.setAttribute('class', attribute); //atribute = class
  76.                 el.textContent = content;
  77.             } else if (content) {
  78.                 el.textContent = content;
  79.             }
  80.             return el;
  81.         }
  82.  
  83.         function convertDate(dateValue) {
  84.             while (dateValue.includes('/')) {
  85.                 dateValue = dateValue.replace('/', '.')
  86.             }
  87.  
  88.             return dateValue;
  89.         }
  90.  
  91.  
  92.         genre.value = ''
  93.         nameSong.value = ""
  94.         author.value = ''
  95.         dateInput.value = ''
  96.  
  97.     }
  98.  
  99.  
  100.  
  101. }
RAW Paste Data