lit-html todo list

2019-12-03 12:38 dennis iversen

A very simple TODO list using lit-html:

<body> 
  <div id="todos"></div>
</body>

 <style>

.action-remove {
  cursor: pointer;
  color: red;
}

.action-done {
  cursor: pointer;     
}

.done {
  text-decoration: line-through;
}

</style>
<script type="module">

import {html, render} from 'https://unpkg.com/lit-html?module';

const todos = ['First todo'];

const todoItem = (item, id) => html`
  <li>${item} 
      <span data-id="${id}" class="action-remove" @click=${todoRemove}>Remove</span> 
      <span class="action-done" @click=${todoDone}>Done</span>
  </li>`

const todoList = () => html`
  <ul>${todos.map((item, id) => todoItem(item, id))}</ul>`

const todoMain = () => html`
  <h3>lit-html todo list</h3><input type="text" @keyup=${todoInput} value="">${todoList()}`

const todoRemove = {
  handleEvent(e) {
    let id = e.target.dataset.id;
    todos.splice(id, 1);
    doRender();
  }
}

function doRender () {
  render(todoMain(), document.getElementById('todos'));  
}

const todoDone = {
  handleEvent(e) {
    e.target.parentNode.classList.add('done');
    doRender();
  }
}

const todoInput = {
  handleEvent(e) {
    if (e.keyCode === 13) {
      todos.push(e.target.value)
      doRender();
    }
  }
}

doRender();

</script>

There is a live demo on codepen: https://codepen.io/diversen/pen/abzbGNa

This page has been requested 4210 times