I frequently want a simple single-file html page that generates some text dynamically based on some inputs at the top of the page. This can be done in react etc of course, but sometimes my usecase is so simple that it’s an overkill.
For example, to generate some template code based on a few input parameters. Or to make some calculations based on inputs, or to make a customizable story, etc.
With this in mind, I produced the following minimal HTML, using the handlebars processor, that lets me do exactly this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Welcome</title>
<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script id="result-template" type="text/x-handlebars-template">
Hello {{name}}! You are {{age}} years old. {{#xif "this.age > 18"}} That's really old! {{else}} So young! {{/xif}}
Put the rest of your page here.
</script>
</head>
<body>
<h2>What is your name?</h2>
Name: <input type="text" id="name" value="Bob"/>
Age: <input type="number" id="age" value=32 min=0 ><p/><p/>
<div id="resultDiv"></div>
<script>
var inputs = document.querySelectorAll("input");
function update() {
var params = {};
for (i = 0; i < inputs.length; ++i) {
params[inputs[i].id] = (inputs[i].type === "number")?Number(inputs[i].value):inputs[i].value;
}
document.querySelector("#resultDiv").innerHTML = template(params);
}
document.addEventListener("DOMContentLoaded", function() {
Handlebars.registerHelper("xif", function (expression, options) {
return Handlebars.helpers["x"].apply(this, [expression, options]) ? options.fn(this) : options.inverse(this);
});
Handlebars.registerHelper("x", function (expression, options) {
try { return Function.apply(this, ["window", "return " + expression + " ;"]).call(this, window); } catch (e) { console.warn("{{x " + expression + "}} error: ", e); }
});
var source = document.querySelector("#result-template").innerHTML;
template = Handlebars.compile(source);
for (i = 0; i < inputs.length; ++i) {
// Use 'input' to update as the user types, or 'change' on loss of focus
inputs[i].addEventListener("input", update);
}
update();
});
</script>
</body>
</html>
Which produces a result like:
Single-page HTML that changes the page on user input
John Tapsell 