JSFiddle - React, Tailwind, and code Playground

by Sergey khorev

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

  <div class="container">
    <fieldset>
      <img src="https://www.pochtabank.ru/_next/image?url=%2Fimg-next%2Fsvg%2Flogo%2Flogo.svg&w=1920&q=100" class="rightimg">
      <legeng>
        <h3>Введите параметры заявки<br>ООО "Дом с крыльцом"</h3>
      </legeng>

      <div class="row">
        <div class="col-sm">
          &nbsp;<br>
        </div>
      </div>
      <div class="row">
        <div class="col-sm">
          <div class="input-group input-group-lg">
            <div class="input-group-prepend">
              <span style="width: 160px;" class="input-group-text price" id="inputGroup-sizing-lg">Цена дома</span>
            </div>
            <input type="number" class="form-control" required id="chekPrice" onchange="raschet(this);" placeholder="От 550 тысяч ₽" title="От 550 000 рублей" />
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-sm">
          &nbsp;<br>
        </div>
      </div>

      <div class="row">
        <div class="col-sm">
          <div class="input-group input-group-lg">
            <div class="input-group-prepend">
              <span style="width: 160px;" class="input-group-text price" id="inputGroup-sizing-lg">Первый взнос</span>
            </div>
            <input type="number" class="form-control price" required id="firstPayment" onchange="raschet(this);" placeholder="Минимум 10% от цены дома" title="От 10 до 90%...

CSS

abvd {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 646px;
    margin: 0 auto;
  }

  .leftimg {
    float: left;
    /* Выравнивание по левому краю */
    margin: 7px 7px 7px 0;
    /* Отступы вокруг картинки */
  }

  .rightimg {
    float: right;
    /* Выравнивание по правому краю  */
    margin: 7px 0 7px 7px;
    /* Отступы вокруг картинки */
  }

JavaScript

$('.price').text((i, text) => {
  const [ price, currency ] = text.split(' ');
  return `${(+price).toLocaleString()} ${currency}`;
});


function raschet() {
var chekPrice = $('#chekPrice').val();
var firstPayment = $('#firstPayment').val();
var termCredit = $('#termCredit').val();
var kreditsumm = chekPrice - firstPayment;

if ( termCredit == 24 ) {
    var platezh = kreditsumm * 0.046141;
}
    else if ( termCredit == 36) {
    var platezh = kreditsumm * 0.031641;
}
    else if ( termCredit == 48) {
    var platezh = kreditsumm * 0.025456;
}
    else if ( termCredit == 60) {
    var platezh = kreditsumm * 0.021250;
}
    else if ( termCredit == 72) {
    var platezh = kreditsumm * 0.018678;
}
    else if ( termCredit == 84) {
    var platezh = kreditsumm * 0.016732;
}

document.getElementById('summ').value="Сумма кредита: " + Number(kreditsumm);
document.getElementById('plat').value="Платёж: от " + Number.parseInt(platezh) + " ₽*";
}


function uuidv4() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
    return v.toString(16);
  });
}
 
function credit_form() {
var chekPrice = $('#chekPrice').val();
var termCredit = $('#termCredit').val();
var firstPayment = $('#firstPayment').val();

var amountCredit = chekPrice - firstPayment;
var firstPaymentMin = chekPrice * 0.1;
var firstPaymentMax = chekPrice * 0.9;

if( amountCredit > 5000000 || amountCredit < 500000 || amountCredit == '') {
alert("Сумма кредита должна быть не менее 500'000 и не более 5'000'000 рублей");
return false;
}

if( firstPayment > firstPaymentMax || firstPayment < firstPaymentMin || firstPayment == '') {
alert("Первый взнос должен быть не менее 10 и не более 90% от цены дома");
return false;
}


var options = {
operId:uuidv4(),
productCode: 'EXP_DOM_PP', // код тарифа
ttCode: '0105001006093', // код ТТ
toCode: '010500100609', // код ТО
ttName: '', // 153000, Россия, Ивановская обл, г...