Chat Interface

The theme for week #8 of the Weekly Coding Challenge is:

Chat Interface

Everyone is using a chat of some sort nowadays so in this article we’re going to create the bare bones of a chat application. We’ll start with the HTML/CSS to create the layout and in a future post we’ll hook it up to a server and allow the users to communicate with each other.

You can go ahead and add a the back-end to save the messages & the real-time functionality after reading this article! I dare you! 😉

Here is what we’re going to create (live on Codepen):

https://codepen.io/FlorinPop17/pen/bJayqM

The HTML

<div class="chat-container">
    <ul class="chat">
        <li class="message left">
            <img
                class="logo"
                src="https://randomuser.me/api/portraits/women/17.jpg"
                alt=""
            />
            <p>I'm hungry!</p>
        </li>
        <li class="message right">
            <img
                class="logo"
                src="https://randomuser.me/api/portraits/men/67.jpg"
                alt=""
            />
            <p>Hi hungry, nice to meet you. I'm Dad.</p>
        </li>
        <li class="message left">
            <img
                class="logo"
                src="https://randomuser.me/api/portraits/women/17.jpg"
                alt=""
            />
            <p>DAD! I'm serious!</p>
        </li>
        <li class="message right">
            <img
                class="logo"
                src="https://randomuser.me/api/portraits/men/67.jpg"
                alt=""
            />
            <p>I thought your name was hungry...?</p>
        </li>
        <li class="message left">
            <img
                class="logo"
                src="https://randomuser.me/api/portraits/women/17.jpg"
                alt=""
            />
            <p>ARE YOU KIDDING ME?</p>
        </li>
        <li class="message right">
            <img
                class="logo"
                src="https://randomuser.me/api/portraits/men/67.jpg"
                alt=""
            />
            <p>No, I'm Dad...</p>
        </li>
    </ul>
    <input type="text" class="text_input" placeholder="Message..." />
</div>

As you can see we have a .chat-container which holds the .chat and a .text_input.

The .chat is a ul which contains multiple lis - .messages and we have two helper classes .left and .right that’ll help us position the message in the interface.

The images for the profiles are from RandomUser.

(P.S. There is a Dad joke in there, have you noticed? 😆)

The CSS

Chat-container

.chat-container {
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 25px;
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.7);
    overflow: hidden;
    padding: 15px;
    position: relative;
    width: 320px;
    max-width: 100%;
}

The container has a fixed width as we want to simulate a phone interface. Also the overflow: hidden is used to cut off the corners for the input (see below).

Chat and messages

.chat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.message {
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50px;
    box-shadow: 0px 15px 5px 0px rgba(0, 0, 0, 0.5);
    position: relative;
    margin-bottom: 30px;
}

.message.left {
    padding: 15px 20px 15px 70px;
}

.message.right {
    align-self: flex-end;
    padding: 15px 70px 15px 20px;
}

As you can see we use flexbox to position the elements within the container using the .left and .right classes. Also we apply a box-shadow in order to have a 3D effect.

The logo and p

.logo {
    border-radius: 50%;
    box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.7);
    object-fit: cover;
    position: absolute;
    left: 10px;
    top: -10px;
    width: 50px;
    height: 50px;
}

.message.right .logo {
    left: auto;
    right: 10px;
}

.message p {
    margin: 0;
}

The .logo is positioned absolute as we want to move it up a little bit and we’ll round the corners with border-radius: 50%.

And finally the .text_input:

The text_input

.text_input {
    font-size: 16px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 15px;
    width: 100%;
}

This is positioned at the bottom and the corners are cut off by the parent (.chat-container) with the overflow property set to hidden.

As of now the input is not linked so you can’t actually add a new message. This will require JavaScript and we’ll do it in a future article. Stay tuned!

Conclusion

This is a very simple chat interface and I dare you to create your own design and add those extra functionalities that I’ve been talking about above.

Let me see what you built!

Happy Coding! 😇