CodePen Embed - GRdoYVL

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="bileti30.css">
  <script src="lesson30.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>
            <input type="number" id="col_1" value="0">
            <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>
            <input type="number" id="col_2" value="0">
            <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 class="category_content">
          <h4>Категория 3</h4>
          <div class="plus_minus">
            <i class="fa-solid fa-minus" onclick="minus(3)"></i>
            <input type="number" id="col_3" value="0">
            <i class="fa-solid fa-plus" onclick="plus(3)"></i>
            <span id="vivod_3" class="none">0</span>
          </div>
          <span id="cena_3">500</span>
        </div>      
      </div>
      <div class="ticket_price">
        <h4 class="right">- К оплате: <span id="itog_ticket">0</span></h4>
      </div>
      <input type="button" class="inp_5" value="Заказать" onclick="open_vsplivayka()">
    </div>
  </div>
</body>
</html>

/* ======================================= Обнуление ================================================= */
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;
}
.category_content input{
  width: 40%;
    text-align: center;
}
#osnovnoi{
  width:1170px;
  margin:0 auto;      /* контейнер по центру */
  padding:0 12px;
  box-sizing:border-box;
}

.header_center{
  text-align: center;
  padding-top: 70px;
  padding-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: 12px;
}
.inline_bl{
  display: inline-block;
}
.l_b{
  width: 100%;
  margin-bottom: 16px;
}
.l_b label{
  display: inherit;
  margin-bottom: 7px;
}
.input_test{
  width: 40%;
  border: 1px solid;
  border-radius: 10px;
  padding: 8px;
  font-size: 12px;
}
.ul_bottom{
  margin-bottom: 20px;
  margin-top: 40px;
}
#vsplivayka{
  background: #7f7f7fb5;
  height: 100%;
  width: 100%;
  position: absolute;
  padding-top: 150px;
  display: none;
}
#vsplivayka form{
  margin-bottom: 40px;
}
#marker{
  float: right;
  border: 2px solid #000;
  border-radius: 50%;
  cursor: pointer;
  font-family: monospace;
  padding: 0px 6px;
  transition: 0.5s;
}
#vsplivayka i:hover{
  color: #fff;
  background-color: #000;
}
.width_60{
  width:60%;
  padding-left:12px;
  padding-right:12px;
  box-sizing:border-box;
}
.width_20{
  width:20%;
  padding-left:12px;
  padding-right:12px;
  box-sizing:border-box;
}
.ticket_content{
  margin-bottom: 25px;
}
.input_classi_new{   
  font-size: 14px;
  padding: 5px 3px;
  border: 2px solid black;
  border-radius: 5px;
  background: space;
  margin-right: 13px;
}
#inp_d_2{
  font-family: monospace;
  font-size: 16px;
  padding: 5px 13px 5px 13px;
  background: #bfd8ef;
  cursor: pointer;
  border-radius: 5px;
  transition: 0.5s;
}
#inp_d_2:hover{
  background: orange;
}

function plus(parametr) {
  var col = 1*document.getElementById("col_"+parametr).value;
  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 = 1*document.getElementById("col_"+parametr).value;
  var mycol = col - 1;
  if(mycol < 0){}
  else{
    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 open_vsplivayka() {
  // body...
  var itog_raniwe = document.getElementById("itog_ticket").innerHTML;
  var itog_now = document.getElementById("itog_zakaz");
  if (itog_raniwe <= 0) {
    alert("Вы должны добавить товар")
  }
  else{
    var open = document.getElementById("vsplivayka").style.display = "block";
  }
  itog_now.innerHTML = itog_raniwe;
}


function close_vsplivayka() {
  // body...
  document.getElementById("vsplivayka").style.display = "none";
}

This Pen is owned by Dmitriy on CodePen.

See more by @merindemaaa on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.