magicBall (additional HTML,CSS,JS task)

magicBall (additional HTML,CSS,JS task)

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

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

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

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

Пример: если выпадает предсказание, что ты будешь богатым(ой), то цвет шара должен быть желтым.

Ну это всего лишь пример, ты можем использовать любые цвета в своем проекте.

Вот что происходит при клике на шарик

Вот что происходит при клике на шарик

Вот что происходит при клике на шарик

Осторожно!

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

HTML

Создай элемент "h1" и укажи у него

HTML

Создай элемент "div" и укажи у него класс "magicBall"

HTML

Создай элемент "h2" и укажи у него текст "Click on the magic ball and see your future"

CSS

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

text-align: center;

background-color

color

CSS

Обратись к классу "magicBall" и укажи у него свойства:

width

height

border-radius: 50%;

 background-color

 margin: 0px auto;

JS

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

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

JS

Создай переменную «predictions» и присвой ей список заполненный строчками с предсказаниями.

Пример заполнения списка:

["I will be rich"]

JS

Создай переменную «colors» и присвой ей список заполненный строчками с цветами.

Пример заполнения списка:

["red"]

JS

Добавь переменной «ball» слушатель событий

JS

Внутри функции слушателя событий создай переменную «randomNumber»

Присвой этой переменной конструкцию для получения рандомного числа от 0 до количества элементов в списке «predictions»

JS

Напиши конструкцию -  ball.style.backgroundColor

Присвой ей конструкцию для получения рандомного цвета - colors[randomNumber]

JS

Напиши конструкцию h2.innerText присвой ей predictions[randomNumber]