Files
pyscript/examples/todo.html
Hood Chatham 08f34f748b Apply prettier to css, html, js, md, ts, and yml (#1249)
* Apply prettier to css, js, html, md, ts, and yml

As a followup I will add prettier to the .pre-commit config.
This patch is 100% generated by prettier.
I used a forked version of prettier that understands the
py-script tag.
See https://github.com/hoodmane/pyscript-prettier-precommit
for more info.

* Apply old pre-commit

* Revert some problems

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

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

* Revert some changes

* More changes

* Fix pre-commit

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

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

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
2023-03-06 14:20:21 +00:00

77 lines
2.1 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 = [
"../build/plugins/python/py_tutor.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>