Pure Python No JS Only Pyscript 💪🏻
Tags: webdev, programming, python, example
Published: 2022-11-03 15:56:47

Here's an example of a Pyscript implementation that doesn't use JS.
Try it : https://watchakorn-18k.github.io/Pure-Python-Non-Js-With-Pyscript/
<p align="center"><img src="https://media.discordapp.net/attachments/581018943041306641/1037724522859737199/less_js.gif" width=50%>
</p>

## 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.

<b>Using javascript, just import [pyscript](https://pyscript.net/) and [tailwindcss](https://tailwindcss.com/) and [daisyui](https://daisyui.com/)<b/>


### Install
```
git clone https://github.com/watchakorn-18k/Pure-Python-Non-Js-With-Pyscript

cd Pure-Python-Non-Js-With-Pyscript
```


### 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
<p align="center"><img src="https://media.discordapp.net/attachments/581018943041306641/1037749656018489354/image.png" width=40%></p>

[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

<p align="center"><img src="https://media.discordapp.net/attachments/581018943041306641/1037750924371836958/less_js.gif" width=40%></p>

[Clock](https://watchakorn-18k.github.io/Pure-Python-Non-Js-With-Pyscript/components/clock.html) : An example of making a real-time display clock

<p align="center"><img src="https://media.discordapp.net/attachments/581018943041306641/1037751514673991680/less_js.gif" width=40%></p>

[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.

<p align="center"><img src="https://media.discordapp.net/attachments/581018943041306641/1037752869597753455/less_js.gif" width=40%></p>

[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.

<p align="center"><img src="https://media.discordapp.net/attachments/581018943041306641/1037809745500831824/less_js.gif?width=350&height=658" width=40%></p>

[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)


SOURCE : https://github.com/watchakorn-18k/Pure-Python-Non-Js-With-Pyscript