<body onload="generate()">
    <div class="wrapper"></div>
    <h2 id="status" style="color: #ee7e6a;"></h2>
    <div>
        <input type="text" readonly id="generated-captcha">
    </div>
    <div>
        <input type="text" id="entered-captcha" placeholder="Enter the captcha..">
    </div>
    <button type="button" onclick="check()">
        check
    </button>
    <button type="button" onclick="generate()" id="gen">
        Generate New
    </button>

</body>
body {
  display: flex;
  justify-content: center;
  height: 100vh;
  align-items: center;
  padding: 0;
  margin: 0;
  flex-direction: column;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='0' y1='1' y2='0' gradientTransform='rotate(264,0.5,0.5)'%3E%3Cstop offset='0' stop-color='%230FF'/%3E%3Cstop offset='1' stop-color='%23CF6'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' x2='0' y1='0' y2='1' gradientTransform='rotate(199,0.5,0.5)'%3E%3Cstop offset='0' stop-color='%23F00'/%3E%3Cstop offset='1' stop-color='%23FC0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='%23FFF' fill-opacity='0' stroke-miterlimit='10'%3E%3Cg stroke='url(%23a)' stroke-width='5.28'%3E%3Cpath transform='translate(-73.5 16.8) rotate(10.5 1409 581) scale(1.042)' d='M1409 581 1450.35 511 1490 581z'/%3E%3Ccircle stroke-width='1.7600000000000002' transform='translate(-42 42) rotate(12.6 800 450) scale(1.021)' cx='500' cy='100' r='40'/%3E%3Cpath transform='translate(37.8 -126) rotate(126 401 736) scale(1.021)' d='M400.86 735.5h-83.73c0-23.12 18.74-41.87 41.87-41.87S400.86 712.38 400.86 735.5z'/%3E%3C/g%3E%3Cg stroke='url(%23b)' stroke-width='1.6'%3E%3Cpath transform='translate(252 -16.8) rotate(4.2 150 345) scale(0.958)' d='M149.8 345.2 118.4 389.8 149.8 434.4 181.2 389.8z'/%3E%3Crect stroke-width='3.5200000000000005' transform='translate(-168 -105) rotate(151.2 1089 759)' x='1039' y='709' width='100' height='100'/%3E%3Cpath transform='translate(-252 84) rotate(25.2 1400 132)' d='M1426.8 132.4 1405.7 168.8 1363.7 168.8 1342.7 132.4 1363.7 96 1405.7 96z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;
}
div {
  margin-bottom: 10px;
}
button {
  margin-bottom: 5px;
  cursor: pointer;
}
input {
  text-decoration: none;
}
#generated-captcha {
  text-decoration: line-through;
  font-weight: bold;
  text-align: center;
  font-size: 20px;
  background-color: #ede7f6;
  border-radius: 6px;
  border: none;
  padding: 6px;
  outline: none;
  color: #1d1d1d;
}
#entered-captcha {
  border: 2px solid #c5c7f7;
  font-family: monospace;
  outline: none;
  border-radius: 6px;
  padding: 8px 15px;
  font-size: 12px;
}
button {
  border: none;
  padding: 8px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-family: monospace;
  font-weight: bold;
  outline: none;
  background-color: #64f394;
}

#gen {
  background-color: #ee7e6a;
}
.wrappr {
  /* border: 1px solid red; */
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  justify-content: center;
}

let captcha;
let alphabets = "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz";
console.log(alphabets.length);
let status = document.getElementById('status');
status.innerText = "Captcha Generator";

 generate = () => {
// console.log(status)
let first = alphabets[Math.floor(Math.random() * alphabets.length)];
let second = Math.floor(Math.random() * 10);
let third = Math.floor(Math.random() * 10);
let fourth = alphabets[Math.floor(Math.random() * alphabets.length)];
let fifth = alphabets[Math.floor(Math.random() * alphabets.length)];
let sixth = Math.floor(Math.random() * 10);
captcha = first.toString()+second.toString()+third.toString()+fourth.toString()+fifth.toString()+sixth.toString();
console.log(captcha);
document.getElementById('generated-captcha').value = captcha;
document.getElementById("entered-captcha").value = '';
status.innerText = "Captcha Generator"
}

 check = () => {
// console.log(status)
let userValue = document.getElementById("entered-captcha").value;
console.log(captcha);
console.log(userValue);
if(userValue == captcha){
    status.innerText = "Correct!!"
}else{
    status.innerText = "Try Again!!"
    document.getElementById("entered-captcha").value = '';
}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.