Building a Simple Web App to Track Focus Time with Visibility API and Vanilla JavaScript

const openTime = document.getElementById("open-time");
const blurTime = document.getElementById("blur-time");
const resetButton = document.getElementById("reset-button");

let startTime = new Date();
let blurStartTime = null;
let blurTimeElapsed = 0;

// Load saved times from localStorage
const savedOpenTime = localStorage.getItem("openTime");
const savedBlurTimeElapsed = localStorage.getItem("blurTimeElapsed");
console.log(savedBlurTimeElapsed)
if (savedOpenTime) {
  startTime = new Date(savedOpenTime);
}
if (savedBlurTimeElapsed) {
  blurTimeElapsed = parseInt(savedBlurTimeElapsed);
}

function updateTime() {
  const now = new Date();
  const timeElapsed = now - startTime;
  openTime.textContent = `Time with focus: ${formatTime(timeElapsed)}`;
  if (blurStartTime) {
        blurTimeElapsed += now - blurStartTime;
  }
  blurTime.textContent = `Time out of focus: ${formatTime(blurTimeElapsed)}`;

  // Save times to localStorage
  localStorage.setItem("openTime", startTime.toISOString());
    console.log("blurTimeElapsed", blurTimeElapsed)
  localStorage.setItem("blurTimeElapsed", blurTimeElapsed);
}

function formatTime(time) {
  const elapsed = new Date(time);
  return elapsed.toISOString().substr(11, 8);
}

setInterval(function () {
if (!document.hidden) {
    updateTime();
}
}, 1000);


document.addEventListener("visibilitychange", function () {
if (document.hidden) {
    blurStartTime = new Date();
} else {
    if (blurStartTime) {
    blurTimeElapsed += new Date() - blurStartTime;
    blurStartTime = null;
    updateTime(); // Update the UI immediately when the page becomes visible
    }
}
});


resetButton.addEventListener("click", function () {
  startTime = new Date();
  blurStartTime = null;
  blurTimeElapsed = 0;

  // Clear saved times in localStorage
  localStorage.removeItem("openTime");
  localStorage.removeItem("blurTimeElapsed");
});

// Load saved times in the UI
if (savedOpenTime) {
  const elapsed = new Date(new Date() - startTime);
  openTime.textContent = `Time with focus: ${formatTime(elapsed)}`;
}
if (savedBlurTimeElapsed) {
  const elapsed = new Date(savedBlurTimeElapsed);
  blurTime.textContent = `Time out of focus: ${formatTime(elapsed)}`;
}