add todo app

fpliger · madhur-tandon · commit 4ac33eca24db · 2023-12-11T00:17:30.000+05:30
diff --git a/todo/assets/css/examples.css b/todo/assets/css/examples.css
@@ -0,0 +1,58 @@
+body {
+    margin: 0;
+}
+
+.pyscript {
+    margin: 0.5rem;
+}
+
+html {
+    font-family:
+        ui-sans-serif,
+        system-ui,
+        -apple-system,
+        BlinkMacSystemFont,
+        "Segoe UI",
+        Roboto,
+        "Helvetica Neue",
+        Arial,
+        "Noto Sans",
+        sans-serif,
+        "Apple Color Emoji",
+        "Segoe UI Emoji",
+        "Segoe UI Symbol",
+        "Noto Color Emoji";
+    line-height: 1.5;
+}
+
+nav {
+    position: sticky;
+    width: 100%;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+}
+
+.logo {
+    padding-right: 10px;
+    font-size: 28px;
+    height: 30px;
+    max-width: inherit;
+}
+
+.title {
+    text-decoration: none;
+    text-decoration-line: none;
+    text-decoration-style: initial;
+    text-decoration-color: initial;
+    font-weight: 400;
+    font-size: 1.5em;
+    line-height: 2em;
+    white-space: nowrap;
+}
+
+.app-header {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem 1rem;
+}
diff --git a/todo/assets/favicon.png b/todo/assets/favicon.png
diff --git a/todo/assets/logo.png b/todo/assets/logo.png
diff --git a/todo/index.html b/todo/index.html
@@ -0,0 +1,67 @@
+<!doctype html>
+
+<html>
+    <head>
+        <!-- Recommended meta tags -->
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width,initial-scale=1.0">
+
+        <!-- PyScript CSS -->
+        <link rel="stylesheet" href="https://pyscript.net/releases/2023.11.2/core.css">
+        <!-- CSS for examples -->
+        <link rel="stylesheet" href="./assets/css/examples.css" />
+
+        <!-- This script tag bootstraps PyScript -->
+        <script type="module" src="https://pyscript.net/releases/2023.11.2/core.js"></script>
+
+        <title>Todo App</title>
+        <link rel="icon" type="image/png" href="./assets/favicon.png" />
+
+        <style>
+            .line-through {
+                text-decoration: line-through;
+            }
+        </style>
+    </head>
+
+    <body>
+        <nav class="navbar" style="background-color: #000000">
+            <div class="app-header">
+                <a href="/">
+                    <img src="./assets/logo.png" class="logo" />
+                </a>
+                <a class="title" href="" style="color: #f0ab3c">Simple Clock</a>
+            </div>
+        </nav>
+
+
+        <section class="pyscript">
+            <main>
+                <section>
+                    <div>
+                        <h1> To Do List </h1>
+                    </div>
+                    <div>
+                        <input id="new-task-content" type="text" />
+                        <button id="new-task-btn" type="submit" py-click="add_task">
+                            Add task
+                        </button>
+                    </div>
+
+                    <py-list id="myList"></py-list>
+                    <div id="list-tasks-container"></div>
+
+                    <template id="task-template">
+                        <section class="task py-li-element">
+                            <label for="flex items-center p-2 ">
+                                <input style="vertical-align: middle;" type="checkbox" />
+                                <p style="display: inline;"></p>
+                            </label>
+                        </section>
+                    </template>
+                </section>
+            </main>
+            <script type="py" src="./main.py" async></script>
+        </section>
+    </body>
+</html>
diff --git a/todo/main.py b/todo/main.py
@@ -0,0 +1,56 @@
+from datetime import datetime as dt
+
+from pyscript import document
+
+tasks = []
+
+
+def q(selector, root=document):
+    return root.querySelector(selector)
+
+
+# define the task template that will be use to render new templates to the page
+task_template = q("#task-template").content.querySelector(".task")
+task_list = q("#list-tasks-container")
+new_task_content = q("#new-task-content")
+
+
+def add_task(e):
+    # ignore empty task
+    if not new_task_content.value:
+        return None
+
+    # create task
+    task_id = f"task-{len(tasks)}"
+    task = {
+        "id": task_id,
+        "content": new_task_content.value,
+        "done": False,
+        "created_at": dt.now(),
+    }
+
+    tasks.append(task)
+
+    # add the task element to the page as new node in the list by cloning from a
+    # template
+    task_html = task_template.cloneNode(True)
+    task_html.id = task_id
+    task_html_check = q("input", root=task_html)
+    task_html_content = q("p", root=task_html)
+    task_html_content.textContent = task["content"]
+    task_list.append(task_html)
+
+    def check_task(evt=None):
+        task["done"] = not task["done"]
+        task_html_content.classList.toggle("line-through", task["done"])
+
+    new_task_content.value = ""
+    task_html_check.onclick = check_task
+
+
+def add_task_event(e):
+    if e.key == "Enter":
+        add_task(e)
+
+
+new_task_content.onkeypress = add_task_event
diff --git a/todo/pyscript.toml b/todo/pyscript.toml
@@ -0,0 +1 @@
+name = "Todo App"
