JS Idle Timer

README.md

JS Idle Timer

This Gist was generated by Contrived.

Do not modify the metadata file if you want to open in Contrived again. Otherwise, it is safe to delete.

Happy Hacking!

contrivedExperimentMetadata.json

{"user":"5f0c542a4a2ce5e528e01fdf","templateVersion":"1","templateId":"vanillajs","resources":["<meta charset=\"UTF-8\" />","<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">"],"dependencies":[],"files":[{"id":1,"parentId":0,"name":"src","path":"/src","type":"folder","isRoot":true,"selected":false,"expanded":true,"children":[{"id":3,"name":"index.js"},{"id":4,"name":"styles.css"}]},{"id":2,"parentId":0,"name":"index.html","path":"/index.html","type":"file","mimeType":"html","isRoot":true,"open":true,"selected":false,"content":""},{"id":3,"parentId":1,"name":"index.js","path":"/src/index.js","type":"file","mimeType":"js","isRoot":false,"open":true,"selected":true,"content":""},{"id":4,"parentId":1,"name":"styles.css","path":"/src/styles.css","type":"file","mimeType":"css","isRoot":false,"open":true,"selected":false,"content":""}],"experimentId":"5f6c3b42923a2900174e971b"}

css.css

.App {
	font-family: sans-serif;
	text-align: center;
}

.desc {
	padding: 10px;
	margin: 10px 15%;

	border-radius: 4px;
	border: 1px solid royalblue;
}

html.html

<div class='App'>
	<h1>JS Idle Timer</h1>
	<h3>Description</h3>
	<p class='desc'> 
		The timer will be incremented every 
		second to denote the idle time. 
		Interaction with the mouse or 
		keyboard will reset and hide the timer. 
	</p>
	<h3>Implementation</h3>
	<div class='desc'> 
		<p>
		  Two functions are created, one that resets the timer whenever 
		  user interaction is detected and the other that would be executed 
		  periodically during the time the user is idle. 
		</p>
		<p>
		  The <strong>reset</strong> function consists of the setInterval() function, 
		  which is used to create a new interval that will repeatedly invoke another 
			function. 
		</p>
		<p>
		  The timer created is assigned to a variable that will be used to clear out 
			the old-timer whenever this function is called again on user interaction.
      This function is invoked by binding it to the events that cause interaction 
			to the page.
		</p>
	</div>
	<p class="timertext" style="font-size: 1.5rem;"> 
    You are idle for <span class="secs"></span> seconds. 
  </p>
</div>

javascript.js

let timer = 0;
let currSeconds = 0; 

function resetTimer() {
  // Hide the timer text
  document.querySelector('.timertext').style.display = 'none';

  // Clear the previous interval
  clearInterval(timer); 

  // Reset the seconds of the timer
  currSeconds = 0; 

  // set a new interval
  timer = setInterval(startIdleTimer, 1000); 

}


// Define the events that 
// would reset the timer 
window.onload = resetTimer; 
window.onmousemove = resetTimer; 
window.onmousedown = resetTimer; 
window.ontouchstart = resetTimer; 
window.onclick = resetTimer; 
window.onkeypress = resetTimer;

function startIdleTimer() {
  // Increment the timer seconds
  currSeconds++;

  // set the timer text to the new value
  document.querySelector('.secs').textContent = currSeconds;

  // display the timer text
  document.querySelector('.timertext').style.display = 'block';
}