guessTheColor

guessTheColor

Начинаем с HTML

Попробуй сам

В твоем HTML документе должны быть теги:

h1, h2,

h3 c классом «score»,

h3 c классом «time»,

шесть div-элементов с классом «colorBox»

Подсказки HTML

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

Подсказки HTML

Создай тег «h2» и оставь его пустым.

В этот тег мы будем записывать цвет в RGB формате, который пользователь будет угадывать.

Подсказки HTML

Создай два тега h3 c классами: «score» и «time».

В первом теге напиши: «Your score is: 0»

Во втором: «Time left: 60 seconds»

Подсказки HTML

Создай шесть div-элементов и добавь им класс «colorBox»

QuizTime

Multiple Choice

Теги «img» и «button» - это строчные или блочные элементы?

• Строчные

• Блочные

Multiple Choice

Когда мы создаем div-элемент и не указываем ему никаких свойств в CSS, видим ли мы его на сайте?

• Да

• Нет

Дело за стилем

Попробуй самостоятельно создать вот такой дизайн. Цвета и шрифты могут отличаться :)

Multiple Choice

Что позволяет нам сделать селектор звездочка - «*» в CSS?

• Выбрать какой-то один элемент

• Выбрать все элементы

• Выбрать все элементы с одинаковым классом

• Выбрать все элементы с одинаковым ID

Multiple Choice

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

• text-size: bigger;

• text-transform: lowercase;

• text-transform: uppercase;

• text-transform: capitalize;

Multiple Choice

Какое свойство поможет нам сделать наш элемент строчно-блочным?

• display: inline;

• display: block;

• display: inline-block;

Подсказочки CSS

Обратись к селектору звездочке и укажи у него какой-нибудь шрифт.

Подсказочки CSS

Обратись к элементу «h1» и укажи у него CSS-свойства:

margin-top

text-transform: uppercase;

Подсказочки CSS

Обратись к элементу «body» и укажи у него CSS-свойства:

text-align: center;

background-color: ;

color: ;

Подсказочки CSS

Обратись к элементу c классом «colorBox» и укажи у него CSS-свойства:

width:

height:

background-color:

display: inline-block;

border-radius:

margin-top:

margin-right:

Логика?

Уже умеешь

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

PS: для создания переменных, в которых будут храниться выбранные элементы, мы можем воспользоваться ключевым словом «const»

Multiple Choice

const progLangs = ["JS", "C++", "C", "Python", "Ruby"];

console.log(progLangs.length)

Что делает команда progLangs.length в данном примере?

• Возвращает рандомное значение из списка

• Возвращает первый элемент списка

• Возвращает количество элементов в списке

• Все время выводит "Python"

Multiple Choice

const progLangs = ["JS", "C++", "C", "Python", "Ruby"];

Какое значение будет выведено при запуске вот такой команды: progLangs.length ?

• 2

• 10

• 5

• 3.5

Уже умеешь

Создай переменную «randomDivNumber» и присвой ей вызов функции «randomNumber» с параметром «allDivs.length»

PS: значения в этой переменной будет меняться, так что воспользуйся правильным ключевым словом

Уже умеешь

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

Скачиваем

На следующем слайде тебе нужно перейти на сайт, с которого ты будешь выбирать звуки для своего проекта. Один из них будет запускаться при неправильном ответе, а второй при правильном.

Когда ты зашел(а) на сайт и выбрал(а) звук тебе нужно найти кнопку «DOWNLOAD MP3»

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

Home

Open in new tab

Copy link

Уже умеешь

Создаем две переменные: trueSound и falseSound

Присваиваем им конструкцию:

new Audio("имя музыкального файла.mp3");

В переменной trueSound указываем ссылку на звук при правильном ответе.

В переменной falseSound указываем ссылку на звук при неправильном ответе.

Уже умеешь

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

Уже умеешь

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

Уже умеешь

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

Уже умеешь

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

Уже умеешь

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

Уже умеешь

Создай переменную «timerWorks» и присвой ей значение true

Уже умеешь

Создай функцию с именем «renderTheDivs»

Уже умеешь

Внутри этой функции напиши код, чтобы все div-элементы получили рандомный задний фон. А также, чтобы в элемент «h2» выводился цвет div-элемента под номером, который указан в переменной «randomDivNumber»

PS: чтобы получить рандомный цвет, нужно написать отдельную функцию.

Если это задание слишком сложное, то идем сразу к решению :)

Уже умеешь

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

Уже умеешь

Внутри этого цикла напиши конструкцию: allDivs[i].style.backgroundColor = randomColor();

Там же измени текст тега «h2» на allDivs[randomDivNumber].style.backgroundColor;

Уже умеешь

Создай функцию с именем «randomColor»

Уже умеешь

Внутри этой функции создай три переменных:

red, green, blue

Присвой этим переменным конструкцию:

Math.floor(Math.random() * 256);

Уже умеешь

Сделай так, чтобы функция возвращала вот такую строчку:

"rgb(" + red + "," + green + "," + blue + ")";

Уже умеешь

Создай функцию с именем «randomNumber» и передай туда параметр «maxNumber»

Сделай так, чтобы эта функция возвращала значения от 0 до maxNumber

Уже умеешь

Создай переменную «timer» и присвой ей конструкцию «setInterval(function(){

}, 1000)»

Уже умеешь

Внутри функции конструкции «setInterval» смени текст переменной «timeText» на "Time left: " + time + " seconds";

Уже умеешь

Внутри этой же функции создай if-блок с таким условием:

time > 0

Если условие верно, то выполняй вот такой код:

time--;

Уже умеешь

Внутри этой же функции создай else-блок и укажи туда код, чтобы текст элемента «h2» сменился на «Game over»

Уже умеешь

После этого переменной «time» присвой значение 0

Уже умеешь

После этого переменной «timerWorks» присвой значение false

Уже умеешь

После этого напиши конструкцию:

timeText.innerText = "Time left: " + time + " seconds";

И смени с помощью кода текст у элемента h1 на "Refresh the page to play again";

Уже умеешь

Вызови функцию «renderTheDivs»