Creating HTML and CSS Markup - Realtime Web Apps: With HTML5 WebSocket, PHP, and jQuery - page 139

Developing the Closed Room View for Attendees
The next step is to create the view for a room that was closed by its presenter. Attendees will no longer be able to vote,
and there will be a notice to let them know both that the room is closed and that they can contact the presenter
by e-mail.
Create a new file called attendee-closed.html in the root of the app; this is where you'll save the markup for
this step.
Striving for as Little New Markup as Necessary
Because it's always better to write less code, the only change made to the markup is to replace the “ask a question”
form with the closed room notice and to add a class of “closed” to the list of questions. Copy the contents of
attendee-active.html into the new attendee-closed.html file, replace the “ask a question” form with the closed
notice markup and add the class="closed" attribute, as shown here:
<h3>This session has ended.</h3>
<p>
If you have a question that wasn't answered, please
<a href="mailto:[e-mail]">email the presenter</a>.
</p>
<ul id="questions" class="closed">
<!—leave existing elements here -->
</ul><!--/#questions-->
After this is saved, loading the document in your browser shows that it is nearly ready to go with no changes
(see Figure 7-23 ).