rockPaperScissors

rockPaperScissors

Делаем структуру нашего приложения

Уже умеем

Создай тег «h1» и напиши туда название своего приложения.

Уже умеем

Создай тег «span» и укажи у него внутри текст: Choose:

Добавь этим элементам атрибут «class» со значением «player».

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

Уже умеем

Создай три кнопки и укажи у них вот такие названия: rock, paper, scissors.

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

Уже умеем

Создай два тега «span» и укажи у них вот такой текст: Player, Bot.

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

Уже умеем

Создай два тега «img» и укажи у них атрибут «src». Сделай так, чтобы значение атрибута «src» было равно вот такой ссылке: https://bit.ly/31VARxz

А теперь чуточку дизайна

Уже делали

Сделай так, чтобы все строчные элементы были в центре. Поменяй цвет заднего фона у всего сайта и цвет букв.

Уже делали

Обратись к элементу «button» и укажи у него вот такие свойства: background-color, color, border-radius, width.

Уже делали

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

Уже делали

Обратись к классу «player» и укажи у него вот такие свойства: margin, font-size

Оживим наше приложение

Multiple Choice

Какая конструкция поможет нам создать пустой список?

• let arr = {}

• let arr = "{}"

• let arr = ["something"]

• let arr = []

Уже делали

Создай пустой список с именем «images». Заполни этот список вот такими ссылками:

"https://bit.ly/31VARxz", "https://bit.ly/3lJ1gGS", "https://bit.ly/3jLehy2"

Multiple Select

Какие два метода помогают найти нам элементы на нашей странице?

• innerText()

• querySelectorAll()

• querySelector()

• searchForTheElem()

Уже делали

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

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

Уже делали

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

Multiple Choice

Какое ключевое слово поможет нам создать цикл со счетчиком?

• let

• for

• setInterval()

• innerText

Уже делали

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

Уже делали

Добавь в цикл вот такую конструкцию:

buttons[i].addEventListener("click",function(){

 })

Multiple Choice

При помощи какого метода мы можем сменить значение атрибута «src».

• innerValue()

• value()

• setAttribute()

• changeImg()

Уже делали

В функции метода «addEventListener» делаем следующие шаги:

Вызови у нулевого элемента, который хранится в переменной «players», метод «setAttribute». Укажи у него вот такие параметры: "src", images[i]

Уже делали

Создай переменную «random» присвой ей конструкцию для получения рандомного числа от 0 до 2.

Уже делали

Вызови у первого элемента, который хранится в переменной «players», метод «setAttributes». Укажи у него вот такие параметры: "src",images[random]

Уже делали

Создаем if-блок и пишем у него вот такое условие:

(i == 0 && random == 2) || (i == 1 && random == 0) || (i == 2 && random == 1)

Уже делали

Если условие выдает правду, то текст в элементе «h1» должен поменяться на - «Player won». Также цвет этого текста должен измениться.

Уже делали

Выйди из блока-if и добавь конструкцию «else if». Укажи у этой конструкции вот такое условие: i == random. Если условие правда, то поменяй текст в элементе «h1» на - «Draw».

Также поменяй цвет текста в элементе «h1».

Уже делали

Выйди из else if - блока.

Добавь else-блок, если этот блок выполняется, то запускай вот такой код:

h1.innerText = "Bot won"; 

   h1.style.color = "red";