HTML and CSS Reference
In-Depth Information
<!-- connect -->
<div class="panel">
<input type="text" id="username" placeholder="username">
<input type="password" id="password" placeholder="password">
<button id="connectButton">Connect</button>
</div>
<div id="presenceArea" class="panel"></div>
<div id="chatArea" class="panel"></div>
<div id="output"></div>
<!-- scripts -->
<script src="strophe.js"></script>
<script src="chat_app.js"></script>
We will link this HTML document with a tiny CSS file that adds a little bit of style to
the user interface, shown in Listing 4-3.
Listing 4-3.
chat.css
body {
font-family: sans-serif;
}
#output {
border: 2px solid black;
border-radius: 8px;
width: 500px;
}
#output div {
padding: 10px;
}
#output div:nth-child(even) {
background-color: #ccc;
}
panel {
display: block;
padding: 20px;
border: 1px solid #ccc;
}
We will start with a minimal version of
chat_app.js
and add to it as we expand the
functionality of this example. To begin, the script will simply connect to the XMPP server
with Strophe.js and log its connection status. It also uses two input values: a username
and a password. These values are used to authenticate the user when establishing the
connection.
