https://github.com/watchakorn-18k/pure-python-non-js-with-pyscript
Python scripts for 🤩 automation and 🤔 problem-solving. 🐍 No JS, just pure Python!
https://github.com/watchakorn-18k/pure-python-non-js-with-pyscript
hacktoberfest2022 html import-js non-jquery non-js pure-python pure-python-non-js-with-pyscript pyodide pyscript python tailwind-css tailwindcss template-web web web-app
Last synced: 5 months ago
JSON representation
Python scripts for 🤩 automation and 🤔 problem-solving. 🐍 No JS, just pure Python!
- Host: GitHub
- URL: https://github.com/watchakorn-18k/pure-python-non-js-with-pyscript
- Owner: watchakorn-18k
- Created: 2022-10-26T19:07:46.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2022-11-03T19:32:42.000Z (about 3 years ago)
- Last Synced: 2025-06-13T09:06:05.828Z (6 months ago)
- Topics: hacktoberfest2022, html, import-js, non-jquery, non-js, pure-python, pure-python-non-js-with-pyscript, pyodide, pyscript, python, tailwind-css, tailwindcss, template-web, web, web-app
- Language: JavaScript
- Homepage: https://watchakorn-18k.github.io/Pure-Python-Non-Js-With-Pyscript/
- Size: 339 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Pure Python Non Js With Pyscript
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](https://pyscript.net/) and [tailwindcss](https://tailwindcss.com/) and [daisyui](https://daisyui.com/)
# Install
```
git clone https://github.com/watchakorn-18k/Pure-Python-Non-Js-With-Pyscript
cd Pure-Python-Non-Js-With-Pyscript
```
# Example
File `index.html`
```html
- paths:
- layouts.py
```
File `index.py`
```python
import js
from layouts import *
header()
menu()
js.document.getElementById('start-slide').insertAdjacentHTML('beforebegin',"""
Hello there
My name is WK-18k and here is an example building a web app that doesn't use JS but is powered by Pyscript.
Source Code
""")
```
File `layouts.py`
```python
import js
import pyodide
menu_all = js.document.getElementById("menu_all")
def menu():
menu_all.innerHTML += "
menu_all.innerHTML += "
menu_all.innerHTML += "
menu_all.innerHTML += "
menu_all.innerHTML += "
def header():
js.document.getElementById("header").innerHTML += """
PURE PYTHON NON JS
"""
```
# Run
- Open File `index.html` or [Open Link](https://watchakorn-18k.github.io/Pure-Python-Non-Js-With-Pyscript/)
# Tree File
```
│ 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
```
# Example List
[Input App](https://watchakorn-18k.github.io/Pure-Python-Non-Js-With-Pyscript/components/input_app.html) : Example of creating a form to receive data from the client
[Clock](https://watchakorn-18k.github.io/Pure-Python-Non-Js-With-Pyscript/components/clock.html) : An example of making a real-time display clock
[Binance Price](https://watchakorn-18k.github.io/Pure-Python-Non-Js-With-Pyscript/components/binance_price.html) : This is an example of retrieving data with an API without using JavaScript.
[ASCII](https://watchakorn-18k.github.io/Pure-Python-Non-Js-With-Pyscript/components/ascii.html) : An example of an ASCII transformation that uses Python's built-in function `chr()` with `ord()` to demonstrate Python's capabilities.
[Falling Snow](https://watchakorn-18k.github.io/Pure-Python-Non-Js-With-Pyscript/components/falling_snow.html) : 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 เรียนรู้จากการลงมือทำ](https://youtu.be/oKY8tJLA5nU)
# Contributing
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.