I have been trying to make a reward system where a user can login daily to receive rewards but if I click on the "Claim daily Reward", the button get's disabled which is fine but if I refresh the page, the button gets enabled.
This is the code
const btn = document.querySelectorAll("#primary");
for (let i = 0; i < berries.length; i++) {
btn[i].addEventListener('click', () => {
btn.disabled = true
})
}.berrycontainer {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.berry {
background: rgba(157, 236, 38, 0.938);
border-radius: 0.4rem;
margin-left: 2rem;
margin-top: 2rem;
}<main style="text-align: center;">
<div class="berrycontainer">
<div class="berry">
<h1 class="berryh">20 berries</h1>
<p class="day-paragraph">Day 1</p>
<button type="button" class="btn btn-primary" id="primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">Claim Daily reward <i class="bi bi-clock-fill clock"
style="display: none;"></i></button>
</div>
<div class="berry">
<h1 class="berryh">20 berries</h1>
<p class="day-paragraph">Day 1</p>
<button type="button" class="btn btn-primary" id="primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">Claim Daily reward <i class="bi bi-clock-fill clock"
style="display: none;"></i></button>
</div>
<div class="berry">
<h1 class="berryh">20 berries</h1>
<p class="day-paragraph">Day 1</p>
<button type="button" class="btn btn-primary" id="primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">Claim Daily reward <i class="bi bi-clock-fill clock"
style="display: none;"></i></button>
</div>
</div>
</main>Since you already have a user, who is "logging in" somewhere, save the state of that reward/rewards in the place where you verify that login, I assume it is some database. Reset the state of "claimed" rewards on a daily basis there.