Membuat kode OTP dengan HTML, CSS Dan Javascript
Buat script html seperti di bawah ini
<body>
<div class="container">
<h3>OTP Generate</h3>
<div id="otp">
<img src="assets/lock.png" alt="" width="200px">
</div>
<button id="btn" onclick="otpgenerate()">Get OTP</button>
</div>
</body>
<script>
Kemudian buat script file css untuk tampilan
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
font-family: sans-serif;
}
body {
width: 100%;
height: 100vh;
display: grid;
place-content: center;
background-color: #1207ad;
}
.container {
min-width: 300px;
height: 320px;
border: 1px solid lightgray;
border-radius: 20px;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
}
#otp span {
display: inline-block;
width: 70px;
height: 70px;
margin: 20px;
border: lightgray 10px solid;
border-radius: 50%;
border-top-color: orange;
animation: animation 1s linear infinite;
}
@keyframes animation {
100% {
transform: rotate(360deg);
}
}
#otp {
height: 100px;
font-family: 2.4rem;
font-weight: bold;
margin: 0 auto;
color: grey;
letter-spacing: 5px;
display: grid;
place-content: center;
}
button {
width: 50%;
padding: 5px 10px;
}
Kemudian buat script javascript di dalam file html yang telah di buat sebelumnya
<script>
function otpgenerate() {
let optshow = document.getElementById('otp');
let number = '0123456789';
let otp = '';
for (let i = 0; i < 4; i++) {
otp += number[Math.floor(Math.random() * 10)];
}
optshow.innerHTML = '<span></span>'
setTimeout(() => {
optshow.innerHTML = otp;
}, 1000);
}
</script>
Terakhir hubungkan file css dengan file html yang telah di buat sebelumnya
<link rel="stylesheet" href="css/style.css">
0 Komentar