Tutorial 3

Behavior Graph Tutorial 3

by slevin11

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css" />
    <script type="module" src="app.js"></script>
    <title>Behavior Graph Tutorial 3</title>
  </head>

  <body>

    <div class="list-container">
      <div class="title">
        Todo List
      </div>

      <div class="list-header">
        <span id="action">Add</span> Item: <input id="new-item-text" type="text" />
        <button id="save">Save</button>
      </div>
      <ul id="list">
      </ul>
      <div class="list-footer">
        <div>Remaining items: <span id="remaining-count"></span></div>
      </div>
      <div id="templates" style="display:none;">
        <li class="list-item"><input class="completed-checkbox" type="checkbox" />
          <div class="item-text"></div><button class="item-delete">Delete</button>
        </li>
      </div>

    </div>

  </body>

</html>

CSS

.list-container {
  border: 2px solid #333;
  width: 400px;
  padding: 30px;
  font: 1em sans-serif;
}

.list-header {
  background-color: #eee;
  border: 1px solid #ccc;
  padding: 4px;
}

.list-footer {
  background-color: #eee;
  border: 1px solid #ccc;
  padding: 4px;
  margin-bottom: 10px;
}

.list-item {
  margin-bottom: 8px;
  padding: 4px;
}

.item-text {
  width: 200px;
  display: inline-block;
  margin-left: 4px;
}

.title {
  text-decoration: underline;
  margin-bottom: 10px;
}

.list-item.completed .item-text {
  text-decoration: line-through;
  color: gray;
}

.list-item.selected {
  background-color: lightgreen;
}

JavaScript

import * as bg from "https://cdn.skypack.dev/behavior-graph";

class ListExtent extends bg.Extent {
  constructor(graph) {
    super(graph);

  }
}

let graph = new bg.Graph();
let list = new ListExtent(graph);
list.addToGraphWithAction();