OTPstructure

by borisjavier

HTML

<body>
  <div class="container">
    <header></header>
    <h4>Enter OTP</h4>
    <p>We have sent you access code via SMS for mobile number verfication</p>
    <form action="#">
    <input type="hidden" value="sopas">
    <input type="text" name="d" id="d" value"0">
      <div class="input-field">
        <input type="number" id="3" />
        <input type="number" id="4" disabled />
        <input type="number" id="5" disabled />
        <input type="number" id="6" disabled />
        <input type="number" id="7" disabled />
      </div>
      <button>Verify</button>
    </form>
    <p>Didn't receive the code <br> <a href="#">Resend code</a></p>
  </div>

  <script src="script.js"></script>

</body>

CSS

@import url("https://fonts.googleapis.com/css2?family=Poppins");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4FAAF4;
}
:where(.container, form, .input-field, header) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.container {
  background: #fff;
  padding: 35px 65px 50px 65px;
  border-radius: 20px;
  row-gap: 20px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, .9);
  opacity: .75;
}
.container header{
  height: 150px;
  width: 150px;
  background-image: url('images/image.gif');
  background-size: cover;
  background-position: center;
}
.container h4 {
  font-size: 1.25rem;
  color: #333;
  font-weight: 500;
}
.container p {
  max-width: 250px;
  text-align: center;
  font-size: 13px;
}
.container p a {
  color: #4FAAF4;
  text-decoration: none;
}
.container p a:hover {
  text-decoration: underline;
}
form .input-field {
  flex-direction: row;
  column-gap: 10px;
}
form .input-field input {
  height: 50px;
  width: 43px;
  border-radius: 13px;
  outline: none;
  font-size: 1.125rem;
  text-align: center;
  border: 1px solid #ddd;
}
form .input-field input:focus {
  box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
}
form .input-field input::-webkit-inner-spin-button,
form .input-field input::-webkit-outer-spin-button {
  display: none;
}
form button{
  margin-top: 25px;
  margin-bottom: 15px;
  width: 100%;
  color: #fff;
  font-size: 1rem;
  border: none;
  padding: 9px 0;
  cursor: pointer;
  border-radius: 15px;
  pointer-events: none;
  background: #4FAAF4;
  opacity: .5;
  transition: all 0.2s ease;
}
form button.active {
  opacity: 1;
  pointer-events: auto;
}
form button:hover {
  background: #287ED4;
}

JavaScript

const inputs = document.querySelectorAll("input"),
      button = document.querySelector("button"),
      hid = document.getElementById("d");
      let st = "";
      
     /*
      }*/

inputs.forEach((input, index1) => {
  input.addEventListener("keyup", (e) => {
    const currentInput = input,
          nextInput = input.nextElementSibling,
          prevInput = input.previousElementSibling;
    if (currentInput.value.length > 1) {
      currentInput.value = "";
      return;
    }
    if (nextInput && nextInput.hasAttribute("disabled") && currentInput.value !== "") {
      nextInput.removeAttribute("disabled");
      nextInput.focus();
    }
    if (e.key === "Backspace") {
      inputs.forEach((input, index2) => {
        if(index1 <= index2 && prevInput) {
          input.setAttribute("disabled", true);
          input.value = "";
          prevInput.focus();
        }
      });
    }
    if (!inputs[6].disabled && inputs[6].value !== "") {
     
      button.classList.add("active");
      opq();
      return;
    }
    button.classList.remove("active");
  });
});

window.addEventListener("load", () => inputs[1].focus());



function opq() {
st = "";
	for (let i=3; i<=inputs.length; i++) {
      	//vali.push(inputs[i].value);.3
        st += document.getElementById(i).value;
        }
    hid.value = st;
}
 //window.addEventListener('keyup', checkinputFocus)


/*for (let i=2; i<=inputs.length; i++) {
      	//vali.push(inputs[i].value);
        vali.push(document.getElementById(i).value)
      }
      d.value = JSON.stringify(vali);*/