jonmenard.github.io/index.html at main · jonmenard/jonmenard.github.io · 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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html lang="en" id = "html">
    <script src = "JavaScript/jquery-3.4.1.js"></script>
    <script>
        $(function(){
            $("header").load("header.html");
            $("head").load("head.html");
            $("footer").load("footer.html");
            $(window).resize(function () {
                $('#main-title-holder').css('min-height', $(window).height() * 0.82);
                });
            $(function(){ $(window).resize() });
            });
    </script>
    <head>

    </head>
    <body id="indexBody">


        <header id="header">
        </header>
        <main id = "content" >
            <div id="main-title-holder">
                <div class="verticalCenter">
                    <h1 id="mainTitle" class ="indexPageTitles">Jon Menard </h1><br>

                    <h2 id="subTitle"  class ="indexPageTitles">Software Engineering Portfolio </h2>
                    <br>
                    <div class = "outer">
                        <div id="chatGPTHolder">
                            <p id = "chatGPTGreeting"><strong>Chat GPT Greeting: </strong><span id="response"  class ="indexPageTitles"> </span></p>
                        </div>
                    <div>

                </div>
            </div>
        </main>
        <footer>


        </footer>

    </body>
    <script src = "JavaScript/index.js"></script>
    <script>

        function completePrompt() {

            // Define your API endpoint URL
            const apiEndpoint = "https://jonmenardportfoliobackend-979240443910.northamerica-northeast2.run.app/test.php";
            const xhr = new XMLHttpRequest();
            xhr.open('GET', apiEndpoint);
            xhr.responseType = 'json';
            xhr.onload = function () {
                // Check if the request was successful
                if (xhr.status === 200 && xhr.response) {
                    const responseElement = document.getElementById("response");
                    const message = xhr.response.greeting;
                    // Display each letter with a delay
                    function typeWriter(index) {
                        if (index < message.length) {
                        responseElement.textContent += message.charAt(index);
                        responseElement.style.textAlign = "left";
                        index++;
                        setTimeout(function() { typeWriter(index); }, 50); // Adjust the delay to control the speed of typing
                        }
                    }

                    typeWriter(0);

                } else {
                    // Log an error message
                    console.error("Request failed. Status: " + xhr.status);
                }
            };

            // Set the onerror function to handle any errors
            xhr.onerror = function () {
            console.error("Request failed. Network error.");
            };

            // Send the request with the URL-encoded form data
            xhr.send();

        }
    completePrompt()
  </script>


    </script>
</html>