lit-html todo list

A very simple TODO list using lit-html:

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

 <style>

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


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

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

var todos = ['First todo'];

const todoItem = (item, id) => html`<li>${item} <span class="remove" @click=${todoRemove}>Remove</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) {
    e.target.parentNode.remove()
  }
}

const todoInput = {
  handleEvent(e) {
    if (e.keyCode === 13) {
      todos.push(e.target.value)
      e.target.value = ''
      render(todoMain(), document.getElementById('todos'));
    }
  }
}

render(todoMain(), document.getElementById('todos'));

</script>

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


This page has been viewed 23 times. First hit: 03-Dec-2019 11:40:35
Share email, Google+, Twitter, Facebook.
comments powered by Disqus
Table