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

 <media-card book="Animal Farm"></media-card>

include this script at in your HTML document.

<script src="https://cdn.jsdelivr.net/gh/MarketingPipeline/Media-Card-Web-Component@latest/dist/media-card-wc.min.js" type="module"></script> 

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

 <media-card name="The Mask (1994)"></media-card>

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

<script>
 var TheMovieDB_APIKey = "YOUR API KEY HERE"
 </scrip>

include this script at the bottom of your HTML document.

<script src="https://cdn.jsdelivr.net/gh/MarketingPipeline/Media-Card-Web-Component@latest/dist/media-card-wc.min.js" type="module"></script> 

Note: You can show as many movies as you want!

How to show a TV Show:

Usage

 <media-card name="The Twilight Zone (1959)" type="TV"></media-card>

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

<script>
 var TheMovieDB_APIKey = "YOUR API KEY HERE"
 </scrip>

include this script at the bottom of your HTML document.

<script src="https://cdn.jsdelivr.net/gh/MarketingPipeline/Media-Card-Web-Component@latest/dist/media-card-wc.min.js" type="module"></script> 

Note: You can show as many TV show's as you want

How to show a Song:

Usage

 <media-card name="The Beatles In My Life" type="song"></media-card>

Note: You do NOT need a API key to display songs.

include this script at the bottom of your HTML document.

<script src="https://cdn.jsdelivr.net/gh/MarketingPipeline/Media-Card-Web-Component@latest/dist/media-card-wc.min.js" type="module"></script> 

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

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

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