migrating element structure to javascript

This commit is contained in:
overflowerror 2024-08-16 20:18:11 +02:00
parent 44f96fffe9
commit 52fb006041
2 changed files with 30 additions and 22 deletions

View file

@ -6,7 +6,7 @@
.captcha {
width: 300px;
height: 70px;
padding: 20px;
padding: 19px;
border: 1px solid grey;
box-sizing: border-box;
font-size: 20px;
@ -78,29 +78,9 @@
</style>
<script>
window.addEventListener("load", () => {
[...document.querySelectorAll(".captcha .checkbox")].forEach(c => c.addEventListener("click", async function() {
const result = document.getElementById("result");
result.innerText = "Calculating...";
this.classList.add("loading");
const challenge = makeSuffix(Math.floor(Math.random() * Number.MAX_SAFE_INTEGER)) + ":" + makeSuffix(new Date().valueOf()) + ":";
const response = await findHashWithPrefix(15, challenge);
result.innerText = "Challenge Response: " + response;
this.classList.remove("loading");
this.classList.add("checked");
}));
});
</script>
</head>
<body>
<div class="captcha">
<div class="checkbox"></div>
<span>I am not a robot.</span>
</div>
<div id="result"></div>
<div class="captcha"></div>
</body>
</html>

28
main.js
View file

@ -51,3 +51,31 @@ async function findHashWithPrefix(hashPrefixBits, inputPrefix) {
return message;
}
window.addEventListener("load", () => {
console.log("load");
[...document.getElementsByClassName("captcha")].forEach(captcha => {
console.dir(captcha);
const checkbox = document.createElement("div");
checkbox.classList.add("checkbox");
captcha.append(checkbox);
const text = document.createElement("span");
text.innerText = "I am not a robot";
captcha.append(text);
checkbox.addEventListener("click", async function() {
console.log("Calculating...");
this.classList.add("loading");
const challenge = makeSuffix(Math.floor(Math.random() * Number.MAX_SAFE_INTEGER)) + ":" + makeSuffix(new Date().valueOf()) + ":";
const response = await findHashWithPrefix(15, challenge);
console.log("Challenge Response: " + response);
this.classList.remove("loading");
this.classList.add("checked");
})
});
});