<html lang="fa">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Guess a number!</title>
<style>
body {
font-family: Vazirmatn, sans-serif !important;
}
</style>
<link
href="https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css"
rel="stylesheet"
type="text/css"
/>
<link rel="stylesheet" href="bootstrap-5.3.2-dist/css/bootstrap.rtl.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<body dir="rtl">
<h3 class="text-center">بازی حدس اعداد</h3>
<form class="">
<div class="mb-3">
<input
type="number"
class="form-control"
id="Input"
placeholder="عدد بین یک تا بیست را حدس بزنید"
/>
</div>
<button type="button" class="btn btn-primary" id="btn">حدس</button>
</form>
<div class="text-center">
<h2>
تعداد حدس باقیمانده :
<span id="counter"></span>
</h2>
</div>
<div class="text-center">
<h2 id="txt"></h2>
</div>
<button
type="button"
onclick="run()"
class="btn btn-primary d-none"
id="runBtn"
>
شروع مجدد بازی
</button>
<script>
function getRandomInt(max) {
return Math.floor(Math.random() * max);
}
let randomNumber = getRandomInt(20);
console.log(randomNumber);
btn = document.getElementById("btn");
txt = document.getElementById("txt");
let input = document.getElementById("Input");
counter = 0;
userCounter = 5;
userCounterElement = document.getElementById("counter");
userCounterElement.innerHTML = userCounter;
btn.addEventListener("click", () => {
if (counter < 5) {
inputNumber = input.value;
if (inputNumber > randomNumber) {
txt.innerHTML = "بزرگتر";
txt.style.color = "gray";
// txt.classList.add("text-bg-warning","rounded","p-3");
} else if (inputNumber < randomNumber) {
txt.innerHTML = "کوچکتر";
txt.style.color = "blue";
// txt.classList.add("text-bg-info","rounded","p-3");
} else {
txt.innerHTML = "تبریک،شما برنده شدید";
//txt.style.color = "green"
document.querySelector("form").classList.add("d-none");
document.querySelector("h2").classList.add("d-none");
document.getElementById("runBtn").classList.remove("d-none");
txt.classList.add("text-bg-success", "rounded", "p-2");
}
counter++;
userCounterElement.innerHTML = userCounter - counter;
} else {
txt.innerHTML = "شما بازنده شدید";
//txt.style.color = "red"
document.querySelector("form").classList.add("d-none");
document.querySelector("h2").classList.add("d-none");
txt.classList.add("text-bg-danger", "rounded", "p-2");
document.getElementById("runBtn").classList.remove("d-none");
}
});
function run() {
location.reload();
}
</script>
</body>
</html>
مخصوص اعضای ویژه 
