Files
pyscript/examples/todo.html
Madhur Tandon b247864414 remove PyWidget and py-register-widget + refactor PyList as a Python Plugin (#1452)
* remove PyWidget and py-register-widget

* refactor py-list as Plugin

* add newline

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* fix eslint

* handle case if src not supplied

* move inside if

* - Remove src attribute for py-list
- Re-implement as a Python plugin
- Remove pylist.py from examples directory
- Remove PyListPlugin as one of the default ones

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* move PyItem and PyList classes to the plugin

* clean up PyListTemplate and PyItemTemplate from pyscript module

* fix linting

* use PyList instead of PyListTemplate instead

* fix example for todo-pylist

* re-enable and improve test

* move py-list plugin to examples

* fix py-list plugin link

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
2023-05-10 20:17:07 +05:30

85 lines
2.9 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Todo App</title>
<link rel="icon" type="image/png" href="favicon.png" />
<link
rel="stylesheet"
href="https://pyscript.net/latest/pyscript.css"
/>
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
<link rel="stylesheet" href="./assets/css/examples.css" />
</head>
<body>
<nav class="navbar" style="background-color: #000000">
<div class="app-header">
<a href="/">
<img src="./logo.png" class="logo" />
</a>
<a class="title" href="" style="color: #f0ab3c">Todo App</a>
</div>
</nav>
<section class="pyscript">
<py-tutor modules="./utils.py;./todo.py">
<py-config>
plugins = [
"https://pyscript.net/latest/plugins/python/py_tutor.py",
"./py_list.py"
]
[[fetch]]
files = ["./utils.py", "./todo.py"]
</py-config>
<py-script src="./todo.py"></py-script>
</py-tutor>
<main>
<section>
<div class="text-center w-full mb-8">
<h1
class="text-3xl font-bold text-gray-800 uppercase tracking-tight"
>
To Do List
</h1>
</div>
<div>
<input
id="new-task-content"
class="py-input"
type="text"
/>
<button
id="new-task-btn"
class="py-button"
type="submit"
py-click="add_task()"
>
Add task
</button>
</div>
<py-list id="myList"></py-list>
<div
id="list-tasks-container"
class="flex flex-col-reverse mt-4"
></div>
<template id="task-template">
<section class="task py-li-element">
<label for="flex items-center p-2 ">
<input class="mr-2" type="checkbox" />
<p class="m-0 inline"></p>
</label>
</section>
</template>
</section>
</main>
</section>
</body>
</html>