JSFiddle - React, Tailwind, and code Playground

by merindema

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="style_lesson5.css">
	<script src="lesson5_new.js"></script>
	<script src="https://kit.fontawesome.com/c0a4c8df11.js" crossorigin="anonymous"></script>
	<title>Java</title>
</head>
<body>
	<div id="vsplivayka">
		<div class="even_footer flex">
			<div class="width_20"></div>
			<div class="width_60">
				<div class="vsplivayka_footer">	
					<i id="marker" onclick="close_vsplivayka()">x</i>
					<ul class="ul_bottom">
						<li>Сумма вашего заказа:</li>
						<li id="itog_zakaz" class="inline_bl">0</li>
						<li class="inline_bl">UAH</li>
					</ul>
					<form>
						<div class="l_b">	
							<label>Имя</label>
							<input type="text" id="name" class="input_test">
						</div>
						<div class="l_b">			
							<label>Телефон</label>
							<input type="tel" value="+38" id="tel" class="input_test">
						</div>
					</form>
				</div>	
			</div>
			<div class="width_20"></div>
		</div>
	</div>
	<div id="osnovnoi">
		<div class="header_content">
			<h2 class="header_center">Покупка билетов</h2>
		</div>
		<div class="content">
			<div class="ticket_content">
				<div class="category_content">
					<h4>Категории</h4>
					<h4>Количество билетов</h4>
					<h4>Цена</h4>
				</div>
				<div class="category_content">
					<h4>Категория 1</h4>
					<div class="plus_minus">
						<i class="fa-solid fa-minus" onclick="minus(1)"></i>
						<span id="col_1">0</span>
						<i class="fa-solid fa-plus" onclick="plus(1)"></i>
						<span id="vivod_1" class="none">0</span>
					</div>
					<span id="cena_1">300</span>
				</div>
				<div class="category_content">
					<h4>Категория 2</h4>
					<div class="plus_minus">
						<i class="fa-solid fa-minus" onclick="minus(2)"></i>
						<span id="col_2">0</span>
						<i class="fa-solid fa-plus" onclick="plus(2)"></i>
						<span id="vivod_2" class="none">0</span>
					</div>
					<span id="cena_2">400</span>
				</div>
				<div...

CSS

/* ======================================= Обнуление ================================================= */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,  
form, fieldset, input, p, blockquote, table, th, td, embed, object { 
  padding: 0; 
  margin: 0;  
  } 
table { 
  border-collapse: collapse; 
  border-spacing: 0; 
  } 
fieldset, img, abbr { 
  border: 0; 
  } 
address, caption, cite, code, dfn, em,  
h1, h2, h3, h4, h5, h6, strong, th, var { 
  font-weight: normal; 
  font-style: normal; 
  } 
caption, th { 
  text-align: left; 
  } 
h2, h3, h4, h5, h6 { 
  font-size: 1.0em; 
  } 
q:before, q:after { 
  content: ''; 
  } 
a, ins { 
  text-decoration: none; 
  color: #000;
  }
h4{
  margin-left: 10px;
}
#vsplivayka li{
  list-style: none;
}
/* =======================================end Обнуление ================================================= */
body{
  font-family: cursive;
  font-size: 16px;
  background-color: #bfd8ef;
  color: #000;
}

#osnovnoi{
  width:1170px;
  margin:0 auto;      /* контейнер по центру */
  padding:0 12px;
  box-sizing:border-box;
}

.header_center{
  text-align: center;
  margin-top: 70px;
  margin-bottom: 50px;
}

#osnovnoi h2{
  font-size: 25px;
}

#osnovnoi i{
  font-size: 14px;
  cursor: pointer;
}

.category_content{
  padding: 10px 25px 10px 25px;
  border: 2px solid black;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 50%;
}

.inline{
  display: inline-block;
  list-style: none;
}

.right{
  margin-right: 430px;
}

#osnovnoi .inp_5{
  font-family: monospace;
  font-size: 16px;
  padding: 7px 16px 7px 16px;
  background: #bfd8ef;
  cursor: pointer;
  border-radius: 5px;
  transition: 0.5s;
}

#osnovnoi .inp_5:hover{
  background: orange;
}

.ticket_price{
  margin-bottom: 20px;
  margin-top: 12px;
}
.none{
  display: none ;
}

.flex{
  display: flex;
}
.vsplivayka_footer{
  text-align: center;
  border: 1px solid;
  padding: 20px;
  background: cornsilk;
  border-radius:...

JavaScript

// запись новой категории после последней
function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
// добавление новой категории
function myDobav() {
	// body...
	var newCategoryName = document.getElementById('inputName').value;
	var newCena = document.getElementById('inputPrice').value;
	var categoryList = document.querySelectorAll('.category_content');
	var categorylength = categoryList.length;
	if(newCategoryName == ''){
		alert('Введите название категории!');
		return false;
	}
	if (newCena <= 0) {
		alert('Цена категории не может быть меньше или равна нулю');
		return false;
	}

	// создание дива и присваивание ему класса
	var el = document.createElement("div");
	el.classList.add("category_content");

	// создание блоков и тд
	var test = `<h4>${newCategoryName}</h4>`;
	test += '<div class="plus_minus">';
	test += '<i class="fa-solid fa-minus" onclick="minus(' + categorylength +')"></i>';
	test += '<span id="category_' + categorylength +'"> 0 </span>';
	test += '<i class="fa-solid fa-plus" onclick="plus(' + categorylength +')"></i>';
	test += '<span id="vivod_' + categorylength + '" class="none">0</span> ' ;
	test += '</div>';
	test += '<span id="cena_' + categorylength +'">'+ newCena +'</span>';
	
	el.innerHTML = test;

	insertAfter(categoryList[categorylength-1], el);


}
function plus(parametr) {
	var col = 1*document.getElementById("col_"+parametr).innerHTML;
	var mycol = col + 1;
	document.getElementById("col_"+parametr).innerHTML = mycol;

	var cena = 1*document.getElementById("cena_"+parametr).innerHTML;
	var itog = 1*document.getElementById("vivod_"+parametr).innerHTML;

	itog = itog + cena;
	document.getElementById("vivod_"+parametr).innerHTML = itog;

	var total_itog = 1*document.getElementById("itog_ticket").innerHTML;
	var total = total_itog + cena;
	document.getElementById("itog_ticket").innerHTML = total;
	
}
function minus(parametr) {
	var col =...