t4t5

#todo-app {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 60px auto;
  max-width: 320px;
  padding: 38px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.8);
  box-shadow:
    /* The top layer shadow */
    0px 1px 2px rgba(0, 0, 0, 0.18),

t4t5

// src/ui/components/todo-list/component.ts

import Component, { tracked } from "@glimmer/component";

export default class TodoList extends Component {

  @tracked newItemText = '';

  @tracked items = [
    {

t4t5

{{! src/ui/components/todo-list/template.hbs }}

<div id="todo-app">

  <ul>
    {{#each items key="@index" as |item|}}
      <todo-item
        @item={{item}}
        @deleteItem={{action deleteItem}}
        @toggleItem={{action toggleItem}}

t4t5

// src/ui/components/todo-item/component.ts

import Component from '@glimmer/component';

export default class TodoItem extends Component {

  delete() {
    let item = this.args.item;
    this.args.deleteItem(item);
  }

t4t5

{{! src/ui/components/todo-item/template.hbs }}

<li>
  <p 
    data-checked={{@item.isDone}}
    onclick={{action @toggleItem @item}}
  >
    {{@item.text}}
  </p>

t4t5

// src/ui/components/todo-list/component.ts

import Component, { tracked } from "@glimmer/component";

export default class TodoList extends Component {

  @tracked newItemText = '';

  @tracked items = [
    {

t4t5

{{! src/ui/components/todo-list/template.hbs }}

<div id="todo-app">

  <ul>
    {{#each items key="@index" as |item|}}
      <todo-item
        @item={{item}}
      />
    {{/each}}

t4t5

{{! src/ui/components/todo-item/template.hbs }}

<li>
  <p>
    {{@item.text}}
  </p>

  <button>
    Delete item
  </button>

t4t5

{{! src/ui/components/todo-list/template.hbs }}

<div id="todo-app">

  <ul>
    {{#each items key="@index" as |item|}}
      <li>
        {{item.text}}
      </li>
    {{/each}}

t4t5

// src/ui/components/todo-list/component.ts

import Component from "@glimmer/component";

export default class TodoList extends Component {

  items = [
    {
      text: "Install Glimmer",
      isDone: false,