drumSimulator

drumSimulator

Наш любимый HTML

Просто изи

Создай тег «h1» и напиши туда название своего приложения. После этого создай семь кнопок, укажи внутри каждой из них тег «span» с классом «text». Заполни каждый тег «span» вот такими буквами: a, s, d, f, j, k, l.

Стилизуем наше приложение

Просто изи

Сделай так, чтобы у всего нашего приложения поменялся шрифт текста и все строчные элементы были по центру. Сделай так, чтобы фон был залит градиентом. Для этого ты можешь воспользоваться сайтом: https://cssgradient.io/

Просто изи

Измени цвет и размер текста у элемента «h1». Задай заголовку первого уровня отступ сверху.

Просто изи

Задай кнопочкам цвет заднего фона, отступ сверху, высоту и ширину.

Добавь рамку, сделай ее закругленной, добавь внешний отступ справа, измени цвет текста.

Добавь в свой код свойство: display: inline-block;

Multiple Choice

Что делает свойство font-weight?

• Меняет цвет текста

• Задает отступ сверху

• Меняет положение текста

• Меняет жирность текста

Просто изи

Обратись к классу «text». Укажи у него вот такие свойства:

 text-align: center;

  position: relative;

  top: 10px;

  font-size: 50px;

  font-weight: bold;

Переходим в JS

Просто изи

Создай переменную «allButtons», присвой ей выбранные элементы «button»

Multiple Choice

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

• function

• let

• check

• for

Multiple Choice

let names = ["Dasha", "Kolya", "Nikita"]

for(let i = 0; i < names.length; i++){

console.log("Hello :) !")

}

Сколько раз будет выведена фраза - «Hello :) !»

• 1

• 3

• 4

• 5

Multiple Choice

let names = ["Dasha", "Kolya", "Nikita"]

for(let i = 0; i < names.length; i++){

console.log(i)

}

Какие цифры будут выведены в консоль?

• 3,4,5

• 10,20,30

• 2,3,4

• 0,1,2

Просто изи

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

Просто изи

Внутри цикла сделай так, чтобы каждой кнопочке навешивался слушатель событий. Сделай так, чтобы при нажатии на кнопку создавалась переменная «buttomInnerHTML», и ей присваивалась конструкция: this.innerText.

Просто изи

Добавьте в функцию слушателя событий конструкцию: check(buttomInnerHTML);

Просто изи

Выходим из цикла. На новой строчке создаем еще один слушатель событий для элемента «document» с параметрами:

"keypress",function(event){

}

Просто изи

Внутри слушателя вызываем функцию «check» с параметром - event.key

Просто изи

Создаем функцию «check», передаем туда параметр «key».

Просто изи

Внутри функции «check» пишем ключевое слово «switch». После этого ставим круглые скобки, и указываем туда слово «key». После этого ставим фигурные скобки.

Просто изи

Внутри фигурных скобок конструкции «switch» указываем ключевое слово «case». После этого указываем "a", ставим двоеточие.

Просто изи

После двоеточия создаем переменную «sound1» присваиваем ей вот такую конструкцию: new Audio().

После этого вызываем к переменной «sound1» метод «play».

Указываем конструкцию «break»

Просто изи

После этого указываем ключевое слово «case». После этого указываем "s", ставим двоеточие.

После двоеточия создаем переменную «sound2» присваиваем ей вот такую конструкцию: new Audio().

После этого вызываем к переменной «sound2» метод «play».

Указываем конструкцию «break»

Просто изи

После этого указываем ключевое слово «case». После этого указываем "d", ставим двоеточие.

После двоеточия создаем переменную «sound3» присваиваем ей вот такую конструкцию: new Audio().

После этого вызываем к переменной «sound3» метод «play».

Указываем конструкцию «break»

Просто изи

После этого указываем ключевое слово «case». После этого указываем "f", ставим двоеточие.

После двоеточия создаем переменную «sound4» присваиваем ей вот такую конструкцию: new Audio().

После этого вызываем к переменной «sound4» метод «play».

Указываем конструкцию «break»

Просто изи

После этого указываем ключевое слово «case». После этого указываем "j", ставим двоеточие.

После двоеточия создаем переменную «sound5» присваиваем ей вот такую конструкцию: new Audio().

После этого вызываем к переменной «sound5» метод «play».

Указываем конструкцию «break»

Просто изи

После этого указываем ключевое слово «case». После этого указываем "k", ставим двоеточие.

После двоеточия создаем переменную «sound6» присваиваем ей вот такую конструкцию: new Audio().

После этого вызываем к переменной «sound6» метод «play».

Указываем конструкцию «break»

Просто изи

После этого указываем ключевое слово «case». После этого указываем "l", ставим двоеточие.

После двоеточия создаем переменную «sound7» присваиваем ей вот такую конструкцию: new Audio().

После этого вызываем к переменной «sound7» метод «play».

Указываем конструкцию «break»

Просто изи

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

Менторы помогут

https://raw.githubusercontent.com/Edukoht/

Edukoht.github.io/master/drumSimulator/sounds/sound1.mp3

https://raw.githubusercontent.com/Edukoht/

Edukoht.github.io/master/drumSimulator/sounds/sound2.mp3

https://raw.githubusercontent.com/Edukoht/

Edukoht.github.io/master/drumSimulator/sounds/sound3.mp3

https://raw.githubusercontent.com/Edukoht/

Edukoht.github.io/master/drumSimulator/sounds/sound4.mp3

Менторы помогут

https://raw.githubusercontent.com/Edukoht/

Edukoht.github.io/master/drumSimulator/sounds/sound5.mp3

https://raw.githubusercontent.com/Edukoht/

Edukoht.github.io/master/drumSimulator/sounds/sound6.mp3

https://raw.githubusercontent.com/Edukoht/

Edukoht.github.io/master/drumSimulator/sounds/sound7.mp3