Glasspane — Test Harness

HTML

CSS

<div id="app">
  <h1>Todo App</h1>
  <input id="todo-input" type="text" placeholder="Add todo..." />
  <button onclick="addTodo()">Add</button>
  <ul id="todo-list"></ul>
</div>
<style>
  body { font-family: sans-serif; margin: 20px; color: #333; }
  h1 { color: #1a73e8; margin-bottom: 12px; }
  #app { max-width: 400px; }
  input { padding: 8px; font-size: 14px; border: 1px solid #ccc; border-radius: 4px; }
  button { padding: 8px 16px; background: #1a73e8; color: white; border: none; border-radius: 4px; cursor: pointer; }
  ul { list-style: none; padding: 0; margin-top: 12px; }
  li { padding: 8px; border-bottom: 1px solid #eee; }
</style>
<script>
var todoItems = ['Buy groceries', 'Walk the dog', 'Write some Rust', 'Deploy to Dokku', 'Fix hit testing'];
var todoIndex = 0;
function addTodo() {
  const list = document.getElementById('todo-list');
  const li = document.createElement('li');
  li.textContent = todoItems[todoIndex % todoItems.length];
  todoIndex++;
  list.appendChild(li);
}
</script>

DOM Tree Toggle JSON

No content rendered yet.

Console Clear