omdb-search

A Polymer custom element that fetches movie, series, episode data from the
Open Movie Database (OMDb) api.

Change Log

Version: 0.4.0

Remove year's reflectToAttribute prop

year: {
    type: Number,
    value: '',
-   notify: true,
-   reflectToAttribute: true
+   notify: true
}

Add results amount to omdb-search.html

<style>
  p.result__amount {        
    @apply --omdb-search-result__amount-theme;          
  }
</style>
<section class="section--result__amount">
  <template is="dom-if" if="{{response.totalResults}}">
    <p class="result__amount">Results found: {{response.totalResults}}</p>
  </template>
    
  <template is="dom-if" if="{{!response.totalResults}}">
    <p class="result__amount">Results found: 0</p>
  </template>       
</section>

Update results amount selector to theme.html

<style is="custom-style">
omdb-search{
  --omdb-search-result__amount-theme:{};
}
</style>

Demo it

https://giovanni-orlando.com/omdb-search/

Getting Started

Make a project directory for your demo and change directories into it:

$ mkdir omdb-search-demo && cd omdb-search-demo

Create an index.html

$ touch index.html

Install or Download

Install the component using bower.

$ bower install omdb-search --save

Or download the .zip file

Usage

In that index.html add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>OMDb Search demo</title>
    <!-- Load the WebComponents polyfill: -->
    <script async src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.24/webcomponents-lite.js"></script>

    <!-- Import the omdb-search web component: -->
    <link rel="import" href="bower_components/omdb-search/omdb-search.html">

    <!-- Optionally, import the included omdb-search-theme stylesheet: -->
    <link rel="import" href="bower_components/omdb-search/omdb-search-theme.html">
</head>
<body>
    <!-- Use the element in your app:  -->
    <h1>Tarzan movies:</h1>
    <omdb-search q="Tarzan" type="movie" page="1"></omdb-search>
</body>
</html>