Let's modify the view to make it look like a chat room. We will need an area to display the messages, a text input for the user to enter the message, and a button to send the message. We will add some aesthetic elements, such as a header, banner, and footer. When we are done, our chat room user interface should look like the one shown in the following screenshot:
Awesome chat UI
Let's start editing layout.jade by adding a header and footer to it:
doctype 5 html block head title= title link(rel='stylesheet', href='/stylesheets/style.css') body header#banner h1 Awesome Chat block content footer Hope you enjoy your stay here
The first change we make is to add the block keyword before head. This makes head a block, to which we can append content from the extending pages.
The other change is the addition of a new header and footer. Note that we are using the header and footer tags from HTML5. This code also introduces us to a new jade syntax. When we write header#banner, it will generate headers with banner as the id value. The generated HTML code will be as follows:
<!DOCTYPE html>
<html>
<head>
<title>{TITLE}</title>
<link rel="stylesheet" href="/stylesheets/style.css" />
</head>
<body>
<header id="banner">
<h1>Awesome Chat</h1>
</header>
{CONTENT}
<footer>
Hope you enjoy your stay here
</footer>
</body>
</html>Next, we will edit index.jade to add the message area, message input, and the Send button:
extends layout
block content
section#chatroom
div#messages
input#message(type='text', placeholder='Enter your message here')
input#send(type='button', value='Send')Let's run and see what our awesome-chat application looks like. Execute the application using npm and open http://localhost:3
000/ in the browser:
npm start
Hey, all the elements are there, but it doesn't look right! That's correct; to improve the look and feel of the application, we need to edit the stylesheet, which is located at public/stylesheets/style.css.
We can edit it according to our taste. Here is one that works just fine for me:
html {
height: 100%;
}
body {
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
margin: 0px;
padding: 0px;
height: -moz-calc(100% - 20px);
height: -webkit-calc(100% - 20px);
height: calc(100% - 20px);
}
section#chatroom {
height: -moz-calc(100% - 80px);
height: -webkit-calc(100% - 80px);
height: calc(100% - 80px);
background-color: #EFFFEC;
}
div#messages {
height: -moz-calc(100% - 35px);
height: -webkit-calc(100% - 35px);
height: calc(100% - 35px);
padding: 10px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
input#message {
width: -moz-calc(100% - 80px);
width: -webkit-calc(100% - 80px);
width: calc(100% - 80px);
}
input#send {
width: 74px;
}
header{
background-color:#4192C1;
text-align: right;
margin-top: 15px;
}
header h1{
padding: 5px;
padding-right: 15px;
color: #FFFFFF;
margin: 0px;
}
footer{
padding: 6px;
background-color:#4192C1;
color: #FFFFFF;
bottom: 0;
position: absolute;
width: 100%;
margin: 0px;
margin-bottom: 10px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
a {
color: #00B7FF;
}After saving this CSS and refreshing the page, here is what the chat room looks like:
The awesome chat room