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! 😇