index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Assignment 5</title>
        <link rel="stylesheet" type="text/css" href="./assets/styles.css">
        <link rel="stylesheet" type="text/css" href="./node_modules/@fortawesome/fontawesome-free/css/all.css">
        <link rel="stylesheet" type="text/css" href="./node_modules/bootstrap/dist/css/bootstrap.css">
        <script src="./node_modules/bootstrap/dist/js/bootstrap.js"></script>
        <!-- AUTHOR: BRENDAN DILEO, 000879513. USE OF BOOTSTRAP, HELP OF W3SCHOOLS, AND FONTAWESOME ELEMENTS -->
        <!-- SA0001: I BRENDAN JOHN DILEO, 000879513 certify that this material is my original work. No other person's work has been used without due acknowledgement. I have not made my work available to anyone else. -->
    </head>

    <body class="mx-5">
        <!-- Page Header, not to be confused with the header that will be displayed using AJAX as a result of clicking the first button -->
        <header>
            <h1 class="text-center mt-3 mx-3 border-black border-bottom">Assignment 5 - Comp. Side Web Programming</h1>
        </header>

        <main>
            <!-- This input will be where the user enters their choice -->
            <div class="text-center">
                <input type="text" id="input" class="form-control mt-3" placeholder="Enter Choice: ">
                <!-- This will be where the content received from the server will be displayed -->
                <div id="content"></div>
            </div>

            <div class="text-center">
                <p>Click a button:</p>
            </div>

            <!-- These are the buttons that will trigger the requests depending on which button is pressed -->
            <div class="text-center">
                <button class="btn btn-primary" id="firstBtn">First</button>
        
                <button class="btn btn-primary" id="secondBtn">Second</button>
            
                <button class="btn btn-primary" id="thirdBtn">Third</button>
            </div>

        </main>

        <footer>
            <div class="row justify-content-center bg-white mt-5 mb-5">
                <h4 class="text-dark text-center border-black border-top">
                    <i class="font-italic">© 2024, Brendan Dileo, 000879513, Mohawk College.</i>
                    <br>
                    <i class="font-italic"> Use of Bootstrap, and FontAwesome Elements.</i>
                </h4>
            </div>
            <!-- Link to Javascript file -->
            <script src="./js/website.js"></script>
        </footer>
        
    </body>
</html>