CODEWITHSUNDEEP
javascripthtmlcssforms
anonymous
anonymous

Reputation: 165

How to display user input as a chat bubble using simple javascript?

I'm developing a chatbox and I have the chat messages hardcoded for the moment. 

                    <!-- Reciever Message-->
                <div class="media w-50 ml-auto mb-3">
                    <div class="media-body">
                        <div class="bg-primary rounded py-2 px-3 mb-2">
                            <p class="text-small mb-0 text-white">Test chat</p>
                        </div>
                    </div>
                </div>

I have a form with a simple input box.

     <form action="#" class="bg-light">
                <div class="input-group">
                    <input type="text" placeholder="Type a message" aria-describedby="button-addon2" class="form-control rounded-0 border-0 py-4" id="message">
                    <div class="input-group-append">
                        <button id="button-addon2" type="submit" class="btn btn-link" onclick="addText()"> <i class="fa fa-paper-plane"></i></button>
                    </div>
                </div>
            </form>

What I want is a way to display the text entered in the text box as the receive message div when the form is submitted. Any suggestions as to how to do it. Thanks in advance.

Upvotes: 0

Views: 612

Answers (1)

machineghost
machineghost

Reputation: 35820

This is really a design question, not a technical one. Technically speaking you just do exactly what you are doing ... and then put a "chat bubble graphic" as the background-image style of .bg-light.

Upvotes: 2

Related Questions