JSFiddle - React, Tailwind, and code Playground

by Ritwika Das

HTML

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <link data-require="[email protected]" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="seznam-filmov.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <h1>Movie list</h1>
  <div class="container">

    <div class="row">

      <div class="col">
        <ul class="list-group"></ul>
        <br />
        <button class="btn btn-outline-primary btn-lg btn-block">Reset</button>
        <br/>
      </div>

      <div class="col">
        <div class="card" style="width: 20rem;">
          <img class="card-img-top" src="" />
          <div class="card-block">
            <h4 class="card-title"></h4>
            <p class="card-text"></p>
          </div>
          <ul class="list-group list-group-flush"></ul>
          <div class="card-block">
            <a href="#" class="card-link">Web-Page</a>
            <a href="#" class="card-link">IMDb</a>
          </div>
        </div>
      </div>

    </div>

  </div>
</body>

</html>

CSS

.container ul:nth-child(1) li {
  cursor: pointer;
}

html,
body {
  height: 100%;
}

.container {
  min-height: 100%;
}

JavaScript

$(document).ready(function(){
        $("ul").append("<li>" +filmi.Movies[0].Title + "</li><li>" + filmi.Movies[1].Title + "</li><li>" + filmi.Movies[2].Title + "</li><li>" + filmi.Movies[3].Title + "</li><li>" + filmi.Movies[4].Title + "</li>")
});

const filmi = {
  "Movies": [
    {
      "Title": "La La Land",
      "Year": "2016",
      "Rated": "PG-13",
      "Released": "25 Dec 2016",
      "Runtime": "128 min",
      "Genre": "Comedy, Drama, Music",
      "Director": "Damien Chazelle",
      "Writer": "Damien Chazelle",
      "Actors": "Ryan Gosling, Emma Stone, Amiée Conn, Terry Walters",
      "Plot": "A jazz pianist falls for an aspiring actress in Los Angeles.",
      "Language": "English",
      "Country": "USA, Hong Kong",
      "Awards": "Won 6 Oscars. Another 184 wins & 224 nominations.",
      "Poster": "https://images-na.ssl-images-amazon.com/images/M/MV5BMzUzNDM2NzM2MV5BMl5BanBnXkFtZTgwNTM3NTg4OTE@._V1_SX300.jpg",
      "Ratings": [
        {
          "Source": "Internet Movie Database",
          "Value": "8.3/10"
        },
        {
          "Source": "Rotten Tomatoes",
          "Value": "93%"
        },
        {
          "Source": "Metacritic",
          "Value": "93/100"
        }
      ],
      "Metascore": "93",
      "imdbRating": "8.3",
      "imdbVotes": "232,825",
      "imdbID": "tt3783958",
      "Type": "movie",
      "DVD": "25 Apr 2017",
      "BoxOffice": "$150,459,658.00",
      "Production": "Liongate Films",
      "Website": "http://www.lalaland.movie/",
      "Response": "True"
    },
    {
      "Title": "Fracture",
      "Year": "2007",
      "Rated": "R",
      "Released": "20 Apr 2007",
      "Runtime": "113 min",
      "Genre": "Crime, Drama, Mystery",
      "Director": "Gregory Hoblit",
      "Writer": "Daniel Pyne (screenplay), Glenn Gers (screenplay), Daniel Pyne (story)",
      "Actors": "Anthony Hopkins, Ryan Gosling, David Strathairn, Rosamund Pike",
      "Plot": "An attorney, intent on climbing the career...