jumper (indipendent)

jumper (indipendent)

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

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

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

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

Также при нажатии увеличивается значение количества прыжков.

Для успешного выполнения этого проекта надо вспомнить про CSS-анимации.

Когда нажали первый раз на картинку

Когда нажали второй раз на картинку

Осторожно!

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

HTML

Создай в элементе «body» тег «h2», укажи у него вот такой текст «Number of jumps»

HTML

После этого создай элемент «img»

CSS

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

margin-top:100px;

 width:100px;

 position: relative;

CSS

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

 text-align:center;

 background-color:#686de0;

 color:#dff9fb;

CSS

Обратись к классу «jump» и укажи у него вот такой код:

 animation: jump 1s 1;

CSS

Чтобы создать анимацию, мы должны воспользоваться конструкцией «@keyframes» и после этого указать имя «jump»

Внутри указываем вот такой код:

 25%{

  top:0px;

 }

 50%{

  top:-100px;

 }

 75%{

  top:0px;

 }

JS

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

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

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

JS

Добавь слушатель событий переменной «img». Укажи у нее параметры: "click", function(){}

Внутри функции напиши вот такой код:

h2.innerText = "Number of jumps: " + jumps;

 img.classList.add("jump");

JS

После этого добавь конструкцию «setTimeout»

Укажи у нее параметры: function(){}, 800

JS

Внутри функции сделай увеличение переменной «jump» на единицу

Напиши вот такой код:

 h2.innerText = "Number of jumps: " + jumps;

 img.classList.remove("jump");