Vue Js Credit Card Number Generator

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@3.2.12/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <h3>Vue Js Credit Card Number Generator</h3>
    <label for="bin">BIN:</label>
    <input type="text" id="bin" v-model="bin" />
    <br />
    <label for="length">Length:</label>
    <input type="number" id="length" v-model="length" />
    <br />
    <button @click="generateCreditCard">Generate Credit Card</button>
    <p>{{ creditCardNumber }}</p>
  </div>
  <script type="module">
    const app = Vue.createApp({
      data() {
        return {
          bin: '',
          length: 16,
          creditCardNumber: ''
        };
      },
      methods: {
        generateCreditCard() {
          const bin = this.bin;
          const length = this.length;
          let generatedNumber = bin;

// Generate the remaining digits
          while (generatedNumber.length < length - 1) {
            generatedNumber += Math.floor(Math.random() * 10);
          }

// Calculate the check digit using the Luhn algorithm
          const checkDigit = this.calculateCheckDigit(generatedNumber);

// Append the check digit to the generated number
          generatedNumber += checkDigit;

this.creditCardNumber = generatedNumber;
        },
        calculateCheckDigit(number) {
          const digits = number.toString().split('').map(Number);
          const checkSum = digits
            .reverse()
            .map((digit, index) => (index % 2 === 0 ? digit : (digit * 2 > 9 ? digit * 2 - 9 : digit * 2)))
            .reduce((acc, digit) => acc + digit, 0);

const checkDigit = (10 - (checkSum % 10)) % 10;
          return checkDigit.toString();
        }
      }
    });
    app.mount('#app');
  </script>
  <style>
    #app {
      width: 400px;
      margin: 20px auto;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
      text-align: center;
      padding: 20px;
    }

label {
      display: block;
      margin-bottom: 5px;
    }

input[type="text"],
    input[type="number"] {
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 3px;
      width: 200px;
    }

input[type="text"]:focus,
    input[type="number"]:focus {
      outline: none;
      border-color: #007bff;
    }

button {
      padding: 10px 20px;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 3px;
      cursor: pointer;
      font-size: 16px;
      margin-top: 10px;
    }

p {
      margin-top: 20px;
      font-size: 18px;
    }
  </style>
</body>

</html>