magicBall (additional HTML,CSS,JS task)

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

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

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

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

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

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

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

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

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

text-align: center;

background-color

color

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

width

height

border-radius: 50%;

 background-color

 margin: 0px auto;

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

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

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

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

["I will be rich"]

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

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

["red"]

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

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

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

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

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

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