Knockout.js Counter with Color Themes - Knockout-js Typing CST Test

Knockout.js Counter with Color Themes — Knockout-js Code

Counter that cycles through multiple color themes.

<div class="container" data-bind="css: theme()">
	<h2>Counter: <span data-bind="text: count"></span></h2>
	<div>
		<button data-bind="click: increment">+</button>
		<button data-bind="click: decrement">-</button>
		<button data-bind="click: reset">Reset</button>
	</div>
	<button data-bind="click: toggleTheme">Switch Theme</button>
</div>

<script>
function CounterViewModel() {
	this.count = ko.observable(0);
	this.themes = ['light-theme','dark-theme','blue-theme'];
	this.current = 0;
	this.theme = ko.observable(this.themes[this.current]);

	this.increment = () => { this.count(this.count() + 1); };
	this.decrement = () => { this.count(this.count() - 1); };
	this.reset = () => { this.count(0); };
	this.toggleTheme = () => { this.current = (this.current + 1) % this.themes.length; this.theme(this.themes[this.current]); };
}
ko.applyBindings(new CounterViewModel());
</script>

Knockout-js Language Guide

Knockout.js is a lightweight JavaScript library that uses the MVVM (Model-View-ViewModel) pattern to create responsive, data-driven UIs with declarative bindings. It emphasizes simplicity, observables, and automatic UI updates.

More Knockout-js Typing Exercises

Practice Other Languages