Counter with Auto Increment - Jquery Typing CST Test

Counter with Auto Increment — Jquery Code

Counter automatically increments every second.

$(document).ready(function() {
	var count = 0;
	var isDark = false;
	var auto = false;
	var timer;

	function updateCounter() {
		$('#counter').text(count);
		$('#container').toggleClass('dark-theme', isDark);
		$('#container').toggleClass('light-theme', !isDark);
		$('#theme-btn').text('Switch to ' + (isDark ? 'Light' : 'Dark') + ' Theme');
		$('#auto-btn').text(auto ? 'Stop Auto' : 'Start Auto');
	}

	$('#increment').click(function() { count++; updateCounter(); });
	$('#decrement').click(function() { count--; updateCounter(); });
	$('#reset').click(function() { count = 0; updateCounter(); });
	$('#theme-btn').click(function() { isDark = !isDark; updateCounter(); });
	$('#auto-btn').click(function() {
		auto = !auto;
		if(auto) timer = setInterval(function(){ count++; updateCounter(); }, 1000);
		else clearInterval(timer);
		updateCounter();
	});

	updateCounter();
});

Jquery Language Guide

jQuery is a fast, small, and feature-rich JavaScript library designed to simplify DOM manipulation, event handling, animations, and AJAX interactions. It provides a unified API that works consistently across all major browsers.

More Jquery Typing Exercises

Practice Other Languages