JavaScript

Create the UI

Create the user interface for your web chat application.

The following HTML defines 2 <section> areas that you will use to display:

Buttons to either log in as Alice or Bob
The chat interface including the feed of messages along with a text area and button to send messages

The web page loads two scripts once the page body has rendered:

The vonageClientSDK.min.js file from the @vonage/client-sdk Node modules folder
The chat.js file that will contain your application's code. Create this empty file in the project's root directory

Create a file named index.html in your project directory with the following contents:

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                font: 13px Helvetica, Arial;
            }

            button {
                cursor: pointer;
            }

            #login {
                width: 100%;
                height: 100vh;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }

            #message-textarea {
                width: 85%;
                font-size: 20px;
            }

            #messages {
                display: none;
            }

            #message-feed {
                font-size: 18px;
                padding-bottom: 20px;
                line-height: 22pt;
                height: 300px;
                overflow-y: auto;
            }

            #send {
                width: 85%;
            }
        </style>
    </head>

    <body>
        <section id="login">
            <button id="alice-login">Log in as Alice</button>
            <br /><br />
            <button id="bob-login">Log in as Bob</button>
        </section>

        <section id="messages">
            <div id="message-feed"></div>
            <div>
            <textarea id="message-textarea"></textarea>
            <button id="send">Send</button>
            </div>
        </section>

        <script src="./node_modules/@vonage/client-sdk/dist/vonageClientSDK.min.js"></script>
        <script src="./chat.js"></script>
    </body>
</html>