Styleguide - ProjectEvergreen/create-evergreen-app GitHub Wiki

import { html, render } from 'lit-html';
import css from './todo-list.css';

class TodoList extends HTMLElement {
  
  constructor() {
    super();

    // our todos "list" property
    this.todos = [];

    // setup Shadow DOM
    this.root = this.attachShadow({ mode: 'closed' });
    
    // render the result of this.template() to this.root
    render(this.template(), this.root);
  }

  addTodo() {
    // notice we can access elements within the Shadom DOM using standard browser APIs
    const inputElement = this.root.getElementById('todo-input');

    if (inputElement.value && inputElement.value !== '') {
      this.todos.push({
        completed: false,
        task: newTodoValue,
        id: new Date().getTime(),
        createdTime: new Date().getTime()
      });

      // reset the value of our <input> element and then re-render the element
      inputElement.value = '';
      render(this.template(), this.root);
    } else {
      console.warn('invalid input, please try again');
    }
  }

  renderTodoListItems() {
    return this.todos.map((todo) => {
      return html`
        <li>
          ${todo.task}<span class="delete-todo">X</span>
        </li>
      `;
    });
  }

  template() {
    return html`
      <style>
        ${css}
      </style>
      
      <div>
        <h3><u>My Todo List 📝</u></h3>

        <input id="todo-input" type="text" placeholder="Food Shopping" required/>
        <button id="add-todo" onclick=${ this.addTodo.bind(this) }>+ Add</button>

        <ol>
          ${ this.renderTodoListItems() }
        </ol>
    
      </div>
    `;
  }
}

customElements.define('todo-list', TodoList);

// TodoList component
constructor() {
  super();

  this.todos = [];
  this.root = this.attachShadow({ mode: 'closed' });

  document.addEventListener('deleteTodo', (event) => this.deleteTodo(event.detail));
  document.addEventListener('completeTodo', (event) => this.completeTodo(event.detail));

  render(this.template(), this.root);
}

// TodoListItem component
class TodoListItem extends HTMLElement {
  constructor() {
    super();
    
    this._todo = {};
    this.root = this.attachShadow({ mode: 'closed' });

    render(this.template(), this.root);
  }

  /* code */
  
  dispatchCompleteTodoEvent() {
    const event = new CustomEvent('completeTodo', { detail: this._todo.id });

    document.dispatchEvent(event);
  }

  dispatchDeleteTodoEvent() {
    const event = new CustomEvent('deleteTodo', { detail: this._todo.id });

    document.dispatchEvent(event);
  }

  template() {
    const isCompleted = this._todo.completed;
    const completionStatus = isCompleted ? '✅' : '⛔';

    return html` 
      <style>
        ${css}
      </style>

      <span>
        ${this._todo.task}

        <input class="complete-todo" type="checkbox" checked=${isCompleted} onchange=${ this.dispatchCompleteTodoEvent.bind(this) }/>
        <span>${ completionStatus }</span>
            
        <span class="delete-todo" onclick=${ this.dispatchDeleteTodoEvent.bind(this) }>❌</span>
      </span>
    `;
  }
}