Показать сообщение отдельно
  #10 (permalink)  
Старый 11.04.2020, 18:58
Интересующийся
Отправить личное сообщение для knoxville88 Посмотреть профиль Найти все сообщения от knoxville88
 
Регистрация: 08.04.2020
Сообщений: 14

voraa,
const container = document.querySelector('.container');
const songsContainer = container.querySelector('.songs-container');
const addButton = container.querySelector('.input__btn_add');
const resetButton = container.querySelector('.input__btn_reset');

function doubleClickHandler(event) {
    event.target.textContent = playListTitles[Math.floor(Math.random() * playListTitles.length)];

    document.querySelector('.cover__heading').removeEventListener('dblclick', doubleClickHandler);
}

document.querySelector('.cover__heading').addEventListener('dblclick', doubleClickHandler);

const playListTitles = [
    'Игорь Тальков. Лучшее',
    'Музыка категории Б',
    'Подборка с фестиваля FYRE'
];

document.querySelector('.cover__heading').addEventListener('dblclick', function (event) {
    event.target.textContent = playListTitles[Math.floor(Math.random() * playListTitles.length)];
});

function renderAdded() {
  const songs = songsContainer.querySelectorAll('.song');
  const noSongsElement = container.querySelector('.no-songs');

  if (songs.length === 0) {
    resetButton.setAttribute('disabled', true);
    resetButton.classList.add('input__btn_disabled');
    noSongsElement.classList.remove('no-songs_hidden');
  } else {
    resetButton.removeAttribute('disabled');
    resetButton.classList.remove('input__btn_disabled');
    noSongsElement.classList.add('no-songs_hidden');
  }
}


function createSong(artistValue, songValue) {
    const trackContainer = document.createElement('div');
    trackContainer.classList.add('song');

    const artistElement = document.createElement('h4');
    artistElement.classList.add('song__artist');
    artistElement.textContent = artistValue;

    const titleElement = document.createElement('p');
    titleElement.classList.add('song__title');
    titleElement.textContent = songValue;

    const songButtonElement = document.createElement('button');
    songButtonElement.classList.add('song__like');

    trackContainer.appendChild(artistElement);
    trackContainer.appendChild(titleElement);
    trackContainer.appendChild(songButtonElement);

    return trackContainer;
}

function addSong(event) {
    event.preventDefault();
    const form = document.forms.add;
    const artist = form.elements.artist;
    const song = form.elements.song;
    const trackContainer = createSong(artist.value, song.value);

    songsContainer.appendChild(trackContainer);

    form.reset();

    renderAdded();
}

const artistInput = document.querySelector('.input__text_artist');
const songInput = document.querySelector('.input__text_song');




function resetPlaylist() {
  songsContainer.innerHTML = '';

  renderAdded();
}

addButton.addEventListener('click', addSong);
resetButton.addEventListener('click', resetPlaylist);

renderAdded();


songsContainer.addEventListener('click', function (event) {
    if (event.target.classList.contains('song__like')) {
      event.target.classList.toggle('song__like_active');
    }
});


console.log(document.forms);
const form = document.forms.add;

form.addEventListener('input', function (event) {
  if (artist.value.length === 0 || song.value.length === 0) {
  console.log('Кнопка выключена');
  }
  else {
  console.log('Кнопка включена');
  }
});
Ответить с цитированием