Building a Simple Web App to Track Focus Time with Visibility API and Vanilla JavaScript
Tags: javascript, ux, ai, chatgpt
Published: 2023-02-16 11:25:19

---
title: Building a Simple Web App to Track Focus Time with Visibility API and Vanilla JavaScript
published: true
description: 
tags: JavaScript, UX, AI, ChatGpt
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gg3ymoaefkel3dlbyjk6.jpeg
# Use a ratio of 100:42 for best results.
# published_at: 2023-02-14 15:29 +0000
---

## Description
In this blog post, we will go through the process of building a simple web app that tracks the time spent with and without focus using Vanilla JavaScript and the Visibility API. We will also use Tailwind CSS to make it look visually appealing.

The visibilitychange event is a part of the Visibility API that is used to detect changes in the visibility of a web page. When a page becomes hidden or visible, this event is fired. We can use this event to track the time a user spends on a web page with and without focus.

> *TLDR*: We will build a web app to track the time spent with and without focus using the Visibility API and Vanilla JavaScript.

## Demo
Over at Codepen.io I have made a short demo: [Show how long time an app have been in focus](https://codepen.io/netsi1964/pen/poOvOOE)

## About Visibilitychange
The Visibility API is a part of the Web API that provides an interface for developers to determine the visibility of a web page. The `visibilitychange` event is fired when a web page's visibility changes. It is an essential tool for developers to detect if a user is interacting with their web page or not. You can find more information about the Visibility API in the [mozilla web API documentation](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API).

## The Code
The HTML code of our web app consists of a simple structure that contains two p elements with IDs open-time and blur-time. The open-time element displays the time spent with focus, and the blur-time element displays the time spent without focus.

The JavaScript code uses the `setInterval()` method to update the time every second. The `updateTime()` function calculates the time spent with focus and without focus using the Date object and updates the values of the open-time and blur-time elements.

```javascript
const openTime = document.getElementById("open-time");
const blurTime = document.getElementById("blur-time");

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

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)}`;
}

function formatTime(time) {
  const hours = Math.floor(time / (60 * 60 * 1000));
  const minutes = Math.floor((time / (60 * 1000)) % 60);
  const seconds = Math.floor((time / 1000) % 60);
  return `${hours.toString().padStart(2, "0")}:${minutes
    .toString()
    .padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
}

setInterval(updateTime, 1000);

document.addEventListener("visibilitychange", function () {
  if (document.hidden) {
    blurStartTime = new Date();
  } else {
    blurTimeElapsed += new Date() - blurStartTime;
    blurStartTime = null;
  }
});
````

### Disclaimer
This web app was created as a response to a prompt given by [netsi1964](https://twitter.com/netsi1964) to [ChatGPT+](https://chat.openai.com/chat), a large language model trained by OpenAI. The purpose of this post is to provide a demonstration of how to use the Visibility API and Vanilla JavaScript to build a simple web app that tracks time spent with and without focus. Image generated using [runwayml.com](https://app.runwayml.com/) text-to-image tool.