1. Home
  2. /
  3. Mithril-js
  4. /
  5. Mithril Counter with History

Mithril Counter with History - Mithril-js Typing CST Test

Loading…

Mithril Counter with History — Mithril-js Code

Tracks increment/decrement history.

var HistoryCounter = {
	count: 0,
	history: [],
	view: function() {
		return m('div', [
		m('h2', 'Counter: ' + this.count),
		m('div', 'History: ' + this.history.join(', ')),
		m('button', { onclick: () => { this.count++; this.history.push('Increment'); } }, '+'),
		m('button', { onclick: () => { this.count--; this.history.push('Decrement'); } }, '-'),
		m('button', { onclick: () => { this.count=0; this.history.push('Reset'); } }, 'Reset')
		]);
	}
};
m.mount(document.body, HistoryCounter);

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.

Primary Use Cases

  • ▸Single-page applications
  • ▸Modular web components
  • ▸High-performance dashboards
  • ▸Small-to-medium web apps
  • ▸Rapid prototyping with minimal boilerplate

Notable Features

  • ▸Virtual DOM for efficient rendering
  • ▸Component-based architecture
  • ▸Built-in routing
  • ▸XHR utility for AJAX requests
  • ▸Lightweight (~8 KB gzipped)

Origin & Creator

Created by Leo Horie and first released in 2011.

Industrial Note

Mithril is ideal for performance-critical SPAs, modular component-based apps, and projects where minimal dependencies and high efficiency are essential.

More Mithril-js Typing Exercises

Mithril Counter ComponentMithril Counter with Step IncrementMithril Counter with Max LimitMithril Counter with Auto-ResetMithril Counter with Dark Mode OnlyMithril Counter with Auto-IncrementMithril Counter with Conditional ThemeMithril Full Featured Counter

Practice Other Languages

CReactPythonC++RustTypeScriptKotlinPHPJavaC#RubyMqlCqlN1qlCypher