alihan/pyscript-python-html
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2022-05-01 19:47:48 +03:00
Code Issues Projects Releases Wiki Activity

add example

Browse Source
This commit is contained in:
Fabio Pliger
2022-04-19 19:24:47 -05:00
parent a702cbdf10
commit 280fd53aba
2 changed files with 144 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
pyscriptjs/examples/todo-pylist.html Normal file
View File

@@ -0,0 +1,56 @@
<!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="/build/pyscript.css" />
<script defer src="/build/pyscript.js"></script>
<py-env>
- paths:
- /utils.py
</py-env>
<py-register-widget src="/pylist.py" name="py-list" klass="PyList"></py-widget>
</head>
<body class="container">
<!-- <py-repl id="my-repl" auto-generate="true"> </py-repl> -->
<!-- <py-script src="/todo.py"> </py-script> -->
<main class="max-w-xs mx-auto mt-4">
<section>
<py-list id="mylist"></py-list>
<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="border flex-1 mr-3 border-gray-300 p-2 rounded" type="text" py-mount>
<button id="new-task-btn" class="p-2 text-white bg-blue-600 border border-blue-600 rounded" type="submit" pys-onClick="add_task">
Add task
</button>
</div>
<py-list id="myList"></py-list>
<py-repl id="my-repl" auto-generate="true"> </py-repl>
</div>
<template id="task-template">
<section class="task bg-white my-1">
<label for="flex items-center p-2 ">
<input class="mr-2" type="checkbox" class="task-check">
<p class="m-0 inline"></p>
</label>
</section>
</template>
</section>
</main>
</body>
</html>