script.js

let generateButton = document.getElementById("generate-btn");
const generatePinField = document.getElementById("random-pin-box");
let pinInputField = document.getElementById("pin-input-field");
let buttons = Array.from(document.getElementsByClassName("button"));
generateButton.addEventListener("click", function () {
  generatePinField.innerText = Math.round(1000 + Math.random() * 9000);
});
buttons.map((button) => {
  button.addEventListener("click", (e) => {
    switch (e.target.innerText) {
      case "C":
        pinInputField.innerText = "";
        break;
      case "←":
        pinInputField.value = pinInputField.innerText.slice(0, -1);
        break;
      default:
        pinInputField.innerText += e.target.innerText;
    }
  });
});
const success = document.getElementById("success");
const failed = document.getElementById("failed");
const submitButton = document.getElementById("submit-btn");
let tryLeft = parseInt(document.getElementById("try-left").innerText);
submitButton.addEventListener("click", function () {
  if (generatePinField.innerText == pinInputField.innerText) {
    success.style.display = "block";
    alert("Pin matched");
  } else {
    failed.style.display = "block";
    tryLeft = tryLeft - 1;
    document.getElementById("try-left").innerText = tryLeft;
    if (tryLeft < 0) {
      document.getElementById("try-left").innerText = 0;
      alert("tries finished");
    }
  }
});