Музика, що нас захоплює (2 етап ІОІТ 2017)

Темою другого етапу номінації є Музика, що нас захоплює.

Вам пропонується виконати три завдання, пов'язані з музикою. Кожне завдання пов'язане з однією з тенологій: HTML, CSS, JavaScript.

Примітка: як розв'язок, приймаються виключно ті файли, які вказані в кожному із завдань. Вважається, що файл розв'язку поміщається у папку з вихідними файлами й опісля робота перевіряється. Редагування інших файлів у теці ніяк не вплине на процес перевірки.

Розв'язки перевірятимуться в Chrome 60+ або еквівалетному браузері.

Завдання 1. HTML

Використовуючи стилі, подані у файлі initial.css, відредагувати файл index.html та зробити розмітку статті Як музика вплаває на продуктивність. Очікуваний результат поданий у файлі preview.png

Необхідні для завдання матеріали знаходять в теці з назвою 1.

На що звертається увага

  • Наявність заголовків, абзаців, блоків цитат, списків, посилань
  • Використання елементів HTML 5
  • Логічно-побудована структура в HTML 5 Outliner
  • Відсутність помилок у W3C Validator

Мій розв'язок

Завдання 2. CSS

Використовуючи подану у файлі index.html розмітку відредагувати файл solution.css так, щоб утворилася музична нота, відповідно до поданої на зразку.

Необхідні для завдання матеріали знаходять в теці з назвою 2.

Завдання можна виконувати частково.

На що звертається увага

  • Наявність елементів ноти
  • Використання псевдоелементів ::before, ::after
  • Наявність градієнтної заливки на кожній з частин ноти

Мій розв'язок

Завдання 3. JavaScript

У теці 3 поданий макет Антоніо Вівальді – Пори року. Редагуючи файл solution.js зробити так, щоб при кліку на відповідну пору року програвався музичний файл, на який вказує посилання.

На що звертається увага

  • Використання стандартів ES 2015 і вище
  • Відсутність переходів при кліку на посилання на «пори року»
  • Клік по іншому посиланні зупиняє поточний трек
  • Повторний клік на посиланні призупиняє відтворення музики
  • При наведенні на посилання відображається кнопка «play» або «pause» в залежності від стану програвача

Мій розв'язок