How to Check User is Idle using JavaScript

Introduction

In this comprehensive blog post, we’ll explore the creation of an Inactivity Timer using a combination of HTML, CSS, and JavaScript. This timer not only keeps track of user inactivity but also provides a clean and user-friendly interface for managing the timer. We’ll break down each section of the code, explain the logic behind it, and guide you through the process of understanding and implementing this powerful tool.

HTML Structure

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Inactivity Timer</title>
    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="app-wrapper">
      <div class="timer-display">00:00</div>
    </div>
    <div class="timer-container hide">
      <p id="info-message"></p>
      <div class="action-buttons">
        <button id="resume-timer">Resume</button>
        <button id="exit-timer">Exit</button>
      </div>
    </div>
  </body>
</html>

HTML

HTML Breakdown:

Application Wrapper: A container for the timer display.
Timer Display: Displays the current time in the “00:00” format.
Timer Container: A hidden container that appears when inactivity is detected.
Information Message: Displays relevant information such as exit confirmation.
Action Buttons: Buttons for resuming and exiting the timer.

CSS Styling

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  background-color: #1e1c27;
}
.app-wrapper {
  display: flex;
  justify-content: right;
}
.timer-display {
  display: inline-block;
  font-size: 1.4em;
  padding: 1em 2em;
  margin: 1em 1em 0 0;
  background-color: #3498db;
  border-radius: 0.3em;
}
.timer-container {
  width: 80vw;
  max-width: 31.25em;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  padding: 2em 4em;
  background-color: #ffffff;
  border-radius: 0.5em;
}
#info-message {
  width: 100%;
  text-align: center;
}
.action-buttons {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.timer-container button {
  border: 0.2em solid #2ecc71;
  padding: 0.8em 1.2em;
  border-radius: 0.3em;
  outline: none;
  margin-top: 2em;
}
#resume-timer {
  background-color: #2ecc71;
  color: #ffffff;
}
#exit-timer {
  color: #2ecc71;
  background-color: #ffffff;
}
.hide {
  display: none;
}

CSS

CSS Highlights:

Global Styles: Sets global styles, including font-family and box-sizing.
Body Styles: Defines the background color for the body.
Application Wrapper Styles: Styles for the main application wrapper.
Timer Display Styles: Styles for the timer display.
Timer Container Styles: Styles for the container that appears when inactivity is detected.
Action Buttons Styles: Styles for the resume and exit buttons.
Hide Class: Defines the style for hiding elements.

JavaScript Logic

let [seconds, minutes] = [0, 0];
let isInactive = false;
let timerElement = document.querySelector(".timer-display");
const resumeButton = document.getElementById("resume-timer");
const exitButton = document.getElementById("exit-timer");
const timerContainer = document.querySelector(".timer-container");
const infoMessage = document.getElementById("info-message");
let timerInterval = null;

const startTimer = () => {
  if (timerInterval !== null) {
    clearInterval(timerInterval);
  }
  timerInterval = setInterval(displayTimer, 1000);
};

resumeButton.addEventListener("click", () => {
  isInactive = false;
  initializeTimer();
});

window.onload = initializeTimer = () => {
  if (isInactive) {
    return false;
  }
  [seconds, minutes] = [0, 0];
  timerElement.innerHTML = `00:00`;
  if (timerElement.classList.contains("hide")) {
    timerElement.classList.remove("hide");
  }
  timerContainer.classList.add("hide");
  if (exitButton.classList.contains("hide")) {
    exitButton.classList.remove("hide");
    resumeButton.classList.remove("hide");
  }
  infoMessage.innerText = "";
  startTimer();
};

window.onmousemove = initializeTimer;
window.onclick = initializeTimer;
window.ontouchstart = initializeTimer;
window.onkeydown = initializeTimer;

exitButton.addEventListener("click", () => {
  clearInterval(timerInterval);
  [seconds, minutes] = [0, 0];
  timerElement.innerHTML = `00:00`;
  exitButton.classList.add("hide");
  resumeButton.classList.add("hide");
  timerElement.classList.add("hide");
  infoMessage.innerText = "Exited Successfully";
});

function displayTimer() {
  seconds++;
  let m = minutes < 10 ? "0" + minutes : minutes;
  let s = seconds < 10 ? "0" + seconds : seconds;
  timerElement.innerHTML = `${m}:${s}`;
  if (seconds == 10) {
    isInactive = true;
    seconds = 0;
    clearInterval(timerInterval);
    infoMessage.innerText = "You have been inactive";
    timerContainer.classList.remove("hide");
  }
}

JavaScript

JavaScript Breakdown:

Variable Initialization: Initializes variables for tracking time, inactivity status, and timer intervals.
Start Timer Function: Initiates the timer.
Event Listeners: Listens for user activity (mousemove, click, touch, keydown) and restarts the timer accordingly.
Resume Button Event: Handles the resume button click event.
Initialize Timer Function: Initializes or restarts the timer.
Exit Button Event: Handles the exit button click event.
Display Timer Function: Updates and displays the timer.

Conclusion

With this Inactivity Timer, you can actively manage user engagement on your website. The combination of HTML, CSS, and JavaScript provides a robust solution for detecting and responding to user inactivity. Customize this code to fit your specific requirements, and enhance the user experience on your website.

Feel free to experiment with additional features, styles, or functionalities to make this Inactivity Timer uniquely yours.

Happy coding!