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:
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: