<todo />

<script type="riot/tag">

  <todo>
    <h1>TODO List</h1>
    <form onsubmit={ createTask }>
      <input type="text" ref="taskName" placeholder="新規タスクを入力">
      <button>追加</button>
    </form>
    <ul>
      <li each={ task, i in tasks }>
        #{ i }: { task }
      </li>
    </ul>

    this.tasks = [];

    createTask(e) {
      e.preventDefault();
      var taskName = this.refs.taskName;
      this.tasks.push(taskName.value);
      taskName.value = '';
    }

    <style>
      :scope {
        display          : block;
        background-color : #fff;
        font-size        : 1.6rem;
      }
      h1 {
        font-size : 1.8rem;
        color     : #666;
        padding   : 10px 10px 0;
      }
      form {
        padding : 10px;
      }
      input[type="text"],
      button {
        vertical-align : middle;
        border-radius  : .5rem;
      }
      input[type="text"] {
        font-size : 1.6rem;
        padding   : .4rem;
        border    : 1px solid #ccc;
      }
      button {
        font-size        : 1.4rem;
        padding          : .6rem 1rem;
        color            : #fff;
        background-color : #333;
      }
      ul {
        height           : 200px;
        padding          : 10px;
        overflow-y       : scroll;
        background-color : #eee;
        box-sizing       : border-box;
      }
      li {
        padding          : 5px 10px;
        border-radius    : .5rem;
        background-color : #fff;
        box-shadow       : 0 1px 0 rgba(0,0,0,.05);
      }
      li:not(:first-child) {
        margin-top : 10px;
      }
    </style>
  </todo>

</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/3.3.1/riot+compiler.min.js"></script>
<script>
  riot.mount('todo');
</script>

html {
  font-size : 62.5%;
}

body {
  font-family      : sans-serif;
  font-size        : 1.4rem;
  line-height      : 1.5;
  color            : #333;
  background-color : #fff;
}

input[type="text"], select, button {
  appearance  : none;
  font-family : inherit;
  font-size   : inherit;
  line-height : inherit;
}

input[type="checkbox"] {
  margin : 0;
}

button {
  border  : none;
  cursor  : pointer;
  outline : none;
}