saveInfoCard2

by Divine Draft

HTML

<div class="database">

<div class="main-container__data">

          <div class="data-item">
            <form action="#" class="data-item__form">
              <h2 class="data-item__text" >Сумма</h2>
              <input type="number" name="sum" id="sum" autocomplete="off" onkeyup="this.value = this.value.replace (/\D/gi, '').replace (/^0+/, '')">
            </form>
          </div>
          
          <div class="data-item">
            <form action="#" class="data-item__form">
              <h2 class="data-item__text">Номер карты</h2>
              <input type="number" name="number" id="number" autocomplete="off" placeholder="1234 5678 9032 3456" title="Введите 12 цифр, пожалуйста"onkeyup="this.value = this.value.replace (/\D/gi, '').replace (/^0+/, '')">
            </form>
          </div>
          
          <div class="data-item">
            <form action="#" class="data-item__form ">
              <h2 class="data-item__text">Имя</h2>
              <input type="text" name="name" id="name" autocomplete="off" placeholder="Ivan" onKeyUp="if(/[^a-zA-Zа-яА-ЯёЁ .]/i.test(this.value)){this.value='';}">
            </form>
          </div>

          <div class="data-item">
            <form action="#" class="data-item__form">
              <label for="">
                <h2 class="data-item__text">Дата истечения</h2>
                <input type="date"  name="date" id="date" autocomplete="off">
              </label>
            </form>
          </div>
          
          <div class="data-item">
            <form action="#" class="data-item__form">
              <h2 class="data-item__text">CVV-код</h2>
              <input type="password" name="cvv" id="cvv" autocomplete="off" title="Введите 3 цифры, пожалуйста" onkeyup="this.value = this.value.replace (/\D/gi, '').replace (/^0+/, '')">
            </form>
          </div>
        
        <div class="main-container__check">
          <label for="#" class="check-label">
            <input type="checkbox"...

CSS

.database {display:flex;justify-content:space-between;align-items:flex-start;background:#fff;}
.main-container__data,.table {display:flex;flex-wrap:wrap;}
.main-container__data {width:calc(30% - 30px);background:#E6BEC7;padding:15px;}
.main-container__data input {width:calc(100% - 24px) !important;padding:6px 12px;}
.table {width:69%;background:#F2F2F2;}
.table tr {background:#CB89A0;}
.table tr:nth-child(2n) {background:#E6BEC7;}
.table td {padding:10px 15px;}

.data-item {margin:0 0 10px 0;}
.data-item__text {padding:0;margin:0 0 5px;font-size:16px;font-weight:bold;}
.main-container__check label {margin:0;padding:0;display:flex;justify-content:space-between;align-items:flex-start;}
.main-container__check input {width:auto !important;margin-right:10px;}
.main-container__check h4 {margin:0;padding:0;}
.btn {background:#7F517D;width:100%;text-align:center;border:none;font-weight:bold;padding:10px 0;margin-top:15px;color:#fff;}

JavaScript

let btn = document.querySelector('.btn');
const form = document.querySelector('.data-item__form');
let inputs = document.querySelectorAll('input');


    const getKey = (e) => {
        let keyNum;

        if(inputs.event) {
            keyNum.inputs.event.keyUp;
        } else if (e) {
                keyNum = e.which;
        }
            console.log(keyNum)
        };

        document.onkeyup = getKey();

   
    btn.addEventListener('click', () =>{
        function getCheck(){
            if (getKey() != "" && check.checked){
                console.log('click')
                btn.disabled = false;

                const user = [...document.querySelectorAll('input')].reduce((user, el) => {
                    user[el.name] = el.value;
                    return user;
                }, {}); 
                
                getData(); 
                btnClear();
                //document.querySelectorAll('.table-container__data').innerHTML = JSON.stringify(user, null, '');
                
            } else {
                btn.disabled = true;
            }
        }
            getCheck()
    });


function getData(){
			let item_sum = document.getElementById('sum').value;
			let item_number = document.getElementById('number').value;
			let item_name = document.getElementById('name').value;
			let item_date = document.getElementById('date').value;
			let item_cvv = document.getElementById('cvv').value;

      let xTable = document.getElementById('TableforData');
      let tr = document.createElement('tr');
      tr.innerHTML = '<td>' + item_sum + '</td><td>' + item_number + '</td><td>' + item_name + '</td><td>' +  item_date + '</td><td>' + item_cvv +'</td>';
      xTable.children[0].appendChild(tr);
}

     
const btnClear = () => {
    for (let i = 0; i < inputs.length; i++) {
       if(i) {
        inputs[i].value = "";
       } else {
        value.return();
       }
    }
};