Document
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*,
*::after,
*::before {
box-sizing: inherit;
}
body {
font-family: "Roboto", sans-serif;
font-size: 16px;
line-height: 1.2;
width: 100%;
min-height: 100vh;
color: #fff;
position: relative;
background-image: url(./image/bg.jpg);
background-size: cover;
box-sizing: border-box;
}
.fill {
position: absolute;
width: 100%;
height: 100%;
background-color: #1879ca;
opacity: 0.66;
}
.container {
max-width: 1200px;
width: 100%;
height: 650px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
}
.form {
width: 100%;
height: 100%;
background-color: #fff;
border-radius: 25px;
padding: 30px;
color: #111;
}
.form1 {
flex-basis: 650px;
flex-shrink: 0;
flex-grow: 0;
margin-right: 50px;
}
.form2 {
flex-shrink: 1;
flex-grow: 1;
}
.form .form__item {
margin-bottom: 40px;
}
.form .heading {
margin-bottom: 30px;
font-size: 18px;
color: #111;
}
.switcher {
display: flex;
}
.switcher__item input {
display: none;
}
.switcher__item label {
display: inline-block;
padding: 20px 30px;
font-size: 18px;
color: #111;
border: 2px solid #f5ba10;
cursor: pointer;
}
.switcher__item label:hover {
background-color: rgba(245, 186, 16, 0.15);
}
.switcher__item label:not(:first-child) {
margin-left: -2px;
}
.switcher__item input:checked + label {
background-color: #f5ba10;
color: #fff;
}
#time {
-webkit-appearance: none;
width: 500px;
height: 10px;
background-color: #eee;
border-radius: 20px;
outline: none;
}
#volume {
font-size: 48px;
margin-left: 30px;
color: #282b31;
}
.slider {
display: flex;
align-items: center;
}
#time::-webkit-slider-thumb {
-webkit-appearance: none;
width: 25px;
height: 25px;
background-color: #068323;
border-radius: 50%;
cursor: pointer;
box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.2);
}
.option__item {
margin-bottom: 15px;
display: flex;
align-items: center;
}
.option__item input {
display: none;
}
.option__item .checkmark {
display: block;
width: 30px;
height: 30px;
background-color: #eee;
margin-right: 15px;
cursor: pointer;
position: relative;
}
.option__item .checkmark::after {
display: none;
position: absolute;
content: "";
width: 18px;
height: 18px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #0c76ee;
}
.option__item input:checked + .checkmark::after {
display: block;
}
.form2 .order {
margin-bottom: 15px;
}
.form2 .order output {
margin-left: 10px;
font-size: 18px;
}
.form2 .total {
font-size: 40px;
font-weight: 400;
color: #282b31;
position: relative;
}
.form2 .total::after {
content: "\20BD";
margin-left: 10px;
}
const tariff = Array.from(document.querySelectorAll(".tariff"));
const option = Array.from(document.querySelectorAll(".option"));
const time = document.querySelector("#time");
const volume = document.querySelector("#volume");
const total = document.querySelector("#total");
const orderTariff = document.querySelector("#order_tariff");
const orderTime = document.querySelector("#order_time");
const orderOption = document.querySelector("#order_option");
tariff.forEach((el) => {
el.addEventListener("click", tariffUpdate);
});
time.addEventListener("input", timeUpdate);
option.forEach((el) => {
el.addEventListener("change", optionUpdate);
});
function tariffUpdate(e) {
currentSet.tariff = e.target.id;
updatePrice();
orderUpdate();
}
function timeUpdate(e) {
currentSet.time = time.value;
volume.value = currentSet.time;
updatePrice();
orderUpdate();
}
function optionUpdate(e) {
e.stopPropagation();
if (e.target.checked) {
currentSet.option.push(e.target.id);
} else {
let index = currentSet.option.indexOf(e.target.id);
currentSet.option.splice(index, 1);
}
updatePrice();
orderUpdate();
}
function updatePrice() {
let tariffPrice = currentSet.getTariffPrice();
let optionPrice = currentSet.getOptionPrice();
let totalPrice = currentSet.time * tariffPrice + optionPrice;
total.value = totalPrice;
}
function orderUpdate() {
if (currentSet.time < 5) {
orderTime.value = currentSet.time + " часа";
} else {
orderTime.value = currentSet.time + " часов";
}
orderTariff.value = currentSet.getTariffPrice() + " \u{20BD}/час";
orderOption.value = currentSet.getOptionPrice() + " \u{20BD}";
}
const priceInfo = {
tariff: {
economy: 500,
comfort: 800,
business: 1100,
premium: 1400,
},
option: {
option1: 1000,
option2: 1500,
option3: 1500,
option4: 2000,
},
};
let currentSet = {
tariff: "comfort",
time: 2,
option: [],
getTariffPrice() {
return priceInfo.tariff[this.tariff];
},
getOptionPrice() {
let optionPrice = 0;
if (!this.option.length == 0) {
this.option.forEach((el) => {
optionPrice += priceInfo.option[el];
});
}
return optionPrice;
},
};