streetRace

streetRace

Наш друг - HTML

Multiple Choice

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

• <img>

• <br>

• <div>

• <video>

Уже было

Создай в элементе «body» тег «div» и укажи у него класс «race». Внутри тега «div» укажи тег «button» с классом «start» и названием «Start the race». После этого указываем тег «br».

Уже было

После тега «br» создаем еще один тег «div» c классом «traficLight». Внутри этого элемента создаем еще три тега «div» с классами: noLight light

Уже было

После этого создаем тег «br». Затем создаем div-элемент указываем у него класс «cars». Внутри этого элемента создаем картинку, тег для перевода строчных элементов на новую строчку, еще одну картинку. Внутри этого же div-элемента создаем еще один тег «div» с классом «finishLineBox». Внутри этого тега создаем картинку с классом «finishLine»

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

Multiple Choice

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

• text-decoration

• background-color

• display

• font-weight

Уже было

Обращаемся к элементу «body» и указываем у него CSS-свойство для смены цвета заднего фона и свойство для центровки строчных элементов.

Обращаемся к классу «traficLight» и указываем у него какие-нибудь размеры. Устанавливаем этому элементу цвет заднего фона.

Уже было

Теперь будем делать цвета светофора. Обращаемся к классу «light» указываем у него какие-нибудь размеры. Добавляем свойство  border-radius: 50%. Указываем свойство display: inline-block

Multiple Choice

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

• text-align

• opacity

• padding

• margin

Multiple Choice

Какое CSS-свойство поможет нам изменить размер текста?

• color

• font-size

• transform

• font-weight

Multiple Select

Что можно сделать при помощи свойства text-transform?

• сделать все буквы большими

• изменить цвет текста

• сделать все буквы маленькими

• изменить положение текста

Уже было

Обращаемся к классу «nolight», указываем у него какой-нибудь цвет заднего фона. Этот цвет будет отображаться, когда светофор не работает.

Обращаемся к классу «start», указываем у него: цвет заднего фона, рамку, цвет букв, размер текста, отступ снизу от других элементов.

Уже было

Обращаемся к классу «race», указываем у него свойство для создания отступа сверху.

Обращаемся к классу «cars», указываем у него свойства:

position: relative;

text-align:left;

Обращаемся к классу «car» , указываем у него свойства:

position: relative;

 width: 150px; 

Уже было

Обращаемся к классу «finishLineBox», указываем у него свойство для создания отступа справа. Задаем свойство text-align: right;

Обращаемся к классу «finishLine», указываем у него свойство «position:absolute». Задаем этому элементу какую-нибудь ширину. Указываем свойство «bottom: 125px»

Приветик JS

Уже было

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

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

Уже было

Создай список с именем «colors» с такими значениями: "#2c3e50","#e74c3c","#f1c40f","#2ecc71"

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

Уже было

Добавь кнопке слушатель событий с параметрами: "click", function()

Внутри функции создай две переменные: «randomSpeedOne», «randomSpeedTwo»

Присвой этим переменным вызов функции «randomSpeed»

Уже было

После этого вызываем функцию «turnRedLight». Потом вызываем функцию «setTimeout» с параметрами function(){}, 1000.

В функции указываем вызов функции «turnYellowLight» и «suhtDownTheLight» с параметром «0».

Уже было

Потом вызываем функцию «setTimeout» с параметрами function(){}, 2000.

В функции указываем вызов функции «turnGreenLight» и «suhtDownTheLight» с параметром «1».

Уже было

Потом вызываем функцию «setTimeout» с параметрами function(){}, 3000.

В функции указываем вызов функции «suhtDownTheLight» с параметром «2».

Что-то новенькое

Теперь мы будем работать с анимацией. Раньше мы задавали ее в CSS, а сегодня будем добавлять ее с помощью JS. Для этого нам понадобится специальный метод «animate», который мы будем вызывать у анимируемого объекта.

Что-то новенькое

Вызываем функцию «setTimeout» с параметрами function(){}, 3000.

В функции этой конструкции указываем: cars[0].animate([], {});

Что-то новенькое

Указываем вот такие команды в квадратных скобочках у метода «animate» .

{ top:"0px",

  left:"0px" },

 { top:"0px",

  left:"1200px" }

Что-то новенькое

Указываем вот такие команды в фигурных скобочках у метода «animate».

 duration: randomSpeedOne ,

 iterations: 1

Что-то новенькое

В функции этой конструкции указываем: cars[1].animate([], {});

Что-то новенькое

Указываем вот такие команды в квадратных скобочках у метода «animate» .

{ top:"0px",

  left:"0px" },

 { top:"0px",

  left:"1200px" }

Что-то новенькое

Указываем вот такие команды в фигурных скобочках у метода «animate».

 duration: randomSpeedTwo ,

 iterations: 1

Уже было

Создаем функцию «turnRedLight». Делаем так, чтобы при вызове этой функции выполнялся вот такой код:

lights[0].style.backgroundColor = colors[1];

Уже было

Создаем функцию «turnYellowLight». Делаем так, чтобы при вызове этой функции выполнялся вот такой код:

lights[1].style.backgroundColor = colors[2];

Уже было

Создаем функцию «turnGreenLight». Делаем так, чтобы при вызове этой функции выполнялся вот такой код:

 lights[2].style.backgroundColor = colors[3];

Уже было

Создаем функцию «suhtDownTheLight» и передаем ей параметр «lightNumber». Делаем так, чтобы при вызове этой функции выполнялся вот такой код:

 lights[lightNumber].style.backgroundColor = colors[0];

Уже было

Создаем функцию «randomSpeed». Делаем так, чтобы при вызове этой функции выполнялся вот такой код:

return Math.floor(Math.random() *10000) + 1000;