Level: beginner • Mithril.js Version: latest
This is the 7GUIs temperature converter example implemented in Mithril.js. The challenges here are bidirectional data flow and user-provided text input.
The task is to build a frame containing two textfields TC and TF representing the temperature in Celsius and Fahrenheit, respectively. Initially, both TC and TF are empty. When the user enters a numerical value into TC the corresponding value in TF is automatically updated and vice versa. When the user enters a non-numerical string into TC the value in TF is not updated and vice versa. The formula for converting a temperature C in Celsius into a temperature F in Fahrenheit is C = (F - 32) * (5/9) and the dual direction is F = C * (9/5) + 32.
See the original description at the 7GUIs homepage: https://eugenkiss.github.io/7guis/tasks#temp.
| Type | Name | URL |
|---|---|---|
| script | mithril@latest | https://unpkg.com/mithril@latest |
Mithril.js by Exampleslet root = document.body
let tempInCelsius
let tempInFahrenheit
let temperatureConverter = {
view: function() {
return m("main", [
m("input.input[type=text]", {
oninput: function(e) {
tempInCelsius = getParsedInput(e.target.value);
tempInFahrenheit = tempInCelsius ? ((tempInCelsius * (9/5) + 32).toFixed(1)) : undefined;
},
value: tempInCelsius
}),
m("label.label", " Celsius = "),
m("input.input[type=text]", {
oninput: function(e) {
tempInFahrenheit = getParsedInput(e.target.value);
tempInCelsius = tempInFahrenheit ? (((tempInFahrenheit - 32) * (5/9)).toFixed(1)) : undefined;
},
value: tempInFahrenheit
}),
m("label.label", " Farenheit")
])
}
}
function getParsedInput(input) {
if(input && input.trim().length > 0) {
return isNaN(input) ? null : input;
}
}
m.mount(root, temperatureConverter)
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Temperature Converter</title>
</head>
<body>
</body>
</html>
The snippet requires the latest version of Mithril.js framework. It is ideal for beginners showing some basic recipes.
In this example we can see an example of Mithril.js' m.mount API method, besides it core m() hyperscript function.
The code sample was authored by narayand16. It was last modified on 18 October 2021. Do you want to see another one written by narayand16? Then Click here.
Do you see some improvements, that could be addressed here? Then let me know by opening an issue. As an alternative, you can fork the repository on GitHub, push your commits and send a pull request. To start your work, click on the edit link below. Thank you for contributing to this repo.