[4] Create page: Film sida med mer detalj

saeraa commented 1 year ago

User story

As a visitor to the cinema, I want to be able to see more information about the movie I want to watch.

Details

movie.html(?) page with dynamically rendered content depending on which movie you're on. Information that should be there: Title, genre. Description. Director, actors, country, age limit. Showtimes. Ticket button. Embedded trailer. Poster, possibly other pictures. Should look good. Follow colors and fonts as provided in variables.scss. Styling in movieDetails.scss

Suggestion: page.com/#5 should render the movie with the index of 5 from database.json.

Dependencies

Movie database
variables.scss

Definition of done

All information about the movie should be on the page. It should be styled nicely according to the site style guide/card. It should look good on both mobile and desktop.

Tests

I should be able to click the ticket button and be redirected to a page where it says "You want to book movie X" I should be able to click play on the trailer and watch it.

saeraa commented 1 year ago

Pull request

JonathanHolmgren commented 1 year ago

@saeraa Ser riktigt bra ut och har testat lite olika sidor och knappar. En liten fundering, hur ser det ut med först filmen i databasen? Var skapas ingen informationssida för denna?

JonathanHolmgren commented 1 year ago

Tror detta löser problemet, var ett "+" tecken innan "parameter.slice(1).match(/^\d+$/)?.input;".

saeraa commented 1 year ago

Nä, plustecknet är en liten fix för att få det till nummer istället för sträng. Problemet är att movieIndex blir 0, vilket är falsy i JavaScript. Så if-satsen nedanför behöver ändras till if (!isNaN(movieIndex) && movieIndex ....

Nice catch iaf, hade jag missat! 😉

ved0 commented 1 year ago

Works like a charm and looks amazing. Great work! :1:

saeraa / mellankalix