Практика. Используем события на странице проекта

Задания

1) Реализовать функционал, что после заполнения формы и нажатия кнопки "Подтвердить" новый фильм добавляется в список.
Страница не должна перезагружаться.

Новый фильм должен добавляться в movieDB.movies.

Для получения доступа к значению input - обращаемся к нему как input.value;

P.S. Здесь есть несколько вариантов решения задачи, принимается любой, но рабочий.

2) Если название фильма больше, чем 21 символ - обрезать его и добавить три точки

3) При клике на мусорную корзину - элемент будет удаляться из списка (сложно)

4) Если в форме стоит галочка "Сделать любимым" - в консоль вывести сообщение: "Добавляем любимый фильм"

5) Фильмы должны быть отсортированы по алфавиту */

Мои решения

Первым делом находим все необходимые элементы (форму, кнопку подтверждения добавления фильма, чекбокс для обозначения "любимого" фильма, а также поле ввода для добавления фильма):

Код

const addForm = document.querySelector('.add');
const addingInput = document.querySelector('.adding__input');
const addButton = addForm.querySelector('button');
const checkbox = addForm.querySelector("input[type='checkbox']");

Пишем функцию addNewFilm для добавления нового фильма. Вызывать эту функцию мы будем после клика на кнопку добавления фильма.

Для функции задаём параметр, назовём его list, в него при вызове функции будет передаваться массив movieDB.movies

Код

function addNewFilm(list) {

}

Получаем содержимое поля ввода фильма (то, что пользователь ввёл в это поле, название фильма) и сохраняем в переменную newFilm, попутно приводя к верхнему регистру

Код

function addNewFilm(list) {
let newFilm = addingInput.value.toUpperCase();
}

Далее проводим проверку на количество символов в названии фильма и если оно больше 21, обрезаем его с помощью метода slice()

Код

function addNewFilm(list) {
  let newFilm = addingInput.value.toUpperCase();
  if (newFilm.length > 21) {
  newFilm = `${newFilm.slice(0, 21)}...`;
  }
}

Теперь, пишем условие, что если поле ввода не пустая строка (то есть, если пользователь ввёл название фильма), то мы добавляем значение переменной newFilm в массив movieDB.movies, после чего запускаем функцию построения списка addFilm, передавая ей в параметры два аргумента: movieDB.movies и promoList,список фильмов на странице обновится и отсортируется по алфавиту.
Очищаем форму.

Код

Проводим проверку, нажат ли чекбокс для отметки фильма как любимого в форме добавления

Код

Ну и теперь пишем обработчик события для кнопки подтверждения добавления фильма, в нём мы убираем стандартное поведение браузера для клика на кнопке и вызываем функцию добавления фильма, передавая в качестве аргумента массив movieDB.movies:

Код

addButton.addEventListener('click', (e) => {
e.preventDefault();
addNewFilm(movieDB.movies);
});

Задание 3

Выполнил частично, поскольку:

а) при удалении элементов не происходит автоматическая корректировка их нумерации
б) решение не работает, если добавить еще один фильм в список через форму добавления

Код

const deleteBtns = document.querySelectorAll('.delete'); // собрал все кнопки удаления элементов

deleteBtns.forEach(btn => {
  btn.addEventListener('click', (e) => {
  e.preventDefault();
  e.target.parentElement.remove(); // удаляем родительский элемент кнопки, по которой был клик
  })
});

Решения преподавателя

Код

'use strict';

document.addEventListener('DOMContentLoaded', () => {

  const movieDB = {
  movies: [
  "Логан",
  "Лига справедливости",
  "Ла-ла лэнд",
  "Одержимость",
  "Скотт Пилигрим против..."
  ]
  };

  const adv = document.querySelectorAll('.promo__adv img'),
  poster = document.querySelector('.promo__bg'),
  genre = poster.querySelector('.promo__genre'),
  movieList = document.querySelector('.promo__interactive-list'),
  addForm = document.querySelector('form.add'),
  addInput = addForm.querySelector('.adding__input'),
  checkbox = addForm.querySelector('[type="checkbox"]');

  addForm.addEventListener('submit', (event) => {
  event.preventDefault();

  let newFilm = addInput.value;
  const favorite = checkbox.checked;

  if (newFilm) {

  if (newFilm.length > 21) {
  newFilm = `${newFilm.substring(0, 22)}...`;
  }

  if (favorite) {
  console.log("Добавляем любимый фильм");
  }

  movieDB.movies.push(newFilm);
  sortArr(movieDB.movies);

  createMovieList(movieDB.movies, movieList);
  }

  event.target.reset();

  });

  const deleteAdv = (arr) => {
  arr.forEach(item => {
  item.remove();
  });
  };

  const makeChanges = () => {
  genre.textContent = 'драма';

  poster.style.backgroundImage = 'url("img/bg.jpg")';
  };

  const sortArr = (arr) => {
  arr.sort();
  };

  function createMovieList(films, parent) {
  parent.innerHTML = "";
  sortArr(films);

  films.forEach((film, i) => {
  parent.innerHTML += `
  <li class="promo__interactive-item">${i + 1} ${film}
  <div class="delete"></div>
  </li>
  `;
  });

  document.querySelectorAll('.delete').forEach((btn, i) => {
  btn.addEventListener('click', () => {
  btn.parentElement.remove();
  movieDB.movies.splice(i, 1);

  createMovieList(films, parent);
  });
  });
  }

  deleteAdv(adv);
  makeChanges();
  createMovieList(movieDB.movies, movieList);

});


Имя *:
Email *:
Все смайлы
Код *: