0

И как реализовать список с радио кнопками и отображение выбранного плана с калькулятором и общей суммой?

введите сюда описание изображения

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/style.css">
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        font-size: 16px;
        line-height: 1;
        background: #333;
    }

    .license {
        width: 100%;
        max-width: 590px;
        padding: 40px;
        border: 10px solid #ebebeb;
        color: #575757;
        background: #f8f8f8;
    }

    .license__item {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .license__content p {
        font-size: 1.5em;
    }

    .license__footer {
        text-align: center;
    }

    .license__buy {
        display: inline-block;
        font-family: "Babes", serif;
        color: #fff;
        background: #33a845;
        padding: 20px 60px;
        border-radius: 30px;
        text-transform: uppercase;
        text-decoration: none;
        margin-bottom: 50px;
    }
</style>
<title>Licenses</title>
</head>

<body>
<div class="license">
    <div class="license__item">
        <div class="license__content">
            <span></span>
            <p>License plan #1</p>
        </div>
        <div class="license__price">$13 per license</div>
    </div>
    <div class="license__item">
        <div class="license__content">
            <span></span>
            <p>License plan #2</p>
        </div>
        <div class="license__price">$22 per license</div>
    </div>
    <div class="license__item">
        <div class="license__content">
            <span></span>
            <p>License plan #3</p>
        </div>
        <div class="license__price">$34 per license</div>
    </div>

    <div class="license__quantity"></div>

    <div class="license__footer">
        <div class="license__content license__content--total">
            <p>Total</p>
            <span></span>
        </div>
        <a href="#" target="_blanck" class="license__buy">Buy now</a>
        <div class="license__selected">
            Selected plan: <span>#3</span>
        </div>
    </div>
</div>

</body>

</html>
3
  • 1
    Ну как, руками и кодом) 21 июн 2021 в 8:47
  • Спасибо, но нужно еще реализовать калькулятор
    – ICloud
    21 июн 2021 в 9:59
  • Надо реализовать - реализовывайте! Если будут конкретные проблемы в реализации, обращайтесь! 21 июн 2021 в 12:38

1 ответ 1

1

Реализация сего калькулятора выглядит так (добавьте только отправку нужных данных):

const oLicense = document.querySelector('.license');
const oNumOfLic = oLicense.querySelector('select');
const oTotalSum = oLicense.querySelector('.license__content--total span');
const oLicenseBuy = oLicense.querySelector('.license__buy');
const oLicenseSel = oLicense.querySelector('.license__selected span');

function fCalculate() {
  let oChoosePlan = document.querySelector('input[type="radio"]:checked');
  oTotalSum.textContent = oChoosePlan.value * oNumOfLic.value;
  oLicenseSel.textContent = oChoosePlan.closest('.license__item').querySelector('p').textContent;
}

oLicense.addEventListener('change', fCalculate);

fCalculate();
@import url("https://fonts.googleapis.com/css2?family=Teko:wght@400;500&display=swap");

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #333;
}

.license {
  height: 605px;
  width: 100%;
  max-width: 590px;
  padding: 30px;
  box-sizing: border-box;
  color: #787878;
  background-color: #f8f8f8;
  box-shadow: inset 0 0 0 12px #ebebeb;
}

.license__item {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  padding: 20px 15px 19px 25px;
  box-sizing: border-box;
  cursor: pointer;
}

.license__item:hover {
  background-color: #ebf4f7;
  box-shadow: inset 0 0 0 1px #b8d7e2;
}

.license__item input {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  height: 1px;
  width: 1px;
}

.license__item .license__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.license__item .license__content span {
  height: 34px;
  width: 34px;
  background-image: radial-gradient( circle, #0000 11px, #dadada 12px 16px, #0000 17px);
}

.license__item input:checked+.license__content span {
  background-image: radial-gradient( circle, #0294bf 6px, #0000 7px 11px, #34648e 12px 16px, #0000 17px);
}

.license__item .license__content p {
  margin: 5px 18px 0;
  font: 26px/1em "Teko", sans-serif;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.license__item .license__price {
  font: 16px/1em sans-serif;
  letter-spacing: 1px;
}

.license__quantity {
  margin: 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px;
  font: 14px sans-serif;
  color: #000;
  box-shadow: inset 0 -1px 0 0 #cccccc, inset 0 1px 0 0 #cccccc;
}

.license__quantity p { margin: 0 10px 0 0; }

.license__quantity select { padding: 5px 0; }

.license__footer { text-align: center; }

.license__footer .license__content.license__content--total {
  margin-top: 37px;
  display: flex;
  justify-content: center;
  font: 30px/1em "Teko", sans-serif;
  font-weight: 500;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.license__footer .license__content p { margin: 0; }

.license__footer .license__content span { color: #3388a8; }

.license__footer .license__content span::before { content: "$"; }

.license__footer .license__content span::after {
  content: "US";
  position: relative;
  bottom: 0.5em;
  font: 16px/1em "Teko", sans-serif;
}

.license__footer .license__buy {
  margin-top: 13px;
  display: inline-block;
  padding: 16px 62px;
  border-radius: 30px;
  font: 14px/1em "Babes", sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background-color: #33a845;
}

.license__footer .license__selected {
  margin-top: 50px;
  font: 18px sans-serif;
  letter-spacing: 1.5px;
  color: #3388a8;
}
<div class="license">

  <label class="license__item">
    <input type="radio" name="plan" value="13" checked>
    <div class="license__content">
      <span></span>
      <p>License plan #1</p>
    </div>
    <div class="license__price">$13 per license</div>
  </label>
  <label class="license__item">
    <input type="radio" name="plan" value="22">
    <div class="license__content">
      <span></span>
      <p>License plan #2</p>
    </div>
    <div class="license__price">$22 per license</div>
  </label>
  <label class="license__item">
    <input type="radio" name="plan" value="34">
    <div class="license__content">
      <span></span>
      <p>License plan #3</p>
    </div>
    <div class="license__price">$34 per license</div>
  </label>

  <div class="license__quantity">
    <p>Number of licenses:</p>
    <select>
      <option value="10">10</option>
      <option value="30">30</option>
      <option value="50">50</option>
      <option value="1000">1000</option>
    </select>
  </div>

  <div class="license__footer">
    <div class="license__content license__content--total">
      <p>Total:&nbsp;</p>
      <span>0</span>
    </div>
    <a href="#" target="_blank" class="license__buy">Buy now</a>
    <div class="license__selected">
      Selected plan: <span>---</span>
    </div>
  </div>
  
</div>

P.S.: За кривой скриншот нужно руки кувалдой править.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.