multiple-programs.html - Pytml - Pytml is a 15KB lightweight PyScript alternative

multiple-programs.html (1029B)
      1 <!DOCTYPE html>
      2 <html lang="en">
      3 <head>
      4   <meta charset="utf-8">
      5   <meta name="viewport" content="width=device-width, initial-scale=1">
      6   <title>Pytml Multiple Programs</title>
      7   <script src="https://pytml.vercel.app/pytml.js"></script>
      8   <style>
      9     body { font-family: system-ui; max-width: 620px; margin: 30px auto; padding: 20px; }
     10     button { padding: 11px 16px; margin: 4px; cursor: pointer; }
     11     #output { font-size: 24px; }
     12   </style>
     13 </head>
     14 <body>
     15 <h1>Multiple Pytml programs</h1>
     16 <p id="output">count = 0</p>
     17 
     18 <py1>
     19 count = 0
     20 
     21 <btn1>Add</btn1>
     22 <btn2>Reset</btn2>
     23 
     24 
     25 def add_one(event):
     26     global count
     27     count += 1
     28     output.text = f"count = {count}"
     29 
     30 
     31 def reset(event):
     32     global count
     33     count = 0
     34     output.text = "count = 0"
     35 
     36 
     37 btn1.on("click", add_one)
     38 btn2.on("click", reset)
     39 </py1>
     40 
     41 <py2>
     42 program_two_message = "py2 also runs in the same interpreter"
     43 </py2>
     44 
     45 <p id="py2_result"></p>
     46 
     47 <py2>
     48 py2_result.text = program_two_message
     49 </py2>
     50 
     51 <p><a href="../demo.html">← Back to demos</a></p>
     52 </body>
     53 </html>