HTML and CSS Reference
In-Depth Information
The next thing to create will be the movie content blocks. These blocks contain
the movie information, such as the synopsis, cast, and videos.
...
app.view.movie = function(movie){
...
_rootElement.innerHTML = [
...
'<div class="movie-content">',
'<div class="block-container span-three">',
'<section class="block" id="block-synopsis">',
'<div class="content">',
'<p>', movie.getSynopsis() ,'</p>',
'</div>',
'</section>',
'<section class="block" id="block-cast">',
'<div class="content">',
'<h3>Cast List</h3>',
'<ul class="list"></ul>',
'</div>',
'</section>',
'<section class="block" id="block-video">',
'<div class="content">',
'<h3>Video Clips</h3>',
'<ul class="list grid"></ul>',
'</div>',
'</section>',
'</div>',
'</div>',
].join('');
...
}
The POSH is quite simple for this section; it simply outputs the synopsis of the
movie. The cast list and video clips remain empty, as these will be populated a
bit later.
Finally, you will need to create a footer navigation button to return to the
favorites screen.
...
app.view.movie = function(movie){
...
_rootElement.innerHTML = [
...
'<footer class="footer screenbar">',
