Hi everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to detect if the user is idle or inactive. For this, we use the idle timer. We detect this using HTML CSS and JavaScript.
This is a beginner-friendly JavaScript project if you are looking for more complicated projects you can check out this playlist here. It consists of about a hundred-plus tutorials. The difficulty level of these tutorials varies from easy to quite complex. Therefore these tutorials are suitable for all kinds of JavaScript learners.
Video Tutorial:
If you would prefer to learn through a video tutorial rather than reading a blog post you can check out the video down below. Also, subscribe to my YouTube channel where I post new tips tricks and tutorials regularly. Along with this I also post multiple-choice questions that will help you with your interviews.
Project Folder Structure:
Before we start coding we create the project folder structure. Create the project folder called inactivity timer. Inside this folder, we have 3 files. The files are index.HTML, style.css script.js. These files are the HTML document, stylesheet and the script file respectively,
HTML:
We begin with the HTML file. First, copy the code below and paste it into your HTML document.
<!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"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<div class="timer-display">00:00</div>
</div>
<div class="container hide">
<p id="message"></p>
<div class="btns">
<button id="start-timer">Continue</button>
<button id="stop-timer">Exit</button>
</div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we style this code using CSS. You can skip CSS as it has nothing to do with the working of this project. I want to use it to make the project more presentable. Copy the code provided to you below and paste it into your study sheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #1dae94;
}
.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: #ffffff;
border-radius: 0.3em;
}
.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;
}
#message {
width: 100%;
text-align: center;
}
.btns {
display: flex;
align-items: center;
justify-content: space-around;
}
.container button {
border: 0.2em solid #1dae94;
padding: 0.8em 1.2em;
border-radius: 0.3em;
outline: none;
margin-top: 2em;
}
#start-timer {
background-color: #1dae94;
color: #ffffff;
}
#stop-timer {
color: #1dae94;
background-color: #ffffff;
}
.hide {
display: none;
}
Javascript:
Implement the logic using JavaScript we do so in the following steps:
Create initial references
Create a start timer function
Add event listener to the restart button
Add event listener to the window
Restart on Mouse move, on click, touch start and keydown
Add event listener to the stop button
Function to display timer
//Initial References
let [seconds, minutes] = [0, 0];
let inactive = false;
let timerRef = document.querySelector(".timer-display");
const restartButton = document.getElementById("start-timer");
const stopButton = document.getElementById("stop-timer");
const container = document.querySelector(".container");
const message = document.getElementById("message");
//Initially interval is null before attaching first interval
let interval = null;
const startTimer = () => {
//Clears interval is an interval already exists
if (interval !== null) {
clearInterval(interval);
}
interval = setInterval(displayTimer, 1000);
};
//Restart
restartButton.addEventListener("click", () => {
inactive = false;
initializeTimer();
});
//Intial setup
window.onload = initializeTimer = () => {
if (inactive) {
return false;
}
[seconds, minutes] = [0, 0];
timerRef.innerHTML = `00:00`;
if (timerRef.classList.contains("hide")) {
timerRef.classList.remove("hide");
}
container.classList.add("hide");
if (stopButton.classList.contains("hide")) {
stopButton.classList.remove("hide");
restartButton.classList.remove("hide");
}
message.innerText = "";
startTimer();
};
//restart on movement
window.onmousemove = initializeTimer;
window.onclick = initializeTimer;
window.ontouchstart = initializeTimer;
window.onkeydown = initializeTimer;
//Stop
stopButton.addEventListener("click", () => {
clearInterval(interval);
[seconds, minutes] = [0, 0];
timerRef.innerHTML = `00:00`;
stopButton.classList.add("hide");
restartButton.classList.add("hide");
timerRef.classList.add("hide");
message.innerText = "Exited Successfully";
});
//Timer logic
function displayTimer() {
seconds++;
let m = minutes < 10 ? "0" + minutes : minutes;
let s = seconds < 10 ? "0" + seconds : seconds;
timerRef.innerHTML = `${m}:${s}`;
if (seconds == 10) {
inactive = true;
seconds = 0;
clearInterval(interval);
message.innerText = "You have been inactive";
container.classList.remove("hide");
}
}
That’s all for this tutorial. If you face any issues while creating this code you can download the source code by clicking on the download button below. Also, If you have any queries, suggestions, or feedback you can comment on them below.
Happy coding
