JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<html lang="en">
	<head>
		<meta charset="UTF-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
		<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
		<title>Document</title>
	</head>
	<body>
		<div class="container" id="module-calculate-something">
			<form id="field-calculating">
				<select id="choose-price">
					<option data-price="0">---</option>
					<option data-price="200">Первый выбор</option>
					<option data-price="300">Второй выбор</option>
					<option data-price="400">Третий выбор</option>
					<option data-price="500">Четвёртый выбор</option>
					<option data-price="600">Пятый выбор</option>
				</select>
				<label for="amount-peoples">Количество людей</label>
				<input id="amount-peoples" type="number" min="0" step="1"/>
				<label for="amount-hours">Количество часов</label>
				<input id="amount-hours" type="number" min="0" max="24" step="1"/>
				<label for="amount-days">Количество дней</label>
				<input id="amount-days" type="number" min="0" step="1"/>
			</form>
			<div class="price">Цена --- тугрик(а\ов).</div>
		</div>
		<script>
			let opCalculateCostSomething = {
				module: document.getElementById(`module-calculate-something`),
				select: document.getElementById(`choose-price`),
				gradPrices: [1000, 600, 500, 450],
				events: {
					input: e => {
						[
							opCalculateCostSomething.peoples,
							opCalculateCostSomething.hours,
							opCalculateCostSomething.days,
						] = [
							+document.getElementById(`amount-peoples`).value,
							+document.getElementById(`amount-hours`).value,
							+document.getElementById(`amount-days`).value,
						];
						opCalculateCostSomething.module.lastElementChild.textContent =
							`Цена ${
									(
										+opCalculateCostSomething.select.options[opCalculateCostSomething.select.selectedIndex].dataset.price +
										(
											opCalculateCostSomething.peoples *
											opCalculateCostSomething.hours...