Музика, що нас захоплює (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» в залежності від стану програвача
Мій розв'язок