JSFiddle - React, Tailwind, and code Playground
HTML
<div class="card-container">
<div class="card">
<img src="img/teplitsa.jpg" alt="">
<div class="card-title">
<h2>Теплица <b>«Стандарт»</b></h2>
</div>
<div class="inputs-form">
<h3>Выберите каркас:</h3>
<label>
<input type="radio" name="size" class="form-radio" data-price="13500" checked>
<span><b>Размер:</b> 3x4</span>
</label>
<label>
<input type="radio" name="size" class="form-radio" data-price="17500">
<span><b>Размер:</b> 3x6</span>
</label>
<label>
<input type="radio" name="size" class="form-radio" data-price="21500">
<span><b>Размер:</b> 3x8</span>
</label>
<label>
<input type="radio" name="size" class="form-radio" data-price="22500">
<span><b>Размер:</b> 3x10</span>
</label>
<h3>Выберите поликарбонат:</h3>
<label>
<input type="radio" name="material" class="form-radio" data-price="3000" checked>
<span>Эконом</span>
</label>
<label>
<input type="radio" name="material" class="form-radio" data-price="4000">
<span>Простой</span>
</label>
<label>
<input type="radio" name="material" class="form-radio" data-price="5000">
<span>Усиленный</span>
</label>
<label>
<input type="radio" name="material" class="form-radio" data-price="6000">
<span>Супер усиленный</span>
...
CSS
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.card-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.card {
width: 300px;
text-align: center;
box-shadow: 0 7px 20px rgba(0, 0, 0, 0.2);
}
.card img {
margin-top: 20px;
width: 260px;
}
.card-title {
margin: 0 21px;
margin-top: 15px;
}
.card-title h2 {
text-align: left;
font-size: 23px;
font-weight: 700;
}
.inputs-form {
margin: 0 23px;
margin-top: 15px;
}
.inputs-form h3 {
margin: 10px 0;
text-align: left;
font-size: 18px;
font-weight: 400;
color: #ff0063;
}
label {
display: flex;
align-items: center;
}
.form-radio {
width: 20px;
height: 20px;
margin: 3px 0;
margin-right: 15px;
cursor: pointer;
}
label > span {
font-size: 18px;
font-weight: 400;
cursor: pointer;
}
.inputs-form p {
margin: 15px 0;
text-align: left;
font-size: 20px;
font-weight: 700;
}
.totalPrice {
font-size: 20px;
font-weight: 700;
color: #ff0063;
}
.modal-form {
margin-bottom: 15px;
}
.modal-form {
padding: 10px 40px;
background: pink;
border: none;
cursor: pointer;
outline: none;
}
.modal-form:hover {
background: #ffa2b2;
}
JavaScript
var storage = 0,
radioButtons = document.querySelectorAll('.form-radio'),
totalPriceEl = document.querySelector('.totalPrice'),
modalForm = document.getElementById('modal-form'),
modalWindow = document.getElementById('modal-window');
radioButtons.forEach(function (item) {
// Добавляем событие на клик
item.addEventListener('click', function (e) {
//При клике считываем все активные Radio
var totalPrice = 0;
radioButtons.forEach(function (item) {
// Прибавляем к итоговой сумме значение Radio
if (item.checked) {
totalPrice += +item.getAttribute('data-price');
}
});
// Вставляем его в DOM
totalPriceEl.innerText = totalPrice;
storage = totalPrice;
});
});
modalForm.onclick = function() {
alert(storage);
}