Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/marketingpipeline/media-card-web-component

A web component to display books, movies, TV shows & song details on any website
https://github.com/marketingpipeline/media-card-web-component

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

Last synced: about 8 hours ago
JSON representation

A web component to display books, movies, TV shows & song details on any website

Awesome Lists containing this project

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.](https://marketingpipeline.github.io/Media-Card-Web-Component/demo)



	

 


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



 var TheMovieDB_APIKey = "YOUR API KEY HERE"

 </scrip>

```



   include this [script](https://github.com/MarketingPipeline/Media-Card-Web-Component/blob/main/dist/media-card-wc.min.js) at the <b>bottom</b> 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"> 



     



	   

	

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



 var TheMovieDB_APIKey = "YOUR API KEY HERE"

 </scrip>

```



   include this [script](https://github.com/MarketingPipeline/Media-Card-Web-Component/blob/main/dist/media-card-wc.min.js) at the <b>bottom</b> 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"> 



     



	   

	

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](https://img.shields.io/github/contributors/MarketingPipeline/Media-Card-Web-Component)



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](https://github.com/MarketingPipeline/Media-Card-Web-Component/graphs/contributors) who

participate in this project.



## License ![GitHub](https://img.shields.io/github/license/MarketingPipeline/Media-Card-Web-Component)



This project is licensed under the GPL-3.0 License - see the

[LICENSE.md](https://github.com/MarketingPipeline/Media-Card-Web-Component/blob/main/LICENSE) file for

details.