Skip to content

README.md

Latest commit

 

History

History
65 lines (41 loc) · 4.33 KB

README.md

File metadata and controls

65 lines (41 loc) · 4.33 KB
Raw

Задача 3. Добавить в корзину

В рамках домашнего задания к лекции «Принцип обработки событий»

Описание

На странице каталога товаров необходимо реализовать кнопку «Добавить в корзину»:

Каталог товаров

При клике на кнопку счетчик товаров у корзины должен увеличиваться.

Обратите внимание, что в каталоге уже реализован постраничный листинг товаров, который работает следующим образом: при клике на кнопку «Показать еще …» загружается еще несколько товаров, и они отображаются в списке. Кнопка «Добавить в корзину» должна работать и для новых загруженных товаров тоже.

Интерфейс

Список товаров имеет класс items-list. Кнопка «Добавить в корзину» имеет класс add-to-cart. Кроме того, у кнопки есть следующие атрибуты:

  • data-title — название товара;
  • data-price — цена товара.

Для добавления товара в корзину и обновления счетчика необходимо вызвать функцию addToCart. Она принимает следующие аргументы:

  • item — информация о товаре, объект со свойствами:
    • title — название товара;
    • price — цена товара.

Реализация

При реализации нельзя изменять HTML-код и CSS-стили и предоставленный JavaScript-код.

В песочнице CodePen

Реализуйте компонент во вкладке JS.

В онлайн-песочнице на CODEPEN.

Локально с использованием git

Реализацию необходимо поместить в файл ./js/cart.js. Файл уже подключен к документу, поэтому другие файлы изменять не требуется.

В репозитории на GitHub.

Инструкция по выполнению домашнего задания

В онлайн-песочнице

Потребуется только ваш браузер.

  1. Открыть код в песочнице.
  2. Нажать кнопку «Fork».
  3. Выполнить задание.
  4. Нажать кнопку «Save».
  5. Скопировать адрес страницы, открытой в браузере.
  6. Прислать скопированную ссылку через личный кабинет на сайте netology.ru.

Локально

Потребуются: браузер, редактор кода, система контроля версий git, установленная локально, и аккаунт на GitHub или BitBucket.

  1. Клонировать репозиторий с домашними заданиями git clone https://github.com/netology-code/hj-homeworks.git.
  2. Перейти в папку задания cd hj-homeworks/event-bubbling-capturing/shop.
  3. Выполнить задание.
  4. Создать репозиторий на GitHub или BitBucket.
  5. Добавить репозиторий в проект git remote add homeworks %repo-url%, где %repo-url% — адрес созданного репозитория.
  6. Опубликовать код в репозиторий homeworks с помощью команды git push -u homeworks master.
  7. Прислать ссылку на репозиторий через личный кабинет на сайте netology.ru.