reactionGame

Открываем сайт repl.it.

Нажимаем на кнопку «New repl».

Выбираем пункт «HTML, CSS, JS».

Нажимай на кнопку «Create repl».

Нажимай на кнопку «Share».

Нажимай на кнопку «Copy».

Отправь ссылку, которую ты скопировал(а), в чат «урок».

Вернись обратно на сайт reple.it и открой вкладку «index.html».

Для начала мы будем писать весь наш код в файле «index.html» перед тегом «script».

Создай тег  «div» на своём сайте и укажи у него класс  «wrapper».

Добавь тег «h1» между тегами  «div». Напиши внутрь элемента «h1», как будет называться твоя игра на реакцию.

Добавь тег «h2» после тега «h1». Напиши внутрь тега «h2» слово «Результат» или «Result».

Создаем еще один элемент «div» после тега «h2» и указываем у него класс «indicator».

Добавляем тег «br» в наш код.

Добавь кнопочку после тега «br» и укажите у нее класс «start». Добавте кнопку название «Start the game» или любое другое.

Добавь еще один тег «br» после кнопочки.

Добавь кнопочку после тега «br» и укажите у нее класс «reaction». Добавь кнопке название «React» или любое другое.

Открой вкладку  «style.css».

Задай элементу «body» свойство «text-align» со значением «center».

Обратись к классу «indicator» и задай у него конструкцию «display: inline-block;», чтобы элемент стал строчно-блочным :)

Обратись к классу «indicator» и задай ему какие-нибудь размеры.

Обратись к классу «indicator» и задай ему свойство «background-color».

Обратись к классу «start» и задай ему какие-то размеры.

Обратись к классу «start» и cделай так, чтобы у этого элемента с этим классом не было рамки.

Сделайте так, чтобы у класса «start» появились свойства: color, border-radius, font-size и background-color.

Обратись к классу  «reaction» и добавь ему свойства: width, height, color, background-color, border: none, border-radius, font-size.

Обратись к элементу «button» и добавь ему свойство «margin-top» с каким-то значением.

Обратись к классу «wrapper» и добавь ему свойства: display: inline-block, width, height, border, margin-top.

Создай переменную «startBtn» и присвой ей выбранный элемент с классом «start». Не забудь воспользоваться конструкцией: document.querySelector("имя элемента, класса, ИД, который ищем").

Создай переменную «reactBtn» и присвой ей выбранный элемент с классом «reaction». Не забудь воспользоваться конструкцией: document.querySelector("имя элемента, класса, ИД, который ищем").

Создай переменную «textBox» и присвой ей выбранный элемент «h2». Не забудь воспользоваться конструкцией: document.querySelector("имя элемента, класса, ИД, который ищем").

Создай переменную «targetBlock» и присвой ей выбранный элемент c классом «indicator». Не забудь воспользоваться конструкцией: document.querySelector("имя элемента, класса, ИД, который ищем").

Создай переменную «randomNum» и присвой ей вот такую конструкцию: Math.floor(Math.random()*3)+1)*1000.

Добавь переменной «startBtn» действие «click». Не забудь использовать метод «addEventListener».

Напиши в функции метода «addEventListener» вот такую конструкцию: randomNum = (Math.floor(Math.random()*3)+1)*1000;

Создай переменную «time» и присвой ей значение «0».

Посмотри на следующий слайд и перепиши конструкцию «setTimeout».

Напиши в функцию элемента «setTimeout» конструкцию, которая поменяет цвет заднего фона у элемента «targetBlock».

Посмотри на следующий слайд и перепиши конструкцию «setInterval»

Добавь в функцию конструкции «setInterval» команду: time++

Добавь в функцию конструкции «setInterval» команду: textBox.innerText = time;

Добавь переменной «reactBtn» действие «click». Не забудь использовать метод «addEventListener».

Добавь в функцию метода «addEventListener» команду:  clearInterval(timer);

Напиши в функцию метода «addEventListener» конструкцию, которая поменяет цвет заднего фона у элемента «targetBlock» на начальный.