JSFiddle - React, Tailwind, and code Playground

by mthuret

HTML

<script src="//cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.css">
<h1>
<a href="https://github.com/algolia/instantsearch.js/">instantsearch.js</a>
</h1>
<label>search: <input id="searchBox" /></label>
<h2>
Movies
</h2>
<div id="movies"></div>

CSS

em {text-decoration: underline}
.bad-rating{
  color: red;
}

JavaScript

var movies = instantsearch({
	appId: 'latency',
  apiKey: '6be0576ff61c053d5f9a3225e2a90f76',
  indexName: 'movies',
});

var moviesHits = instantsearch.widgets.hits({
	container: document.querySelector('#movies'),
  hitsPerPage: 10,
  templates: {
     item: function(data) {
     	  let className = "";
        if(data.rating < 4){
          className = "bad-rating";
        }
        return '<div'+ ' class="' + className + '">' + data._highlightResult.title.value + '</div>';
      }
    }
});


var searchBox = instantsearch.widgets.searchBox({
  container: document.querySelector('#searchBox')
});

movies.addWidget(moviesHits);
movies.addWidget(searchBox);
movies.start();