HTML and CSS Reference
In-Depth Information
■
We built our app jQuery version 1.8.2. The minified jQuery library,
jquery-1.8.2.min
, is included in the distribution of this topic, but you can also
Note
Building the HTML File
In this example, we keep our HTML code simple so that we can focus on the messaging
logic of the application. After including the JavaScript libraries, we need to create the
form fields and button for the players' names, as shown in Figure
5-11
.
Figure 5-11.
Creating the form fields for the players' names
Then, we create a
div
for the instructions and another one for the buttons, shown in
Figure
5-12
, which allows players to make their choice.
Figure 5-12.
Buttons representing the user's selection
Finally, we have an empty
div
that will display the opponent's choice. Listing 5-6
shows the source code of our HTML file.
Listing 5-6.
Source Code of the index.html File
<!DOCTYPE html>
<html>
<head>
<title>Rock Paper Scissors - a WebSocket Demo</title>
<!-- JavaScript libraries used: jQuery and the
open source STOMP library -->
<script src="js/jquery-1.8.2.min.js"></script>
<script src='js/stomp.js'></script>
<script src='js/rps.js'></script>
</head>
<body>
<!-- Form fields and button for the players' names.
The queues are named after the users -->
<div id="nameFields">
<input id="myName" type="text" placeholder="Your name"/>
