Display date for a certain period then automatically switch back to the time...

[wedwabbit]

Hi all,

I'm working on a clock face and want it to display the date for a few seconds when the screen is tapped. It should then automatically switch back to displaying the time.

I've worked out how to display the date but can't figure out how to wait for a few seconds and then switch back to the time.

Any ideas?

Thanks 🙂

Relavent code:

// Setup screen elements and function to display date on click.
let hours1 = document.getElementById("hours1");
hours1.onclick = function(e) {
  displayDate();
}
let hours2 = document.getElementById("hours2");
hours2.onclick = function(e) {
  displayDate();
}
let mins1 = document.getElementById("mins1");
mins1.onclick = function(e) {
  displayDate();
}
let mins2 = document.getElementById("mins2");
mins2.onclick = function(e) {
  displayDate();
}

// Update display with the date.
function displayDate() { 
  let d = new Date();

  // Day
  let day = d.getDate();
  console.log(day);

  // Month
  let month = d.getMonth();
  console.log(month);
  
  setHours(day);
  setMins(month);
  
  // Wait X seconds.
  
  // Re-display the time.
}

[wedwabbit · Accepted solution]

I went out for a walk at lunchtime and had an epiphany 🙂

Here's my solution for anyone interested:

// Update display with the date.
function displayDate() { 
  let d = new Date();

  // Day
  let day = d.getDate();
  console.log(day);

  // Month
  let month = d.getMonth();
  console.log(month);
  
  setHours(day);
  setMins(month);
  
  // Wait X seconds and then re-display the time.
  setTimeout(displayUpdate, 1000)
}