Timer App

index.html

<div class="timerDiv">

	<button class="timerButton" onclick="toggleTimer()">Start Timer</button>

	<span class="timer">
		<span class="min">00</span> : <span class="sec">00</span>
	</span>

	<button onclick="resetTimer()">Reset Timer</button>

</div><br><br>

script.js

// Variables for timer management
let timerStat = false;
let secCounter;

// A function to toggle the timer
function toggleTimer()
{
	if ( timerStat === false )
	{
		// If the timer is off, turn it on
		timerStat = true;

		// Change the text of the timer start button
		document.querySelector( '.timerButton' ).innerText = 'Pause Timer';

		// Turn on the timer
		secCounter = setInterval( updateTimer, 1000 );
	}
	else
	{
		// If the timer is on, turn it off
		timerStat = false;

		// Change the text of the timer start button
		document.querySelector( '.timerButton' ).innerText = 'Start Timer';

		// Turn off the timer
		clearInterval( secCounter );
	}
} // End of toggleTimer()

// A function to update the time of the timer
function updateTimer()
{
	// Get the values of the second and the minute
	let sec = parseInt( document.querySelector( '.sec' ).innerText );
	let min = parseInt( document.querySelector( '.min' ).innerText );

	if ( sec < 59 )
	{
		// Only increase the value of second
		if ( sec < 9 )
		{
			// If the value of second is single digit, pad it with a zero
			document.querySelector( '.sec' ).innerText = '0' + ++sec;
		}
		else
		{
			document.querySelector( '.sec' ).innerText = ++sec;
		}
	}
	else
	{
		// Reset the value of second
		document.querySelector( '.sec' ).innerText = '00';

		// Increase the value of minute
		if ( min < 9 )
		{
			// If the value of minute is single digit, pad it with a zero
			document.querySelector( '.min' ).innerText = '0' + ++min;
		}
		else
		{
			document.querySelector( '.min' ).innerText = ++min;
		}
	}
} // End of updateTimer()

// A function to reset the timer
function resetTimer()
{
	// Turn off the timer
	clearInterval( secCounter );

	timerStat = false;

	// Change the text of the timer start button
	document.querySelector( '.timerButton' ).innerText = 'Start Timer';

	// Reset the value of second and minute
	document.querySelector( '.sec' ).innerText = '00';
	document.querySelector( '.min' ).innerText = '00';
} // End of resetTimer()

// A function to start the timer
function startTimer()
{
	if ( timerStat === false )
	{
		// If the timer is off, turn it on
		timerStat = true;

		// Change the text of the timer start button
		document.querySelector( '.timerButton' ).innerText = 'Pause Timer';

		// Turn on the timer
		secCounter = setInterval( updateTimer, 1000 );
	}
} // End of startTimer()

// A function to pause the timer
function pauseTimer()
{
	if ( timerStat === true )
	{
		// If the timer is on, turn it off
		timerStat = false;

		// Change the text of the timer start button
		document.querySelector( '.timerButton' ).innerText = 'Start Timer';

		// Turn off the timer
		clearInterval( secCounter );
	}
} // End of pauseTimer()

ToDo

• Turn this into a repository