HTML5 Web Application Development By Example Beginner's guide

Time for action – creating the game panel

The next thing we will create is the game panel. We already have the piano keyboard, which will be part of it. We also need an area above it to show the notes dropping down, and a place to show the results when the game has finished. Let's add these to our HTML file inside the game element and above the keyboard:

<div id="game">
    <div id="notes-panel">
        <div class="title">PIANO HERO</div>
    </div>

The <div id="notes-panel"> element will be used to hold the elements that represent the notes to play. It is empty for now. The note elements will be added dynamically to this element while the game is playing. It has a <div> element with the title in it that will show up behind the notes.

 <div id="results-panel"> ...