Skip to content

Latest commit

 

History

History
90 lines (57 loc) · 5.1 KB

README.md

File metadata and controls

90 lines (57 loc) · 5.1 KB
Raw

Задача 1. Пианино

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

Описание

Реализовать виртуальное пианино из 5 клавиш. Каждая из клавиш при клике проигрывает свой звук:

Пианино

Пианино имеет 3 набора звуков: lower, middle и `higher.

Набор по умолчанию — middle.

При зажатой кнопке shift пианино работает в режиме lower.

При зажатой кнопке alt пианино работает в режиме higher.

После того как кнопка alt или shift отпущена, пианино возвращается в режим middle.

Интерфейс

Для изменения режима, в котором находится пианино, следует менять класс на теге <ul class="set middle">.

В режиме lower класс .middle меняется на .lower. Для higher — аналогично.

Для изменения звука кнопок следует менять src у тегов audio внутри соответствующих кнопок.

Материалы

Звуки клавиш

  • lower
  1. Клавиша 1
  2. Клавиша 2
  3. Клавиша 3
  4. Клавиша 4
  5. Клавиша 5
  • middle
  1. Клавиша 1
  2. Клавиша 2
  3. Клавиша 3
  4. Клавиша 4
  5. Клавиша 5
  • higher
  1. Клавиша 1
  2. Клавиша 2
  3. Клавиша 3
  4. Клавиша 4
  5. Клавиша 5

Реализация

В песочнице CODEPEN

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

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

В репозитории на 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-object/piano.
  3. Выполнить задание.
  4. Создать репозиторий на GitHub или BitBucket.
  5. Добавить репозиторий в проект git remote add homeworks %repo-url%, где %repo-url% — адрес созданного репозитория.
  6. Опубликовать код в репозиторий homeworks с помощью команды git push -u homeworks master.
  7. Прислать ссылку на репозиторий через личный кабинет на сайте netology.ru.