O'Reilly logo

HTML5 Web Application Development By Example Beginner's guide by J.M. Gustafson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Time for action – creating the splash panel

Let's start by copying the piano application that we created in the previous chapter, and renaming the files to pinaoHero.html, pianoHero.js, and pianoHero.css. We will also rename the main application object to PianoHeroApp. You can find the code for this section in Chapter 7/example7.1.

Now let's create the splash panel. First we'll define the HTML in pianoHero.html. We will add a new <div> element above the keyboard element to hold the splash panel:

<div id="splash">
    <h1>Piano Hero</h1>
    <section class="loading">
        Loading audio...<br/>
        <progress max="100" value="0"></progress>
    </section>

First we add a section with a class of "loading" that displays the status of loading the audio when the application ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required