rudifa/index.html

## index.html
<!DOCTYPE html>
<html>
  <body>
    <todo-app></todo-app>

    <script type="module">
      import { LitElement, html } from 'https://unpkg.com/lit-element?module';

      const author = 'open-wc';
      const homepage = 'https://open-wc.org/';
      const footerTemplate = html`
        <footer>Made with love by <a href="${homepage}">${author}</a></footer>
      `;


      class TodoApp extends LitElement {
        static get properties() {
          return {
            todos: { type: Array }
          };
        }
        constructor() {
          super();
          this.todos = [
            { text: 'Do A', finished: true },
            { text: 'Do B', finished: false },
            { text: 'Do C', finished: false },
          ];
        }

        render() {
          return html`
            <h1>Todo app</h1>

            <input id="addTodoInput" placeholder="Name" />
            <button @click=${this._addTodo}>Add</button>

            <ol>
              ${this.todos.map(
                todo => html`
                  <li>${todo.text} (${todo.finished ? 'Finished' : 'Unfinished'})
                  <button @click=${() => this._removeTodo(todo)}>X</button>
                  </li>
                `,
              )}
            </ol>

            ${footerTemplate}
          `;
        }

        _addTodo() {
          const input = this.shadowRoot.getElementById('addTodoInput');
          const text = input.value;
          input.value = '';

          this.todos = [
              ...this.todos,
              { text, finished: false },
            ];
        }

        _removeTodo(todo) {
          this.todos = this.todos.filter(e => e !== todo);
        }
      }

      customElements.define('todo-app', TodoApp);
    </script>


</body>
</html>
	<!DOCTYPE html>
	<html>
	<body>
	<todo-app></todo-app>

	<script type="module">
	import { LitElement, html } from 'https://unpkg.com/lit-element?module';

	const author = 'open-wc';
	const homepage = 'https://open-wc.org/';
	const footerTemplate = html`
	<footer>Made with love by <a href="${homepage}">${author}</a></footer>
	`;


	class TodoApp extends LitElement {
	static get properties() {
	return {
	todos: { type: Array }
	};
	}
	constructor() {
	super();
	this.todos = [
	{ text: 'Do A', finished: true },
	{ text: 'Do B', finished: false },
	{ text: 'Do C', finished: false },
	];
	}

	render() {
	return html`
	<h1>Todo app</h1>

	<input id="addTodoInput" placeholder="Name" />
	<button @click=${this._addTodo}>Add</button>

	<ol>
	${this.todos.map(
	todo => html`
	<li>${todo.text} (${todo.finished ? 'Finished' : 'Unfinished'})
	<button @click=${() => this._removeTodo(todo)}>X</button>
	</li>
	`,
	)}
	</ol>

	${footerTemplate}
	`;
	}

	_addTodo() {
	const input = this.shadowRoot.getElementById('addTodoInput');
	const text = input.value;
	input.value = '';

	this.todos = [
	...this.todos,
	{ text, finished: false },
	];
	}

	_removeTodo(todo) {
	this.todos = this.todos.filter(e => e !== todo);
	}
	}

	customElements.define('todo-app', TodoApp);
	</script>


	</body>
	</html>