Mini timer demo on Signel.js

by jahongirsobirov

HTML

<script src="https://signel.onrender.com/signel.js"></script>
<input type="number" id="timeval">
<div class="timer">
  Time left: $$seconds seconds
</div>
<button id="start">Start</button>
<button id="stop">Stop</button>

JavaScript

// 1. Create reactive state
const state = el(".timer", {
  seconds: 10
});

let intervalId = null;

model("#timeval", state, "seconds");

// 2. Start button
click("#start", () => {
  if (intervalId) return; // prevent multiple timers
  intervalId = setInterval(() => {
    if (state.seconds > 0) {
      state.seconds--; // triggers re-render automatically
    } else {
      clearInterval(intervalId);
      intervalId = null;
    }
  }, 1000);
});

// 3. Stop button
click("#stop", () => {
  clearInterval(intervalId);
  intervalId = null;
});