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

calculator.html (2275B)
      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 Calculator</title>
      7   <script src="https://pytml.vercel.app/pytml.js"></script>
      8   <style>
      9     body { font-family: system-ui; padding: 20px; max-width: 420px; margin: auto; }
     10     .calculator { max-width: 280px; }
     11     button { width: 52px; height: 52px; margin: 3px; font-size: 18px; cursor: pointer; }
     12     #display { font-size: 28px; padding: 14px; background: #111; color: #fff; max-width: 250px; margin-bottom: 12px; text-align: right; border-radius: 8px; }
     13   </style>
     14 </head>
     15 <body>
     16 
     17 <div class="calculator">
     18   <div id="display">0</div>
     19 
     20   <py1>
     21 
     22 num1 = ""
     23 operator = ""
     24 
     25 <btn1>1</btn1> <btn2>2</btn2> <btn3>3</btn3> <btn4>+</btn4>
     26 <btn5>4</btn5> <btn6>5</btn6> <btn7>6</btn7> <btn8>-</btn8>
     27 <btn9>7</btn9> <btn10>8</btn10> <btn11>9</btn11> <btn12>=</btn12>
     28 <btn13>0</btn13> <btn14>C</btn14>
     29 
     30 
     31 def number(n):
     32     global num1
     33     num1 += str(n)
     34     display.text = num1
     35 
     36 
     37 def set_operator(op):
     38     global num1, operator
     39     if operator != "" or num1 == "":
     40         return
     41     operator = op
     42     num1 += op
     43     display.text = num1
     44 
     45 
     46 def calculate():
     47     global num1, operator
     48     if operator == "":
     49         return
     50     parts = num1.split(operator)
     51     if len(parts) != 2 or parts[0] == "" or parts[1] == "":
     52         return
     53     a = int(parts[0])
     54     b = int(parts[1])
     55     result = a + b if operator == "+" else a - b
     56     display.text = str(result)
     57     num1 = str(result)
     58     operator = ""
     59 
     60 
     61 def clear():
     62     global num1, operator
     63     num1 = ""
     64     operator = ""
     65     display.text = "0"
     66 
     67 
     68 btn1.on("click", lambda e: number(1))
     69 btn2.on("click", lambda e: number(2))
     70 btn3.on("click", lambda e: number(3))
     71 btn5.on("click", lambda e: number(4))
     72 btn6.on("click", lambda e: number(5))
     73 btn7.on("click", lambda e: number(6))
     74 btn9.on("click", lambda e: number(7))
     75 btn10.on("click", lambda e: number(8))
     76 btn11.on("click", lambda e: number(9))
     77 btn13.on("click", lambda e: number(0))
     78 btn4.on("click", lambda e: set_operator("+"))
     79 btn8.on("click", lambda e: set_operator("-"))
     80 btn12.on("click", lambda e: calculate())
     81 btn14.on("click", lambda e: clear())
     82 
     83   </py1>
     84 </div>
     85 
     86 <p><a href="../demo.html">← Back to demos</a></p>
     87 
     88 </body>
     89 </html>