crow_single_page_app_desktop/templates/home.html

<!DOCTYPE html>
<html>

<head>

    <meta charset="UTF-8">
    <script>
        let pin = "{{{pin}}}";


        function write_on(id, html) {
            let t = document.getElementById(id);
            t.innerHTML = html;
        }

        async function cal_square() {

            let n = document.getElementById("mynumber").value;
            const data = {
                mynumber: parseInt(n, 10),
                pin: pin
            };

            try {
                const response = await fetch("/square", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify(data)
                });

                if (!response.ok) {
                    throw new Error(`HTTP error: ${response.status}`);
                    write_on("output", response.status);
                }

                const result = await response.json();
                console.log(result);
                write_on("output", result.square);
            } catch (error) {
                console.error("Sending failed:", error);
                write_on("output", `Sending failed: ${error}`);
            }
        }


    </script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello</title>
</head>

<body>
    <h1>Hello</h1>
    <p>The pin is "{{{pin}}}" </p>
    <p>Calculate the number square (server side)</p>
    <input type="number" id="mynumber" placeholder="Insert a number">
    <button id="mybtn" onclick="cal_square()">calculate</button>
    <div id="output"></div>
</body>

</html>