JSFiddle - React, Tailwind, and code Playground

by leeroy

HTML

<a class="add-item">Add a movie</a>
<div class="grid-container">
  <!--<div class="grid-item placeholder">
    <div class="content">Add a movie</div>
  </div>-->
</div>

CSS

body {
  margin: 0;
  padding:0;
  background-color:#000000;
  font-family:sans-serif;
}

* {
    box-sizing: border-box;
}

.grid-container {
  display:grid;
  grid-template-columns:repeat(6, 16.66666666666667%);
  grid-gap:0;
}

.grid-item {
    height:auto;
    opacity: 0;
    position:relative;
    border: 1px rgb(0,0,0) solid;
    -webkit-transform: scale(0, 0);
    -moz-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    transform: scale(0, 0);
    -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
    -moz-transition: opacity 0.3s ease, -moz-transform 0.3s ease;
    -o-transition: opacity 0.3s ease, -o-transform 0.3s ease;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.grid-item img {
  width:100%;
  display:block;
}

.grid-item.loaded {
    opacity: 1;
    transform: scale(1, 1);
}

.grid-item .item-cover-meta {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background-color:rgba(0,0,0,0.7);
  color:white;
  opacity:0;
  transition: opacity 0.3s ease;
}

.grid-item:hover .item-cover-meta {
  opacity:1;
}

.grid-item .item-cover-meta .title {
  padding:10px;
  text-align: center;
  width: calc(100% - 10px);
  position: absolute;
  left: 5px;
  top: 40px;
}

.grid-item .item-cover-meta h2 {
  font-size:18px;
  text-align:center;
}

.grid-item .item-cover-meta .rating {
  position:absolute;
  width:100%;
  bottom:10px;
  text-align:center;
}

.add-item {
  border: 2px rgba(255,255,255,0.4) dashed;
  border-radius: 2px;
  color: rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  margin:10px;
  padding:15px;
  cursor:pointer;
}

.grid-item.placeholder {
  opacity: 1;
  transform: scale(1, 1);
}

.grid-item.placeholder .content {
  border: 3px rgba(255,255,255,0.4) dashed;
  border-radius: 5px;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  position:absolute;
  top:10px;
  right:10px;
 ...

JavaScript

/*jQuery('.grid-item').each(function() {
	var $item = jQuery(this);
	setTimeout(function() {
  	$item.addClass('visible');
  }, randomIntFromInterval(100, 2000));
});

function randomIntFromInterval(min,max)
{
    return Math.floor(Math.random()*(max-min+1)+min);
}*/

var loading = false;
var config = {};
var currentPage = 1;

jQuery.get('https://api.themoviedb.org/3/configuration?api_key=24dccd792edc8b80a1351ffb89128011').then(function(configData) {
	config = configData;
  loadMoviesFromApi(1);
});

$(window).scroll(function() {
  if($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
		loadMoviesFromApi(currentPage+1);
  }
});

function loadMoviesFromApi(page) {
	if(loading) return;
  
  loading = true;
  
	jQuery.get('https://api.themoviedb.org/3/discover/movie?page='+ page +'&api_key=24dccd792edc8b80a1351ffb89128011').then(function(movies) {
  	currentPage = page;
  	loadMoviesInGrid(movies.results);
  }).always(function() {
  	loading = false;
  });
}

function loadMoviesInGrid(movies) {
	movies.forEach(function(movie) {
    	var $item = jQuery('<div class="grid-item"></div>');
      var $itemImage = jQuery('<img src="'+ config.images.secure_base_url +'w300'+ movie.poster_path +'" alt="" />');
      var $itemInfos = jQuery('<div class="item-cover-meta"></div>');
      
      var $itemMainInfos = jQuery('<div class="title"></div>')
      var $itemTitle = jQuery('<h2>'+ movie.title +'</h2>');
      var $itemYear = jQuery('<p class="year">'+ movie.release_date.split('-')[0] +'</p>');
      var $itemStars = jQuery('<p class="rating"></p>');
      
      var rating = (movie.vote_average /10) *5;
      
      for(var i = 1; i <= 5; i++) {
      	var $itemStar = jQuery('<span class="star'+ ((rating >= i) ? ' active' : '') +'"></span>');
        $itemStars.append($itemStar);
      }
      
      $itemMainInfos.append($itemTitle);
      $itemMainInfos.append($itemYear);
      $itemInfos.append($itemMainInfos);
     ...