Restaurant Bill Splitter (independent)

Restaurant Bill Splitter (independent)

Начинаем с HTML

Уже умеем

Создай в элементе «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:»

Попробуй сделать CSS

Я хочу сам

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

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

30 минуток на выполнение

Подсказки

Обратись к классу «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»

Попробуй сделать JS

Я хочу сам

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

Выполняем до конца урока

Я хочу сам

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

Я хочу сам

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

В нашем пример он дает скидку в 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";