<div class="alert">
  Your Secret code :<span class="check"></span>
</div>
<div class=main><h1>OTP : <input type="text"class="ok" min="4" max="4" value="" required></h1>
<button type="submit" class="btn">Submit!</button></br>
  <button type="submit" class="btn2">Genrate !</button>
 
</div>

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');
body{
  background: #7cd869;
  font-family: 'Ubuntu', sans-serif;
  margin:0;
  padding:0;
}
.main{
   position:absolute;
  transform:translate(-50%,-50%);
  left:50%; top:50%;
  height:300px;
  width:400px;
  text-align:center;
  border-radius: 50px;
background: #7cd869;
box-shadow: inset 28px 28px 56px #62ab53,
            inset -28px -28px 56px #96ff7f;
 }
.ok{
   background:#7cd869;
  border:none;
   border-bottom:1px solid ;
   font-size:40px;
  outline:none;
  width:90px;
}
h1{
  margin-top:90px;
}
.btn{
 border-radius: 50px;
background:#121212;
  font-size:20px;
  font-weight:bold;
  cursor:pointer;
  margin-top:30px;
  border:none;
  width:200px;
  height:50px;
  transition: ease-in 0.5s;
 color:#7cd869;
}

.btn2{
  background:none;
  font-size:18px;
  font-weight:bold;
  cursor:pointer;
  margin-top:10px;
  border:none;
  width:200px;
  height:30px;
  transition: ease-in 0.5s;
  color:black;
  
}
.alert{
  width:auto;
  height:80px;
  font-size:28px;
  text-align:center;
  border-radius: 0px;
  color:#7cd869;
  background: linear-gradient(315deg, #2b2828, #332f2f);
 box-shadow:  -5px -5px 16px #2b2727,
             5px 5px 16px #353131;
  position:relative;
  top:-100px;
  transition:ease-in 0.3s;
  z-index:99;
}

const otp = () => {
   const digits = "0123456789";
  let key = "";
  for(let i = 0; i < 4; i++){
     key += digits[Math.floor(Math.random()*10)];
  }
  return key;
};
const btn = document.querySelector('.btn');
const check = document.querySelector('.check');
const alert = document.querySelector('.alert');
const input = document.querySelector('.ok');
let btn2 = document.querySelector('.btn2');
const show = document.querySelector('.ok');

btn2.addEventListener("click", function checkme(){
  alert.style.top = "0px";
  check.innerHTML = `${otp()}`
     });
function hide(){
    alert.style.top= "-100px";
    //window.open("https://codepen.io/adhokshaj-01/pen", '_self');
    //window.href = "https://codepen.io/adhokshaj-01/pen/MWOqgbB";
    
}

btn.addEventListener("click", ()=>{
   const check1 = document.querySelector('.check').innerText;
  if( input.value === check1 ){
    alert.innerHTML = `Succesful!</br>please reload the page`;
      input.value = "";
    setTimeout(hide ,  2500);
    
    }
 
  else {
     alert.style.color = "red";
    alert.innerHTML = `OTP did not match!</br>please reload the page.`
      input.value = "";
     setTimeout(hide , 2500);
  }
});