To Do List

index.html

          
            <py-register-widget src="./pylist.py" name="py-list" klass="PyList"></py-register-widget>

            <py-config>
              [[fetch]]
              files = ["./utils.py"]
            </py-config>

            <py-script>
              from js import document
              from pyodide.ffi.wrappers import add_event_listener

              def add_task(*ags, **kws):
                # create a new dictionary representing the new task
                new_task_content = Element("new-task-content")
                task = { "content": new_task_content.value,  "done": False, "created_at": dt.now() }

                # add a new task to the list and tell it to use the `content` key to show in the UI
                # and to use the key `done` to sync the task status with a checkbox element in the UI
                myList.add(task)

                # clear the inputbox element used to create the new task
                new_task_content.clear()

              def on_click(evt):
                add_task()

              def handle_keypress(evt):
                if evt.key == "Enter":
                  add_task()

              add_event_listener(
                document.getElementById("new-task-content"),
                "keypress",
                handle_keypress
              )
            </py-script>
              <div class="py-box">
                <input id="new-task-content" />
                <button py-click="add_task()" id="new-task-btn" class="py-button">Add Task!</button>
              </div>

              <py-list id="myList"></py-list>
              <py-repl id="my-repl" auto-generate="true"> </py-repl>
          
        

pylist.py

          
            import pyscript
            from datetime import datetime as dt

            class PyItem(pyscript.PyItemTemplate):
                def on_click(self, evt=None):
                    self.data["done"] = not self.data["done"]
                    self.strike(self.data["done"])

                    self.select("input").element.checked = self.data["done"]

            class PyList(pyscript.PyListTemplate):
                item_class = PyItem

                def add(self, item):
                    if isinstance(item, str):
                        item = {"content": item, "done": False, "created_at": dt.now()}

                    super().add(item, labels=["content"], state_key="done")