Knockout.js Counter with Double Increment - Knockout-js Typing CST Test

Knockout.js Counter with Double Increment — Knockout-js Code

Counter that increments by 2 on a special button.

<div class="container" data-bind="css: isDark() ? 'dark-theme' : 'light-theme'">
	<h2>Counter: <span data-bind="text: count"></span></h2>
	<div>
		<button data-bind="click: increment">+</button>
		<button data-bind="click: doubleIncrement">++</button>
		<button data-bind="click: decrement">-</button>
		<button data-bind="click: reset">Reset</button>
	</div>
	<button data-bind="click: toggleTheme">Toggle Theme</button>
</div>

<script>
function CounterViewModel() {
	this.count = ko.observable(0);
	this.isDark = ko.observable(false);

	this.increment = () => { this.count(this.count() + 1); };
	this.doubleIncrement = () => { this.count(this.count() + 2); };
	this.decrement = () => { this.count(this.count() - 1); };
	this.reset = () => { this.count(0); };
	this.toggleTheme = () => { this.isDark(!this.isDark()); };
}
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