Creating, Saving, and Loading Tracks - HTML5 Games Most Wanted - page 68

margin-right: 50px;
float: left;
}
section#bricks-container {
width: 100px;
margin-right: 50px;
float: left;
}
section#tracks-container {
width: 300px;
float: left;
}
button#save, input#track-name {
float: right;
}
section#tracks-container h1 {
margin: 0;
}
The JavaScript structure
After finishing the HTML markup and the CSS stylesheet, we can focus on the cool stuff: the JavaScript
code. So, let's add some JavaScript <script> tags! Those go at the bottom, right before the </body> tag
closes; that way we can make sure that the browser parses the DOM and creates all the elements before it
starts interpreting the JavaScript. Browsers start working up the JavaScript as soon as they load it,
whether the DOM is ready or not.
To start, we simply add two JavaScript <script> tags: one for jQuery and the other for our application.js
file.
...
<section id="tracks-container">
<h1>Saved Tracks</h1>
</section>
<script src="javascripts/jquery.js"></script>
<script src="javascripts/application.js"></script>
</body>
</html>
Note jQuery is only used for DOM manipulation. No in-depth knowledge of jQuery is
required. We just want to keep things simple.
After adding those two lines to the markup, we switch into our javascripts folder and create an empty
application.js file. In order to get jQuery, we go to the jQuery web site ( www.jquery.com ) and look for the