We make an effort to build an app website without JS, to say the least. But actually we just change the format to use. The modules available in pyodide are based on JS commands on python.
Using javascript, just import pyscript and tailwindcss and daisyui
git clone https://github.com/watchakorn-18k/Pure-Python-Non-Js-With-Pyscript
cd Pure-Python-Non-Js-With-Pyscript
File index.html
<!DOCTYPE html>
<html lang="en">
<head id="header">
<py-config src="../config.toml"></py-config>
<py-env>
- paths:
- layouts.py
</py-env>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../css/pyscript.css">
<py-script src="./index.py"> </py-script>
</head>
<script src="../js/pyscript.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<body>
<div id="main" class="drawer">
<div class="drawer-side" id="start-slide">
<label for="my-drawer-3" class="drawer-overlay"></label>
<ul class="menu p-4 overflow-y-auto w-80 bg-base-100" id="menu_all">
<!-- Sidebar content here -->
</ul>
</div>
</div>
</body>
</html>File index.py
import js
from layouts import *
header()
menu()
js.document.getElementById('start-slide').insertAdjacentHTML('beforebegin',"""
<input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
<div class="drawer-content flex flex-col">
<!-- Navbar -->
<div class="w-full navbar bg-base-300">
<div class="flex-none">
<label for="my-drawer-3" class="btn btn-square btn-ghost">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-6 h-6 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
</label>
</div>
<div class="flex-1 px-2 mx-2"><a href="index.html">PURE PYTHON NON JS πͺπ»</a></div>
<div class="flex-none hidden lg:block">
<ul class="menu menu-horizontal">
<!-- Navbar menu content here -->
</ul>
</div>
</div>
<!-- Page content here -->
<div class="hero">
<div class="hero-content text-center">
<div class="max-w-md">
<div class="avatar online">
<div class="w-24 rounded-full">
<img src="https://avatars.githubusercontent.com/u/74919942?v=4" />
</div>
</div>
<h1 class="text-5xl font-bold">Hello there</h1>
<p class="py-6">My name is WK-18k and here is an example building a web app that doesn't use JS but is powered by Pyscript.</p>
<button class="btn btn-primary"><a href="https://github.com/watchakorn-18k/Pure-Python-Non-Js-With-Pyscript">Source Code</a></button>
<br>
</div>
</div>
</div>
</div>
""")File layouts.py
import js
import pyodide
menu_all = js.document.getElementById("menu_all")
def menu():
menu_all.innerHTML += "<li class='menu-title'><span>Example List</span></li>"
menu_all.innerHTML += "<li><a href='input_app.html'>Input App</a></li>"
menu_all.innerHTML += "<li><a href='clock.html'>Clock</a></li>"
menu_all.innerHTML += "<li><a href='binance_price.html'>Binance Price</a></li>"
menu_all.innerHTML += "<li><a href='ascii.html'>ASCII</a></li>"
def header():
js.document.getElementById("header").innerHTML += """
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title id="set_title">PURE PYTHON NON JS</title>
<link rel="shortcut icon" href="../icon.png" type="image/x-icon">
"""- Open File
index.htmlor Open Link
β config.toml
β icon.png
β index.html
β README.md
β
ββββ.vscode
β settings.json
β
ββββcomponents
β ascii.html
β ascii.py
β binance_price.html
β binance_price.py
β clock.html
β clock.py
β index.html
β index.py
β input_app.html
β input_app.py
β layouts.py
β
ββββcss
β pyscript.css
β
ββββjs
pyscript.js
Input App : Example of creating a form to receive data from the client
Clock : An example of making a real-time display clock
Binance Price : This is an example of retrieving data with an API without using JavaScript.
ASCII : An example of an ASCII transformation that uses Python's built-in function chr() with ord() to demonstrate Python's capabilities.
Falling Snow : An example of creating snow falling from the sky using basic python, either map() or using dict instead of array in JS by reference from PasaComputer - Falling Snow | JavaScript 21 Days Challenge EP. 1 | ΰΈͺΰΈΰΈ JavaScript ΰΉΰΈ£ΰΈ΅ΰΈ’ΰΈΰΈ£ΰΈΉΰΉΰΈΰΈ²ΰΈΰΈΰΈ²ΰΈ£ΰΈ₯ΰΈΰΈ‘ΰΈ·ΰΈΰΈΰΈ³
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. Please make sure to update tests as appropriate.