Mithril Full Featured Counter - Mithril-js Typing CST Test

Mithril Full Featured Counter — Mithril-js Code

Combines step increment, max limit, auto-reset, history, auto-increment, and theme toggle.

var FullCounter = {
	count: 0,
	history: [],
	isDark: false,
	step: 2,
	max: 10,
	view: function() {
		return m('div', { class: this.isDark ? 'dark-theme' : 'light-theme' }, [
		m('h2', 'Counter: ' + this.count),
		m('div', 'History: ' + this.history.join(', ')),
		m('button', { onclick: () => { let n=this.count+this.step; if(n>this.max)n=0; this.count=n; this.history.push('Increment'); } }, '+'),
		m('button', { onclick: () => { this.count-=this.step; this.history.push('Decrement'); } }, '-'),
		m('button', { onclick: () => { this.count=0; this.history.push('Reset'); } }, 'Reset'),
		m('button', { onclick: () => { this.isDark=!this.isDark; } }, 'Toggle Theme')
		]);
	},
	oncreate: function() {
		setInterval(() => { let n=this.count+this.step; if(n>this.max)n=0; this.count=n; this.history.push('Auto Increment'); m.redraw(); }, 1000);
	}
};
m.mount(document.body, FullCounter);

Mithril-js Language Guide

Mithril.js is a modern, client-side JavaScript framework for building single-page applications. It is small, fast, and provides a virtual DOM, routing, and XHR utilities, allowing developers to create high-performance, modular web applications.

More Mithril-js Typing Exercises

Practice Other Languages