Level: beginner • Mithril.js Version: latest
This is the 7GUIs counter example implemented in Mithril.js. The challenge here is to understand the basic ideas of a language/toolkit.
The task is to build a frame containing a label or read-only textfield T and a button B. Initially, the value in T is “0” and each click of B increases the value in T by one.
See the original description at the 7GUIs homepage: https://eugenkiss.github.io/7guis/tasks#counter.
| Type | Name | URL |
|---|---|---|
| script | mithril@latest | https://unpkg.com/mithril@latest |
Mithril.js by Exampleslet root = document.body
let count = 0
let Counter = {
view: function() {
return m("main", [
m("input[readonly=true]", {
value: count
}),
m("button", {
onclick: function() {count++}
}, "Count")
])
}
}
m.mount(root, Counter)
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Counter</title>
</head>
<body>
</body>
</html>
The snippet is using the most current version of Mithril.js framework. It is aimed at beginners and shows some basic recipes.
In addition to the Mithril.js hyperscript function m(), here we can see an example of Mithril.js' m.mount API method.
The example was contributed by narayand16 and last modified on 18 October 2021. Click here to see another example contributed by the author.
If anyone has some improvements, that should be addressed, let me know by opening an issue. Or simply fork the repository on GitHub, push your commits and send a pull request. For starting your work, you can click the edit link below. Thanks for contributing.