test.html

<!DOCTYPE html>
<html>
    <head>

        <title>test translation</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    </head>

    <body>
        <script>

        var server = "127.0.0.1:3000"

        async function checkServer(fqdn, imagepath="/favicon.ico") {
            let img = new Image();
            img.onload = function() { //console.log("online"); 
                return true; 
            };
            img.onerror = function() { //console.log("offline"); 
                return false; 
            };
            img.src = "http://" + fqdn + imagepath + '?r=' + Math.random(); /* avoids caching */
        }

      
    
        async function translate(input) {    
            console.log("translating ...");
            var original = input;

            $.ajax({
                    url: "http://" + server + "/api/translate",
                    type: 'GET',
                    data: {
                        original: original
                    },
                    success: function () {
                        console.log('Successfully connected to the server');
                    },
                    error: function () {
                        console.log('Something went wrong');
                    }
                })
                .done(function (data) {
                    console.log("returned data:", data);
                    return data;
                });
        }

        function translateText() {
            if (checkServer(server)) {
                var textbox = document.getElementById("textbox");
                var input = textbox.value;
                translate(input);
            } else { console.log("unavailable")}
        }

        </script> 

        <input type="text" id="textbox" placeholder="Enter text here">
        <button onclick="translateText()">tranlate</button>
        <p>example: age: vintage</p>
        <p>mitake: 120 cm (center back)</p>
        <p>color: green, red (hakkake)</p>

    </body>
</html>