herber/index.html

## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Bel Test</title>
</head>
<body>
  <div id="__root"></div>
  <br><br>
  <input type="text" id="text"/><button id="add">Add</button>
</body>
</html>

## todo.js
const bel = require('bel');

let state = [];

const list = items => (
  bel`<ul>
    ${items.map(function(item, i) {
      return bel`<li>${item}</li>`;
    })}
  </ul>`
);

const render = () => {
  const l = list(state);
  while (document.getElementById('__root').firstChild) {
    document.getElementById('__root').firstChild.remove();
  }
  document.getElementById('__root').appendChild(l);
};

document.getElementById('add').addEventListener('click', () => {
  state.push(document.getElementById('text').value);
  render();
});
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Bel Test</title>
	</head>
	<body>
	<div id="__root"></div>
	<br><br>
	<input type="text" id="text"/><button id="add">Add</button>
	</body>
	</html>
	const bel = require('bel');

	let state = [];

	const list = items => (
	bel`<ul>
	${items.map(function(item, i) {
	return bel`<li>${item}</li>`;
	})}
	</ul>`
	);

	const render = () => {
	const l = list(state);
	while (document.getElementById('__root').firstChild) {
	document.getElementById('__root').firstChild.remove();
	}
	document.getElementById('__root').appendChild(l);
	};

	document.getElementById('add').addEventListener('click', () => {
	state.push(document.getElementById('text').value);
	render();
	});