reactionGame

reactionGame

Первым делом

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

Потом

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

Потом

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

Потом

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

Потом

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

Потом

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

Потом

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

Начинаем программировать :)

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

Напоминание

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

Multiple Choice

Какой тег поможет нам создать коробку (контейнер) на нашем сайте?

• <box>

• <div>

• <elem>

• <br>

Хочу сам!

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

Multiple Choice

Какой тег мы можем использовать, чтобы написать название нашего проекта?

• <h1>

• <border>

• <text>

• <margin>

Хочу сам!

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

Multiple Choice

Какой текстовый тег мы можем использовать для записи результата?

• <ul>

• <h2>

• <table>

• <block>

Хочу сам!

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

Multiple Choice

С помощью какого элемента, мы можем создать прямоугольничек или квадратик на нашей странице?

• <square>

• <div>

• <box>

• <triug>

Хочу сам!

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

Multiple Choice

Какой тег мы можем использовать для переноса символа или строчного-элемента на новую строчку?

• <switcher>

• <break>

• <line>

• <br>

Хочу сам!

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

Multiple Choice

При помощи какого тега мы можем создать кнопочку на нашей странице?

• <li>

• <batton>

• <button>

• <hr>

Хочу сам!

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

Хочу сам!

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

Хочу сам!

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

Дизайн элементов

Теперь мы будем работать с CSS.

В первую очередь

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

Multiple Choice

Какое CSS-свойство поможет нам сделать наш текст по центру?

• transform: scale()

• text-transform: lowercase

• text-transform: uppercase

• text-align: center

Хочу сам!

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

Multiple Choice

С помощью какого свойства мы обращаемся к классу в CSS?

• .

• //

• #

• name

Хочу сам!

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

Multiple Select

С помощью каких CSS-свойств мы можем задавать размеры нашему элементу? PS: здесь должно быть два ответа

• width

• size

• height

• box

Хочу сам!

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

Multiple Choice

При помощи какого CSS-свойства мы можем добавить цвет заднего фона нашему элементу?

• backgorund-color

• color

• font-size

• text-decoration

Хочу сам!

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

Хочу сам!

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

Multiple Choice

При помощи какой конструкции мы можем убрать рамку у элемента?

• border: none;

• border: delete

• border: 2px solid;

• border: net

Хочу сам!

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

Multiple Choice

При помощи какого CSS-свойства мы можем закруглить нашу рамку?

• padding

• border-radius

• margin

• round

Multiple Choice

При помощи какого CSS-свойства мы можем увеличить размер букв?

• margin

• color

• backgorund-color

• font-size

Multiple Choice

При помощи какого CSS-свойства мы можем изменить цвет букв?

• color-text

• color

• change-color

• font-weight

Хочу сам!

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

Хочу сам!

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

Multiple Choice

При помощи какого свойства мы можем сделать отступ сверху от других элементов.

• margin-bottom

• margin-top

• padding-top

• padding-bottom

Хочу сам!

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

Хочу сам!

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

Multiple Choice

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

• CSS

• let

• HTML

• create

Хочу сам!

Создай переменную «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.

Multiple Choice

Какой метод мы можем использовать для добавления действия «click» какому-нибудь элементу?

• addEventListener

• addeventlistener

• addMovement

• addAction

Хочу сам!

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

Хочу сам!

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

Хочу сам!

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

Poll

Как вы думаете, с помощью какой функции мы можем сделать задержку?

• setDelay()

• setInterval()

• setTimeout()

Хочу сам!

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

Хочу сам!

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

Poll

Какая функция поможет нам выполнять какие-то действия через определенный промежуток времени бесконечное количество раз. PS: на этот вопрос ты можешь не знать ответа.

• setInterval()

• setRepeater

• setStoper()

• setSeter()

Хочу сам!

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

Хочу сам!

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

Хочу сам!

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

Хочу сам!

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

Хочу сам!

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

Хочу сам!

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