bomb

Boom

Что это такое?

Привет! Данное задание является самостоятельным. Попробуй применить все свои знания, чтобы создать функционал этого сайта. Ты можешь придумать свой дизайн и добавить какие-нибудь дополнительные фишки.

Как это работает?

Пользователь нажимает на кнопку «BOOM». После этого начинается отсчет до взрыва бомбы. В нашем примере таймер идёт 3 секунды. После этого фотография меняется на другую.

Осторожно!

После этого слайда идут подсказки

HTML

Создаем тег «h1» и указываем туда текст «Boom».

Создаем тег «h3» и указываем туда текст «The bomb will explode in ...».

HTML

Создаем тег «img» и указываем туда какую-нибудь фотографию.

Добавляем тег «br»

HTML

Создаем тег «button» и указываем туда текст «Boom».

CSS

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

«text-align:center», «background-color», «color»

CSS

Обращаемся к элементу «img» и указываем у него CSS-свойство «width: 100px»

CSS

Обращаемся к элементу «button» и указываем у него CSS-свойства: «margin-top»

«margin-top»

«margin-right»

«padding»

«background-color»

«text-transform»

«border:none;»

«border-radius»

«color»

CSS

Обращаемся к классу «animation» и указываем у него CSS-свойство: «animation: blink 1s infinite»

CSS

А теперь самое главное.

Нам надо создать анимацию. Для этого мы воспользуемся конструкцией «@keyframes». После нее пишем название анимации и фигурные скобочки.

CSS

Внутри скобочек указываем анимацию как на слайде.

JS

Создаем переменную «img» и присваиваем ей конструкцию «document.querySelector("img")»

Создаем переменную «btn» и присваиваем ей конструкцию «document.querySelector("button")»

Создаем переменную «h3» и присваиваем ей конструкцию «document.querySelector("h3")»

JS

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

Внутри функции создаем переменную «time» со значением три

Добавляем элементу «h3» класс «animation»

JS

Внутри функции создаем конструкцию «h3.innerText» и присваиваем ей строку «"The bomb will explode in " + time + " seconds"»

После этого создаем переменную «timer» и присваиваем ей конструкцию «setInterval»

JS

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

JS

Создай if-блок и укажи у него условие: time == 0

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

clearInterval(timer)

img.src = Ссылка на новую фотографию"

h3.innerText = "The bomb has been exploded";

JS

Создай else-блок и укажи туда вот такой код:

уменьшение переменной «time» на единичку

h3.innerText = "The bomb will explode in " + time + " seconds";