Live-The-Movie

Watch the movie, live the movie. Not only will we help you determine which movie to watch, we'll help you create a unique holiday-themed night to remember.

Description

We created this project in order to provide our users with a holiday filled evening. Using javascript, css, and HTML, we created a holiday themed page from scratch that uses two third party APIs, Spoonacular and TMDB, to fetch holiday themed recipes and movies.

Throughout this project, we continued to improve our javascript skills and further learned how to collaborate using github, a skill that had not yet been acquired for assignments as we had all gotten used to working alone until now. Learning how to manage project tasks, fix merge issues, and build on collaboration was invaluable as we believe it has helped strength us as future team oriented coders. We also enjoyed learning from one another and seeing how different one person's approach to a problem is than another's.

Links

Github: https://github.com/laurelthorburn/Live-The-Movie

Deployed Site: https://laurelthorburn.github.io/Live-The-Movie/

Presentation: https://docs.google.com/presentation/d/1nFc2xP4fpfl6g6QyWAt7WTw1nwYVgMP8jpGsxEd8Hf0/edit?usp=sharing

User Story

AS A holiday enthusiast
I WANT to see holiday themed movies and recipes
SO THAT I can have a holiday themed night planned on my behalf

Acceptance Criteria

GIVEN eight major holidays
WHEN I select a holiday of my choosing
THEN I am presented with movie options and recipes related to that holiday
WHEN I select a dietary restriction
THAN I am presented with recipes that meet my dietary needs
WHEN I view a preferred recipe
THEN I am taken to that recipe's website on a new tab
WHEN I select the movie I want
THEN I am able to view the movie's trailer
WHEN I click the go back button
THEN I am returned to the holiday selector page and I am able to select a different holiday
WHEN I hover over the selected holiday
THEN I am presented with a holiday themed background

Technologies Used

We utilized two server side APIs for this project:

• Spoonacular
• The Movie Database (TMDB)

CSS Libraries:

• Materialize
• Bulma
• jQuery

Languages:

• JavaScript
• CSS
• HTML

Website Video

Website Screenshots

Collaborators

Laurel Thorburn: codinglaurel@gmail.com

Valerii Bihun: valeriibihun.co@gmail.com

Resources/Credit

• https://pixabay.com/
• https://materializecss.com/cards.html
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout
• https://bulma.io/documentation/components/modal/
• https://www.youtube.com/watch?v=L8CF_k4jWBo&ab_channel=TheNetNinja
• https://getcssscan.com/css-buttons-examples
• https://webdesign.tutsplus.com/tutorials/how-to-create-a-frosted-glass-effect-in-css--cms-32535

License

• MIT