{"id":19775454,"url":"https://github.com/watchakorn-18k/pure-python-non-js-with-pyscript","last_synced_at":"2026-04-30T16:32:40.419Z","repository":{"id":131108994,"uuid":"558030632","full_name":"watchakorn-18k/Pure-Python-Non-Js-With-Pyscript","owner":"watchakorn-18k","description":"Python scripts for 🤩 automation and 🤔 problem-solving. 🐍 No JS, just pure Python!","archived":false,"fork":false,"pushed_at":"2022-11-03T19:32:42.000Z","size":347,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-13T09:06:05.828Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://watchakorn-18k.github.io/Pure-Python-Non-Js-With-Pyscript/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/watchakorn-18k.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-10-26T19:07:46.000Z","updated_at":"2023-01-12T20:52:40.000Z","dependencies_parsed_at":null,"dependency_job_id":"b31d2a7c-5924-468d-b865-78f81b09a6d8","html_url":"https://github.com/watchakorn-18k/Pure-Python-Non-Js-With-Pyscript","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/watchakorn-18k/Pure-Python-Non-Js-With-Pyscript","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/watchakorn-18k%2FPure-Python-Non-Js-With-Pyscript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/watchakorn-18k%2FPure-Python-Non-Js-With-Pyscript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/watchakorn-18k%2FPure-Python-Non-Js-With-Pyscript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/watchakorn-18k%2FPure-Python-Non-Js-With-Pyscript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/watchakorn-18k","download_url":"https://codeload.github.com/watchakorn-18k/Pure-Python-Non-Js-With-Pyscript/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/watchakorn-18k%2FPure-Python-Non-Js-With-Pyscript/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265445340,"owners_count":23766449,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-11-12T05:16:12.681Z","updated_at":"2026-04-30T16:32:35.387Z","avatar_url":"https://github.com/watchakorn-18k.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"https://media.discordapp.net/attachments/581018943041306641/1037724522859737199/less_js.gif\" width=50%\u003e\n\u003c/p\u003e\n\n# Pure Python Non Js With Pyscript\nWe 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.\n\n\u003cb\u003eUsing javascript, just import [pyscript](https://pyscript.net/) and [tailwindcss](https://tailwindcss.com/) and [daisyui](https://daisyui.com/)\u003cb/\u003e\n\n\n# Install\n```\ngit clone https://github.com/watchakorn-18k/Pure-Python-Non-Js-With-Pyscript\n\ncd Pure-Python-Non-Js-With-Pyscript\n```\n\n# Example \nFile `index.html`\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead id=\"header\"\u003e\n    \u003cpy-config src=\"../config.toml\"\u003e\u003c/py-config\u003e\n    \u003cpy-env\u003e\n        - paths:\n            - layouts.py\n    \u003c/py-env\u003e\n    \u003clink href=\"https://cdn.jsdelivr.net/npm/daisyui@2.33.0/dist/full.css\" rel=\"stylesheet\" type=\"text/css\" /\u003e\n    \u003clink rel=\"stylesheet\" href=\"../css/pyscript.css\"\u003e\n    \u003cpy-script src=\"./index.py\"\u003e \u003c/py-script\u003e\n\u003c/head\u003e\n\u003cscript src=\"../js/pyscript.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.tailwindcss.com\"\u003e\u003c/script\u003e\n\u003cbody\u003e\n  \u003cdiv id=\"main\" class=\"drawer\"\u003e\n    \u003cdiv class=\"drawer-side\" id=\"start-slide\"\u003e\n      \u003clabel for=\"my-drawer-3\" class=\"drawer-overlay\"\u003e\u003c/label\u003e \n      \u003cul class=\"menu p-4 overflow-y-auto w-80 bg-base-100\" id=\"menu_all\"\u003e\n        \u003c!-- Sidebar content here --\u003e\n      \u003c/ul\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nFile `index.py`\n```python\nimport js\nfrom layouts import *\n\nheader()\nmenu()\n\njs.document.getElementById('start-slide').insertAdjacentHTML('beforebegin',\"\"\"\n  \u003cinput id=\"my-drawer-3\" type=\"checkbox\" class=\"drawer-toggle\" /\u003e \n  \u003cdiv class=\"drawer-content flex flex-col\"\u003e\n    \u003c!-- Navbar --\u003e\n    \u003cdiv class=\"w-full navbar bg-base-300\"\u003e\n      \u003cdiv class=\"flex-none\"\u003e\n        \u003clabel for=\"my-drawer-3\" class=\"btn btn-square btn-ghost\"\u003e\n          \u003csvg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" class=\"inline-block w-6 h-6 stroke-current\"\u003e\u003cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16M4 18h16\"\u003e\u003c/path\u003e\u003c/svg\u003e\n        \u003c/label\u003e\n      \u003c/div\u003e \n      \u003cdiv class=\"flex-1 px-2 mx-2\"\u003e\u003ca href=\"index.html\"\u003ePURE PYTHON NON JS 💪🏻\u003c/a\u003e\u003c/div\u003e\n      \u003cdiv class=\"flex-none hidden lg:block\"\u003e\n        \u003cul class=\"menu menu-horizontal\"\u003e\n          \u003c!-- Navbar menu content here --\u003e\n        \u003c/ul\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n    \u003c!-- Page content here --\u003e\n    \u003cdiv class=\"hero\"\u003e\n      \u003cdiv class=\"hero-content text-center\"\u003e\n        \u003cdiv class=\"max-w-md\"\u003e\n          \u003cdiv class=\"avatar online\"\u003e\n              \u003cdiv class=\"w-24 rounded-full\"\u003e\n                \u003cimg src=\"https://avatars.githubusercontent.com/u/74919942?v=4\" /\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n          \u003ch1 class=\"text-5xl font-bold\"\u003eHello there\u003c/h1\u003e\n          \u003cp class=\"py-6\"\u003eMy name is WK-18k and here is an example building a web app that doesn't use JS but is powered by Pyscript.\u003c/p\u003e\n          \u003cbutton class=\"btn btn-primary\"\u003e\u003ca href=\"https://github.com/watchakorn-18k/Pure-Python-Non-Js-With-Pyscript\"\u003eSource Code\u003c/a\u003e\u003c/button\u003e\n          \u003cbr\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n  \u003c/div\u003e\n  \u003c/div\u003e \n\"\"\")\n\n```\n\nFile `layouts.py`\n```python\nimport js\nimport pyodide\n\n\nmenu_all = js.document.getElementById(\"menu_all\")\ndef menu():\n    menu_all.innerHTML += \"\u003cli class='menu-title'\u003e\u003cspan\u003eExample List\u003c/span\u003e\u003c/li\u003e\"\n    menu_all.innerHTML += \"\u003cli\u003e\u003ca href='input_app.html'\u003eInput App\u003c/a\u003e\u003c/li\u003e\"\n    menu_all.innerHTML += \"\u003cli\u003e\u003ca href='clock.html'\u003eClock\u003c/a\u003e\u003c/li\u003e\"\n    menu_all.innerHTML += \"\u003cli\u003e\u003ca href='binance_price.html'\u003eBinance Price\u003c/a\u003e\u003c/li\u003e\"\n    menu_all.innerHTML += \"\u003cli\u003e\u003ca href='ascii.html'\u003eASCII\u003c/a\u003e\u003c/li\u003e\"\n\n\ndef header():\n    js.document.getElementById(\"header\").innerHTML += \"\"\"\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003ctitle id=\"set_title\"\u003ePURE PYTHON NON JS\u003c/title\u003e\n    \u003clink rel=\"shortcut icon\" href=\"../icon.png\" type=\"image/x-icon\"\u003e\n    \"\"\"\n```\n\n\n# Run\n- Open File `index.html` or [Open Link](https://watchakorn-18k.github.io/Pure-Python-Non-Js-With-Pyscript/)\n\n# Tree File\n```\n│   config.toml\n│   icon.png\n│   index.html\n│   README.md\n│   \n├───.vscode\n│       settings.json\n│       \n├───components\n│       ascii.html\n│       ascii.py\n│       binance_price.html\n│       binance_price.py\n│       clock.html\n│       clock.py\n│       index.html\n│       index.py\n│       input_app.html\n│       input_app.py\n│       layouts.py\n│\n├───css\n│       pyscript.css\n│\n└───js\n        pyscript.js\n\n```\n\n# Example List\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://media.discordapp.net/attachments/581018943041306641/1037749656018489354/image.png\" width=40%\u003e\u003c/p\u003e\n\n[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\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://media.discordapp.net/attachments/581018943041306641/1037750924371836958/less_js.gif\" width=40%\u003e\u003c/p\u003e\n\n[Clock](https://watchakorn-18k.github.io/Pure-Python-Non-Js-With-Pyscript/components/clock.html) : An example of making a real-time display clock\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://media.discordapp.net/attachments/581018943041306641/1037751514673991680/less_js.gif\" width=40%\u003e\u003c/p\u003e\n\n[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.\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://media.discordapp.net/attachments/581018943041306641/1037752869597753455/less_js.gif\" width=40%\u003e\u003c/p\u003e\n\n[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.\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://media.discordapp.net/attachments/581018943041306641/1037809745500831824/less_js.gif?width=350\u0026height=658\" width=40%\u003e\u003c/p\u003e\n\n[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)\n\n\n# Contributing\nPull 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.\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwatchakorn-18k%2Fpure-python-non-js-with-pyscript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwatchakorn-18k%2Fpure-python-non-js-with-pyscript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwatchakorn-18k%2Fpure-python-non-js-with-pyscript/lists"}