<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class='container'>
   <h1 class = 'title'>OTP GENERATOR</h1>
    <div class="instruction">
      <h4>Instructions:</h4>
    <ul><li>The OTP is valid for 120 seconds </li> <li>Don't share your OTP with anyone</li></ul>
    </div>
    <div class="inputs">
      <span class='select'>Select the type of OTP :</span> <br><br>
      <input type="radio" name='otp' value='1'><span>Letters</span>
      <input type="radio" name='otp' value='2'><span>Numbers</span>
      <input type="radio" name='otp' value='3'><span>Mixed</span><br> <br>
      <button onclick='generateOtp()'>Generate OTP</button>
    </div>
    <div class="otp">
      <h3>OTP :</h3><h3 id='res'></h3>
    </div>
    
  </div>
</body>
</html>
*{
 font-family:roboto; 
  color:#4C4C62;
}

.container{
  width:60%;
  height:80vh;
  background:linear-gradient(to right, #F2994A , #F2C94C);
  padding:20px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-radius:50px;
  margin:auto;
  box-shadow: 5px 10px 8px #888888;
}
.title{
  text-align:center;
  border-bottom:1px solid black;
  color:#1E1E39;
}
.instruction{
  margin-left:50px;
  margin-bottom:20px;
}

.inputs{
  margin-left:50px;
  margin-bottom:20px
}

button{
  padding:10px;
  font-size:20px;
  border:none;
  border-radius:20px;
  margin: 5px 0px 0px 0px;
  cursor:pointer;
}

.select{
  font-size:30px;
  font-weight:medium;
}

.otp{
  display:flex;
  justify-content:center;
}
#res{
  margin-left:10px;
  letter-spacing:5px;
  background:white;
  padding:10px;
}

button:hover{
  background:black;
  color:white;
}
var numbers = '0123456789';
var letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var mixed = numbers + letters;

function generateOtp(){
  var value = document.getElementsByName("otp");
  var selected ;
  var otp = '';
  for(let i =0;i<value.length;i++){
    if(value[i].checked){
      selected =parseInt(value[i].value);
    }
  }
  if(selected === 1){
    for(let j = 0; j<6 ;j++){
      otp+=letters[Math.round(Math.random()*25)];
    }
  }
  else if(selected === 2){
    for(let j = 0; j<6 ;j++){
      otp+=numbers[Math.round(Math.random()*9)];
    }
  }
  else if(selected === 3){
    for(let j = 0; j<6 ;j++){
      otp+=mixed[Math.round(Math.random()*35)];
    }
  }
  var result =  document.getElementById('res')
  result.innerText = otp;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.