Movies should display as cards

[zoeames]

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

1. Each card will have a movie poster - but there is a separate ticket for this.

[zoeames]

Comment by zoeames Monday Oct 16, 2017 at 03:44 GMT

---

Wireframe:

[zoeames]

Comment by zoeames Monday Oct 16, 2017 at 03:50 GMT

---

Create dom.js file in javascripts. It will have two functions:

1. 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
2. printToDom = this will append the string from domString to the dom.

[zoeames]

Comment by zoeames Monday Oct 16, 2017 at 03:50 GMT

---

Create a div with id movies in index.html

[zoeames]

Comment by zoeames Monday Oct 16, 2017 at 03:51 GMT

---

Use Custom Content Thumbnail.

<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)

[zoeames]

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]);