Винетка Генератор

by Ico Dimchev

HTML

<div class="container"></div>

<div class="text-center">
  <input id="plate" class="plate" type="text" autofocus="autofocus" pattern="(E|A|B|BT|BH|BP|EB|TX|K|KH|OB|M|PA|PK|EH|PB|PP|P|CC|CH|CM|CO|C|CA|CB|CT|T|X|H|Y)\d{4}(A|B|E|T|Y|O|P|A|H|K|X|C|B|M|){1,2}">
  <button id="download" class="download">Свали винетка</button>
</div>

<ul id="vignette" class="vignette">
  <li>
    <span>Идентификационен номер на електронната винетка:</span>
    <span id="vignetteId"></span>
  </li>
  <li>
    <span>Клас на превозното средство:</span>
    <span>Превозно средство <= 35тона </span>
  </li>
  <li>
    <span>Националност на превозното средство:</span>
    <span>България</span>
  </li>
  <li>
    <span>Регистрационен номер:</span>
    <span id="car"></span>
  </li>
  <li>
    <span>Период на валидност:</span>
    <span>01.01.2019 0:00.00</span>
  </li>
  <li>
    <span>Крайна дата и час на валидност:</span>
    <span>31.12.2019 23:59.59</span>
  </li>
  <li>
    <span>Сума:</span>
    <span>97,00 лв.</span>
  </li>
  <li>
    <span>Статус:</span>
    <span>Неизползвана</span>
  </li>
  <li>
    <span>Идентификационен номер на транзакцията:</span>
    <span id="transaction"></span>
  </li>
  <li>
    <span>Идентификационен номер на оторизацията:</span>
    <span id="otorization"></span>
  </li>
  <li>
    <span>Код за отговор:</span>
    <span>0</span>
  </li>
  <li>
    <span>Номер на разписката:</span>
    <span id="receipt">2006</span>
  </li>
</ul>

CSS

html {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 html * {
   box-sizing: inherit;
 }

 .container {
   max-width: 900px;
   margin: 0 auto;
   padding: 20px;
 }

 .text-center {
   text-align: center;
 }

 .text-center>* {
   display: inline-block;
   font-size: 20px;
   padding: 5px 10px;
   font-family: monospace;
   margin: 0 auto;
   width: 200px;
   margin-bottom: 20px;
 }

 .vignette {
   list-style: none;
   padding: 100px 20px;
 }

 .vignette li {
   display: flex;
   justify-content: space-between;
   margin-bottom: 15px;
 }

 .vignette span {
   flex: 0 0 48.5%;
 }

 .vignette span:first-child {
   text-align: right;
 }

JavaScript

const randBetw = (min, max) => Math.floor(Math.random() * min + max);

const $plate = document.querySelector('#plate'),
  $download = document.querySelector('#download'),
  $vignette = document.querySelector('#vignette'),
  $vignetteId = document.querySelector('#vignetteId'),
  $car = document.querySelector('#car'),
  $transaction = document.querySelector('#transaction'),
  $otorization = document.querySelector('#otorization'),
  $receipt = document.querySelector('#receipt');

$plate.addEventListener('input', event => $car.innerText = event.target.value.toUpperCase());
$vignetteId.innerText = randBetw(18121700000000, 18121799999999)
$transaction.innerText = randBetw(18121700000000, 18121799999999);
$otorization.innerText = randBetw(910000, 919999);
$receipt.innerText = randBetw(2000, 3000);

$download.addEventListener('click', () => window.location.href = 'https://www.youtube.com/watch?v=TiMxAB82goU');