Timer app

Posted under » PHP » JavaScript on 21 June 2024

I have issues when using a timer using solely javascript because it only works when your browser is active and you are looking at it.

I already did a countdown using php but it is static and the refresh wasn't elegant. In addition, I would like to have the determine the time the timer will stop just like my Casio watch or a stopwatch.

Here is timer.php code

<¿php

if (isset($hour)) {$hour = date("H"); } else {$hour = $_GET["h"]; }
if (isset($minit)) {$minit = date("i"); } else {$minit = $_GET["m"]; }

$currentdatetime = date("Y-m-d H:i:s");
$hari = date("Y-m-d");
$jam = date($hour.":".$minit.":00");

$eventDate = $hari." ".$jam;

$currentTimestamp = time();
$eventTimestamp = strtotime($eventDate);
$eventTimesetamp = $eventTimestamp;

if ($eventTimesetamp > $currentTimestamp) {
    $timeRemaining = $eventTimesetamp - $currentTimestamp;
    $hours = floor($timeRemaining / 3600);
    $minutes = floor(($timeRemaining % 3600) / 60);
    $seconds = $timeRemaining % 60;

    echo "Time remaining: {$hours} hours, {$minutes} minutes, {$seconds} seconds";
           } else {
    echo "Event has already occurred. <p>Current time : ".$currentTimestamp."<p>Event timestamp : ".$jam ;
           }
?>

You need to define the h and m parameter via URL... eg. timer.php?h=8&m=35 for example.

For showing the current time you need to refesh the element every second. We need to do this for the timer.php code too. I have the following refresh calls to JS functions.

 setInterval(casio, 1000); 
 setInterval(loadPage, 2000);

This will get the hr and minute parameters

function hurl(hr,min) {
 gfurl = 'timer.php?h=' + hr + '&m='  + min ;
 console.log("global value of url is: ", gfurl);
 }

In javascript, you use var for variables inside a function but if in this 'gfurl' example, it will be a global variable. I need gfurl to be global in order to use inside the loadPage function. This is loadPage is refreshed every 2 seconds. Casio is the clock.

citizen is to get the hour and minute to make it easier to input the event time. I load it once instead of every second by <body onload="citizen()">

function loadPage() {
  const flickr = document.getElementById('flickr');
//  fetch('timer.php?h=8&m=20')
  fetch(gfurl)
    .then(response => response.text())
    .then(html => {
      flickr.innerHTML = html;
    })
    .catch(error => {
      console.log(error);
    });
  }

 function citizen() {
  const asr = new Date();
  let h = asr.getHours();
  let m = asr.getMinutes();
  document.getElementById("jam").value = h;
  document.getElementById("minit").value = m;
  hurl(h,m);
 }

 function casio() {
  const date = new Date();
  document.getElementById("clock").innerHTML = date.toLocaleTimeString();
  }

The most important thing to note is the fetch command which fetches the contents of `gfurl' and we use it to show the contents every 2 seconds. The following is the rest of the HTML which is self-explanatory.

<body onload="citizen()">
	Timer
	<p>Time : <span id="clock"> 
	<¿php
	echo '<div id="flickr">';
		echo $meh;
		echo "</div>";
	?>
	<div id="form">
		<p>Hour
		

		Minute
		

		<button onclick="hurl(document.getElementById('jam').value,document.getElementById('minit').value)">capture it</button>
	</div>
	<p>Show | Hide

If you don't like to see the clutter and want to hide the form, you can hide it.

Roughly, it will look like this