Bahasa pemrograman javascript pada umumnya sering digunakan dalam pembuatan website,akan tetapi bisa juga untuk membuat aplikasi server serta game development.Pada pembahasan kali ini saya akan berbagi sedikit pengetahuan tentang bagaimana cara membuat kode otp dengan menggunakan bahasa pemrograman javascript.
Ada banyak jenis software text editor yang bisa anda gunakan untuk menjalankan program atau codingan bahasa pemrograman javascript ini.Anda bisa menggunakan Software text editor Notepad,Notepad++,Subleme Text,Atom,Visual Studio Code dan yang lain-lain.Untuk menjalankan Program yang satu ini saya merekomendasikan kepada anda untuk menggunakan Software text editor Vs.code.
Mengapa harus menggunakan Vs.code?.Vs.code memilki banyak keunggulan,fitur,dan ekstensi yang bisa diinstal langsung dan dipergunakan.Software yang satu ini sangat cocok dipakai bagi anda yang sedang belajar tentang bahasa pemrograman komputer.Bahkan programmer profesional kelas duniapun banyak menggunakan software Vs.code ini.Apabila anda belum mempunyai software Vs.code ini,anda bisa mendownload nya di laman situs website resminya https://code.visualstudio.com/download.Berikut tampilan atau gambar software text editor Vs.code ketika anda sudah berhasil menginstall dan membukanya
Setelah anda berhasil mengistall dan membuka software Vs.code tersebut maka langkah selanjutnya adalah silahkan buka text file yang baru.Kemudian anda pilih bahasa pemrograman yang mau anda gunakan,setelah itu silahkan tuliskan coding berikut ini.
Berikut Untuk Code HTML nya:
<!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" />
<link rel="stylesheet" href="style.css" />
<title>OTP Field</title>
</head>
<body>
<h1>Enter OTP</h1>
<div class="otp-field">
<input type="text" maxlength="1" />
<input type="text" maxlength="1" />
<input class="space" type="text" maxlength="1" />
<input type="text" maxlength="1" />
<input type="text" maxlength="1" />
<input type="text" maxlength="1" />
</div>
<script src="main.js"></script>
</body>
</html>
Berikut Untuk Code CSS nya:
body {
margin: 0;
font-family: "Poppins", sans-serif;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: #282a36;
height: 100vh;
color: #fff;
}
.otp-field {
display: flex;
}
.otp-field input {
width: 24px;
font-size: 32px;
padding: 10px;
text-align: center;
border-radius: 5px;
margin: 2px;
border: 2px solid #55525c;
background: #21232d;
font-weight: bold;
color: #fff;
outline: none;
transition: all 0.1s;
}
.otp-field input:focus {
border: 2px solid #a527ff;
box-shadow: 0 0 2px 2px #a527ff6a;
}
.disabled {
opacity: 0.5;
}
.space {
margin-right: 1rem !important;
}
Berikut Untuk Code JAVACRIPT nya:
const inputs = document.querySelectorAll(".otp-field input");
inputs.forEach((input, index) => {
input.dataset.index = index;
input.addEventListener("paste", handleOnPasteOtp);
input.addEventListener("keyup", handleOtp);
});
function handleOtp(e) {
/**
* <input type="text" 👉 maxlength="1" />
* 👉 NOTE: On mobile devices `maxlength` property isn't supported,
* So we to write our own logic to make it work. 🙂
*/
const input = e.target;
let value = input.value;
input.value = "";
input.value = value ? value[0] : "";
let fieldIndex = input.dataset.index;
if (value.length > 0 && fieldIndex < inputs.length - 1) {
input.nextElementSibling.focus();
}
if (e.key === "Backspace" && fieldIndex > 0) {
input.previousElementSibling.focus();
}
if (fieldIndex == inputs.length - 1) {
submit();
}
}
function handleOnPasteOtp(e) {
const data = e.clipboardData.getData("text");
const value = data.split("");
if (value.length === inputs.length) {
inputs.forEach((input, index) => (input.value = value[index]));
submit();
}
}
function submit() {
console.log("Submitting...");
// 👇 Entered OTP
let otp = "";
inputs.forEach((input) => {
otp += input.value;
input.disabled = true;
input.classList.add("disabled");
});
console.log(otp);
// 👉 Call API below
}
Langkah selanjutnya yang anda lakukan adalah simpan atau save coding tersebut di folder penyimpanan yang anda inginkan.Kemudian RUN atau jalankan program tersebut,maka hasil nya akan tampak seperti gambar atau tampilan berikut ini.
SELAMAT MENCOBA!!!😇
Comments
Post a Comment