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

.main{
  border:2px solid black;
  border-radius:10px;
  width:52%;
  height:50vh;
  transform:translate(50%,50%);
  padding:15px;
/*   overflow-y:scroll; */
}

.inputs{
  margin-top:30px;
  width:100%;
}

input[type="text"]{
  width:90px;
  height:90px;
  font-size:80px;
  text-align:center;
  border:none;
  border-bottom:1.5px solid silver;
  margin-right:10px;
  border-radius:5px;
  outline:none;
}

input:focus{
  border-bottom:1.5px solid blue;
}

.msg{
  text-align:center;
  margin-top:50px;
  font-size:25px;
  color:green;
}

var one = document.querySelector(".one");
var two = document.querySelector(".two");
var three = document.querySelector(".three");
var four = document.querySelector(".four");
var five = document.querySelector(".five");
var toggle = document.querySelector(".toggle");

var otp = 84979;

$(".toggle").change(function() {
    if(this.checked) {
        check(true);
    }
    else{
        check(false);
    }
});

function check(value){
        $(two).attr("readonly",value);
        $(three).attr("readonly",value);
        $(four).attr("readonly",value);
        $(five).attr("readonly",value);
}

$(one).keyup(function(){
  var cs = $(this).val().length;
    if(cs == 1){
      if (this.value.match(/[^0-9]/g)) {
          this.value = this.value.replace(/[^0-9]/g, '');
      }else{
        $(two).removeAttr("readonly");
        $(two).focus();
        $(this).css('box-shadow','0px 10px 10px -7px rgba(0,0,0,.5)');
      }
    }else if(cs > 1){
      $(this).val();
    }
  $(this)
    .keyup(function(e){
      if(e.keyCode == 8){
        $(one).focus();
        $(this).css('box-shadow','none');
      }
  });
});



$(two).keyup(function(){
  var cs = $(this).val().length;
    if(cs == 1){
      if (this.value.match(/[^0-9]/g)) {
          this.value = this.value.replace(/[^0-9]/g, '');
      }else{
        $(this).css('box-shadow','0px 10px 10px -7px rgba(0,0,0,.5)');
        $(three).removeAttr("readonly");
        $(three).focus();
      }
    }
  $(this)
    .keyup(function(e){
      if(e.keyCode == 8){
        $(one).focus();
        $(this).css('box-shadow','none');
        if ($("input[type=checkbox]").is( 
                      ":checked")){
        $(this).attr("readonly",true);
        }
      }
  });
});



$(three).keyup(function(){
  var cs = $(this).val().length;
    if(cs == 1){
      if (this.value.match(/[^0-9]/g)) {
          this.value = this.value.replace(/[^0-9]/g, '');
      }else{
        $(this).css('box-shadow','0px 10px 10px -7px rgba(0,0,0,.5)');
        $(four).removeAttr("readonly");
        $(four).focus();
      }
    }
  $(this)
    .keyup(function(e){
      if(e.keyCode == 8){
        $(two).focus();
        $(this).css('box-shadow','none');
        if ($("input[type=checkbox]").is( 
                      ":checked")){
        $(this).attr("readonly",true);
        }
      }
  });
});


$(four).keyup(function(){
  let cs = $(this).val().length;
    if(cs == 1){
      if (this.value.match(/[^0-9]/g)) {
          this.value = this.value.replace(/[^0-9]/g, '');
      }else{
        $(this).css('box-shadow','0px 10px 10px -7px rgba(0,0,0,.5)');
        $(five).removeAttr("readonly");
        $(five).focus();
      }
    }
  $(this)
    .keyup(function(e){
      if(e.keyCode == 8){
        $(three).focus();
        $(this).css('box-shadow','none');
        if ($("input[type=checkbox]").is( 
                      ":checked")){
        $(this).attr("readonly",true);
        }
      }
  });
});



$(five).keyup(function(){
  let cs = $(this).val().length;
    if(cs == 1){
      if (this.value.match(/[^0-9]/g)) {
          this.value = this.value.replace(/[^0-9]/g, '');
      }else{
        $(this).css('box-shadow','0px 10px 10px -7px rgba(0,0,0,.5)');
        $(five).focus();
        checkotp();
      }
    }
  $(this)
    .keyup(function(e){
      if(e.keyCode == 8){
        $(four).focus();
        $(this).css('box-shadow','none');
        if ($("input[type=checkbox]").is( 
                      ":checked")){
        $(this).attr("readonly",true);
        }
        resetcolors();
      }
  });
});
// $('textarea').keydown(updateCount);

function checkotp(){
  var inotp = $(one).val()+$(two).val()+$(three).val()+$(four).val()+$(five).val();
  
  if(inotp == otp){
    bgcolor("rgba(0,225,0,.5)");
    $(".msg").text("correct");
    $(".msg").css("color","green");
  }else{
    bgcolor("rgba(225,0,0,.5)");
    $(".msg").text("incorrect");
    $(".msg").css("color","red");
  }
  
}

function resetcolors(){
  bgcolor("white");
  $(".msg").text("");
}

function bgcolor(color){
    $(one).css('background-color',color);
    $(two).css('background-color',color);
    $(three).css('background-color',color);
    $(four).css('background-color',color);
    $(five).css('background-color',color);
}