Pyscript_stuff/index.html at main · CodingWithAishik/Pyscript_stuff · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Adding with PyScript</title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="https://pyscript.net/releases/2024.1.1/core.css">
    <script type="module" src="https://pyscript.net/releases/2024.1.1/core.js"></script>
</head>
<body>
    <div class="form-container">
        <label for="num1">Number 1:</label>
        <input type="number" id="num1" name="num1">
        <label for="num2">Number 2:</label>
        <input type="number" id="num2" name="num2">
        <!--Add button with PyScript click handler-->
        <button py-click="add_nums" id="add-button">Add</button>
        <label for="sum">Sum:</label>
        <input type="number" id="sum" name="sum" readonly>
    </div>
    <py-script>
        from pyscript import document

        def add_nums(event=None):
            num1_el=document.querySelector("#num1")
            num2_el=document.querySelector("#num2")

            val1_str = num1_el.value or "0"
            val2_str = num2_el.value or "0"

            val1=float(val1_str)
            val2=float(val2_str)

            decimal_places1 = len(val1_str.split('.')[-1]) if '.' in val1_str else 0
            decimal_places2 = len(val2_str.split('.')[-1]) if '.' in val2_str else 0
            max_decimal_places = max(decimal_places1, decimal_places2)

            total = val1 + val2
            total = round(total, max_decimal_places)

            sum_el=document.querySelector("#sum")
            sum_el.value=total
    </py-script>
</body>
</html>