Movies should display as cards
zoeames opened this issue · comments
Story
As a user, when the movies load in a page, they should show up as cards.
Acceptance Criteria
When the user views movies
Then the movies should appear as cards
And should include the title and descrption
And should include 2 buttons - Review and Wishlist
And the cards should appear in rows of three
Technical Note
- Each card will have a movie poster - but there is a separate ticket for this.
Comment by zoeames
Monday Oct 16, 2017 at 03:50 GMT
Create dom.js file in javascripts. It will have two functions:
- domString - this function will take an array of movies loop over it and creates the domstring of cards. It should also insert a div with a class of row ever 3 cards
- printToDom = this will append the string from domString to the dom.
Comment by zoeames
Monday Oct 16, 2017 at 03:51 GMT
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>
For now we will leave the img tag blank (keep tag in there but put nothing for src)
Comment by zoeames
Monday Oct 16, 2017 at 03:53 GMT
This ticket can be done independently of the one that is getting the data from tmdb.js because we know what tmdb returns for each movie. Here is some sample json from tmdb:
let singleMovie = {
adult:false,
backdrop_path:"/c2Ax8Rox5g6CneChwy1gmu4UbSb.jpg",
genre_ids:[28, 12, 878, 14],
id:140607,
original_language:"en",
original_title:"Star Wars: The Force Awakens",
overview:"Thirty years after defeating the Galactic Empire, Han Solo and his allies face a new threat from the evil Kylo Ren and his army of Stormtroopers.",
popularity:49.408373,
poster_path:"/weUSwMdQIa3NaXVzwUoIIcAi85d.jpg",
release_date:"2015-12-15",
title:"Star Wars: The Force Awakens",
video:false,
vote_average:7.5,
vote_count:7965
};
To test our functions before we have data, in main.js we can call this function with something like:
let dom = require('./dom');
dom.domString([singleMovie, singleMovie, singleMovie, singleMovie]);