search

MarketingPipeline / Media-Card-Web-Component

A web component to display books, movies, TV shows & song details on any website
GNU General Public License v3.0
25 stars 4 forks source link
api books css custom-element films frontend html javascript js movie movies music songs themoviedb themoviedb-api tv-series tv-shows web-component web-components web-elements

readme

Media-Card-Web-Component

Display details about movies, tv shows, books & songs on any website!
Show your support!

A custom web element to show / fetch details about movies, TV shows, books & songs on any website!

Example and usage

You can view a demo of this Web Component in use here.


How to use Media Card:


How to show a Book: ### Usage ```html ``` include this [script](https://github.com/MarketingPipeline/Media-Card-Web-Component/blob/main/dist/media-card-wc.min.js) at in your HTML document. Note: You can show as books as you want! You can also use a ```author``` attribute for a more accurate result.











How to show a Movie: ### Usage ```html ``` Note: For movies & TV show a API Key is required from TheMovieDB, songs do NOT require a API key. After getting your API key (if required) place it in your HTML document like so ```js Note: You can show as many movies as you want!











How to show a TV Show: ### Usage ```html ``` Note: To display TV show(s) - you will require a API key from TheMovieDB. After getting your API key place it in your HTML document like so ```js Note: You can show as many TV show's as you want











How to show a Song: ### Usage ```html ``` Note: You do NOT need a API key to display songs. include this [script](https://github.com/MarketingPipeline/Media-Card-Web-Component/blob/main/dist/media-card-wc.min.js) at the bottom of your HTML document. Note: You show as many song's as you want








#### Options
Attribute Meaning Default Required
name The movie, TV show or song name you would like to show undefined Yes
type Type of Media to show details for - options:TV, Song, Book, by default movie type will be shown. Movie No
theme Set a different color theme - options dark light No

Contributing GitHub

Want to improve this project? Create a pull request with detailed changes / improvements! If approved you will be added to the list of contributors of this awesome project!

See also the list of contributors who participate in this project.

License GitHub

This project is licensed under the GPL-3.0 License - see the LICENSE.md file for details.