Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

Practice exercises CHAPTER 10 431

Now that you have all the files you need, it’s time to add your code.

10. In the Index.html file, add references to the default style sheet, jquery, socket.io.js, and
    default.js file.
    The element should look like the following.
    
    
    
    
    
    
    


11. In the element, add a
    element for the user list and a

    element for
    the conversation.
    The element should contain the following.

    
    

    Users

    
    

    
    

    
    

    
    
    
    

    
    

    
    


12. Open the default.css file and add the following style rules.
    .userContainer {
    float: left;
    width: 200px;
    border-right: 1px solid black;
    height: 300px;
    padding: 10px;
    overflow: auto;
    }

.conversationContainer {

float: left;

width: 400px;

height: 300px;

overflow: auto;

padding: 10px;

}

#data {

width: 250px;

}