<html>
<head>
<script>
function tree(main, second) {
var n = 7;
var m = 3;
var res = "";
for (var i = 1; i <= n; i++) {
for (var j = 0; j < n-i; j++) {
res += second;
}
for (var j = 0; j < i; j++) {
res += main;
}
for (var j = 0; j < i-1; j++) {
res += main;
}
for (var j = 0; j < n-i; j++) {
res += second;
}
res += "<br>";
}
for (var i = 0; i < m; i++) {
for (var j = 0; j <= n-m; j++) {
res += second;
}
for (var j = 0; j < m; j++) {
res += main;
}
for (var j = 0; j <= n-m; j++) {
res += second;
}
res += "<br>";
}
return res;
}
function react() {
var treeEl = window.document.getElementById("tree");
var mainEl = window.document.getElementById("main");
var secondEl = window.document.getElementById("second");
treeEl.innerHTML = tree(mainEl.value, secondEl.value);
}
window.addEventListener("load", react);
window.addEventListener("input", react);
</script>
</head>
<body>
<form>
Main: <input id="main" value=":steamthumbsup:"/>
Second: <input id="second" value=":cozypoechris:"/>
<pre id="tree"/>
</form>
</body>
</html>