counter.html - Pytml - Pytml is a 15KB lightweight PyScript alternative

counter.html (1014B)
      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.0">
      6   <title>Pytml Counter</title>
      7   <script src="https://pytml.vercel.app/pytml.js"></script>
      8   <style>
      9     body { font-family: system-ui; padding: 30px; max-width: 520px; margin: auto; }
     10     button { padding: 12px 18px; margin: 4px; cursor: pointer; }
     11     #count { font-size: 48px; margin: 20px 0; }
     12   </style>
     13 </head>
     14 <body>
     15 <h1>Counter</h1>
     16 <div id="count">0</div>
     17 
     18 <py1>
     19 
     20 count = 0
     21 
     22 <btn1>+1</btn1>
     23 <btn2>-1</btn2>
     24 <btn3>Reset</btn3>
     25 
     26 
     27 def increase(e):
     28     global count
     29     count += 1
     30     count_element.text = str(count)
     31 
     32 
     33 def decrease(e):
     34     global count
     35     count -= 1
     36     count_element.text = str(count)
     37 
     38 
     39 def reset(e):
     40     global count
     41     count = 0
     42     count_element.text = "0"
     43 
     44 
     45 count_element = elements["count"]
     46 btn1.on("click", increase)
     47 btn2.on("click", decrease)
     48 btn3.on("click", reset)
     49 
     50 </py1>
     51 
     52 <p><a href="../demo.html">← Back to demos</a></p>
     53 </body>
     54 </html>