Restaurant Bill Splitter (independent)

Создай в элементе «body» тег «div» и укажи у него класс «container».

Создай в элементе «div» тег «h2» и укажи у него текст «Restaurant Bill Splitter».

После этого создай элемент «label» и укажи у него атрибут «for» со значением «bill»

Внутри элемента «label» укажи вот такой текст «How much is your bill?»

Внутри этого элемента создай элемент «input» c type «number» и id «bill»

Выйди из элемента «label» и создай после него тег «br»

После этого создай еще один тег «label» и укажи у него атрибут «for» со значением «promocode»

Внутри элемента «label» укажи вот такой текст «If you have a promocode write it here: »

Внутри элемента «label» создай элемент «input» c type «text» и id «promocode»

Выйди из элемента «label» и создай после него тег «br»

После этого создай еще один тег «label» и укажи у него атрибут «for» со значением «part»

Внутри элемента «label» укажи вот такой текст «How many people have eaten the food with you?»

Внутри элемента «label» создай элемент «input» c type «number» и id «part»

Выйди из элемента «label» и создай после него тег «br»

Создай тег «button» и укажи название «Split»

Создай тег «p» с классом «answer» и укажи вот такой текст «Each of you should pay:»

Попробуй простилизовать HTML-элементы примерно также как показано на картинке на следующем слайде

Цвета, шрифт и размер текста могут отличаться ;)

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

 width, padding, margin, background-color, color, text-align, border-radius

Воспользуйся селектором «container label» и укажи у него вот такие свойства:

display: inline-block, margin-top

Воспользуйся селектором «container button» и укажи у него вот такие свойства:

background-color, color, margin-top, width

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

Посмотри на картинки на следующих слайдах и попробуй понять как работает программа.

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

Ты можешь заметить, что в нашей программе есть промокод

В нашем пример он дает скидку в 20%

Чтобы тебе реализовать такую логику, ты можешь воспользоваться вот такой формулой:

сумма счета * 0.8 / количество человек

Если ты хочешь сделать скидку 50%, то указываешь 0.5

Если ты хочешь сделать скидку 10%, то указываешь 0.9

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

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

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

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

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

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

Внутри функции слушателя событий укажи if-блок с условием «promocode.value == "edukoht"»

Внутри if-блока укажи вот такой код:

answer.innerText = "Each of you should pay: " + Math.round((parseFloat(sumOfTheBill.value) * 0.80) / parseInt(numberOfPeople.value)) + " eur";

Добавь else-блок.

Укажи у него вот такой код:

 answer.innerText = "Each of you should pay: " + Math.round(parseFloat(sumOfTheBill.value) / parseInt(numberOfPeople.value)) + " eur";