Vinyl project

Vinyl project

Создадим каркас для нашего проигрывателя

Уже умеем

Создай в элементе «body» тег «div» и укажи у него класс «winyBox». Внутри тега «div» с классом «winyBox» создай еще один тег «div». Укажи у него класс «light».

Уже умеем

Создай элемент «img» и укажи у него в параметре «src» ссылку на какую-нибудь картинку. После этого создай элемент «div» с атрибутом «class» и значением - btnBox.

Уже умеем

Внутри элемента «div» с классом «btnBox» укажи две кнопке с классами: «start» и «stop».

Также укажи этим кнопочкам названия: «Start» и «Stop».

Ты можешь не использовать предложенные названия, а придумать свои.

Задизайнем наш проигрыватель

Уже умеем

Сделай так, чтобы все строчные элементы, которые находятся внутри элемента «body» встали по центру. Сделай так, чтобы у этого элемента появился отступ сверху.

Уже умеем

Обратись к классу «winyBox» и укажи у него свойства: text-align:center, position:relative, width, height, border, display:inline-block, border-radius.

Уже умеем

Обратись к элементу «img» и укажи у него свойства: margin-top, width.

Обратись к классу «btnBox» и укажи у него свойства: margin-top, text-align: right.

Что-то новое

Сейчас мы будем создавать анимацию для картинки. Для этого мы должны воспользоваться специальной CSS-конструкцией - @keyframes. Воспользуйся этим ключевым словом и добавь после него название анимации - «winimove».

Что-то новое

У анимации должно быть какое-то начало и конец. Указываем внутри наших фигурных скобок ключевое слово - «from». После этого ставим фигурные скобки и указываем свойство «transform» со значением - rotate(0deg)

Что-то новое

Указываем внутри наших фигурных скобок ключевое слово - «to». После этого ставим фигурные скобки и указываем свойство «transform» со значением - rotate(360deg)

Уже умеем

Теперь будем заниматься созданием нашего индикатора.

Обращаемся к классу «light» и указываем у него свойства: width, height, background-color, border-radius:50%

Запускаем наш проигрователь

Multiple Choice

При помощи какого ключевого слова мы можем создавать переменные в JS ?

• setInterval

• set

• let

• function

Уже умеем

Создай переменную «startBtn» и присвой ей выбранный элемент с классом «start».

Создай переменную «stopBtn» и присвой ей выбранный элемент с классом «stop».

Создай переменную «vinyl» и присвой ей выбранный элемент «img».

Создай переменную «indicator» и присвой ей выбранный элемент с классом «light».

Multiple Choice

Как ты думаешь, при помощи какой конструкции мы можем создать новый звуковой объект.

• let Audio()

• new Audio()

• function Audio()

• for(let audio = 0; audio < 10; audio++)

Уже умеем

Создай переменную «soundPlay» и присвой создание объекта «Audio». Внутри круглых скобочек в кавычках укажи вот такую ссылку - https://raw.githubusercontent.com/Edukoht/

Edukoht.github.io/master/Vinyl%20project%20song/song.mp3

Уже умеем

Задай элементу «startBtn» слушатель событий с действием «click».

Уже умеем

Укажи в функции слушателя событий вот такой код: vinyl.style.animation = "winimove 40s infinite";

 indicator.style.backgroundColor = "green"

 soundPlay.play()

Уже умеем

Задай элементу «stopBtn» слушатель событий с действием «click». Укажи в функции этого слушателя событий вот такой код: vinyl.style.animation = "";

 indicator.style.backgroundColor = "red"

 soundPlay.pause()

Дополнитеьное задание

Создай новый проект на сайте «Repl.it». Создай в HTML элементы: img, и три кнопочки. Задай кнопочкам названия: «Жираф», «Зебра», «Слон».

Сделай так, чтобы при нажатии на кнопочку картинка в элементе «img» менялась на ту, что указана в названии кнопочки.

Пример: нажимаем на кнопку «Жираф» должна появиться картинка жирафа.