React IMDB website

In this example below you will see how to do a React IMDB website with some HTML / CSS and Javascript

Added search filter and modal using React-Modal. Design Concept by George Vasyagin: https://dribbble.com/shots/2266601-IMDb-design-concept/attachments/425192

Thumbnail
This awesome code was written by -J0hn-, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright -J0hn- ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>React IMDB website</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="app"></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-modal/3.1.10/react-modal.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/-J0hn-/react-imdb-website-aVaLQP */
@import url("https://fonts.googleapis.com/css?family=Poppins");
/***************
VARIABLES
****************/
/****************
GLOBAL
*****************/
*, *:before, *:after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
}

img {
  width: 100%;
  height: 100%;
}

/****************
WRAPPER
*****************/
#wrapper {
  min-width: 1000px;
  background-color: whitesmoke;
  font-family: 'Poppins', sans-serif;
  box-shadow: 0 0 15px gray;
}

/*************
HEADER & NAV
**************/
header {
  height: 600px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("https://68.media.tumblr.com/37aa774749579b5a20e35fd40fc269e7/tumblr_ob7vuzk7qP1uwbmnzo4_1280.jpg") no-repeat center center;
  background-size: cover;
  display: flex;
  flex-direction: column;
}
header nav {
  padding: .40em 1em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header nav .logo {
  width: 4.8em;
  height: 4.8em;
  cursor: pointer;
}
header nav .nav {
  text-transform: uppercase;
  color: white;
  display: flex;
  justify-content: center;
}
header nav .nav li {
  font-size: .90em;
  padding: 0 1em;
  cursor: pointer;
  transition: color .25s ease;
}
header nav .nav li:hover {
  color: #dcbe00;
}
header nav .nav .active {
  color: #dcbe00;
}
header nav .user {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 80px;
}
header nav .user .user-settings {
  color: #cccccc;
  cursor: pointer;
}
header nav .user .user-settings:hover {
  color: #737373;
}
header nav .user .user-icon {
  width: 50px;
  border-radius: 50px;
  cursor: pointer;
}
header .movie-info {
  margin-top: auto;
  margin-bottom: auto;
  text-transform: uppercase;
  color: white;
  width: 400px;
  margin-left: 10em;
}
header .movie-info h1 {
  font-size: 3.8em;
  line-height: 1.2;
}
header .movie-info .genre {
  list-style: none;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 1.5em;
}
header .movie-info .genre li {
  padding-right: .90em;
  padding-left: .80em;
  font-size: .75em;
}
header .movie-info button {
  cursor: pointer;
  border: 0;
  padding: 1em 1.5em;
  border-radius: 20px;
  background: #dcbe00;
  text-transform: uppercase;
  font-weight: 600;
  font-size: .75em;
  margin-bottom: 8.5em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header .movie-info button .fa-play-circle-o {
  font-size: 1.7em;
  margin-left: .50em;
}
header .movie-info h3, header .movie-info h4 {
  font-weight: 200;
}
header .movie-info h3 {
  text-transform: initial;
}
header .movie-info h4 {
  color: #dcbe00;
}

/**********************
    MAIN (MOVIES)
***********************/
main {
  width: 800px;
  background: whitesmoke;
  margin: auto;
  -webkit-transform: translateY(-5%);
          transform: translateY(-5%);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding: 1.5em 2em;
}
main .options {
  display: flex;
  text-align: center;
  text-transform: uppercase;
}
main .options .active {
  color: #dcbe00;
  border-bottom: solid 2px #dcbe00;
}
main .options li {
  flex: 1;
  padding-bottom: 1em;
  border-bottom: solid 1px lightgray;
  font-weight: 600;
  font-size: .80em;
  color: #737373;
  cursor: pointer;
}
main .options li:hover {
  color: #dcbe00;
  border-bottom-color: #dcbe00;
  border-bottom-width: 2px;
}
main #movies {
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
main #movies figure {
  background-color: white;
  width: 14em;
  margin: .50em;
  box-shadow: 0 5px 15px gray;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: all .3s linear;
}
main #movies figure:hover {
  -webkit-transform: scale(1.04);
          transform: scale(1.04);
  box-shadow: 0 -3px 40px gray;
}
main #movies figure img {
  height: 21em;
}
main #movies figure figcaption {
  line-height: 2;
  padding: 0 .80em;
  height: 90px;
}
main #movies figure figcaption h5 {
  text-transform: uppercase;
  font-weight: 600;
  color: #737373;
}
main #movies figure figcaption p {
  text-transform: capitalize;
  font-size: .70em;
  font-weight: 600;
  color: #dcbe00;
}
main #movies figure figcaption .rating {
  display: flex;
  align-items: center;
}
main #movies figure figcaption .rating .fa-heart {
  color: #fa5050;
  margin: .50em .50em .50em 0;
}
main #movies figure figcaption .rating h4 {
  color: black;
}
main #movies figure figcaption button {
  border: 0;
  font-size: 17px;
  cursor: pointer;
  color: #dcbe00;
  background-color: white;
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 8px;
}

/************
LOADING ICON
************/
.loading {
  background-color: #dcbe00;
  color: white;
  font-size: 1.3em;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1.2em auto;
}

/************
FOOTER
************/
footer {
  display: flex;
  flex-direction: column;
  background-color: white;
}
footer div {
  display: flex;
  align-items: center;
  padding: 1em;
  color: silver;
}
footer div h3 {
  flex: 1;
}
footer div .social-links .social-link {
  padding: 0 .80em;
  font-size: 1.3em;
  cursor: pointer;
}
footer div .social-links .social-link:hover {
  color: #5a5a5a;
}
footer div p {
  text-transform: uppercase;
  font-size: .90em;
  text-align: right;
  flex: 1;
}
footer a {
  text-decoration: none;
  color: #dcbe00;
  text-transform: uppercase;
  font-size: .70em;
  border-top: solid 1px #f3f3f3;
  text-align: center;
  padding: .50em;
}

/********************
RANGE & SEARCH INPUT
*********************/
#forms {
  padding: 20px 10px;
  display: flex;
  align-items: center;
}

#range-form {
  flex: 1;
  margin-right: 5px;
}
#range-form p {
  letter-spacing: 1px;
  font-size: 12px;
  font-weight: bold;
  color: #4d4d4d;
}
#range-form .group {
  display: flex;
  align-items: center;
}
#range-form .group #range {
  -webkit-appearance: none;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  margin-right: 10px;
}
#range-form .group #range::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dcbe00;
  position: absolute;
  z-index: -1;
}
#range-form .group #results {
  width: 28px;
  text-align: center;
  font-size: 13px;
  padding: 2px 4px;
  border-radius: 4px;
  background: white;
  box-shadow: 0 2px 5px 1px lightgray;
}

::-webkit-input-placeholder {
  color: lightgray;
  font-style: italic;
  letter-spacing: 1px;
}

:-ms-input-placeholder {
  color: lightgray;
  font-style: italic;
  letter-spacing: 1px;
}

::-ms-input-placeholder {
  color: lightgray;
  font-style: italic;
  letter-spacing: 1px;
}

::placeholder {
  color: lightgray;
  font-style: italic;
  letter-spacing: 1px;
}

#search-input {
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
}
#search-input #search {
  letter-spacing: 1px;
  width: 100%;
  background: none;
  border: none;
  border-bottom: solid 2px lightgray;
  padding: 5px 20px 5px 10px;
  color: gray;
  transition: border-bottom-color .3s;
}
#search-input #search:focus {
  outline: none;
  border-bottom-color: #dcbe00;
}
#search-input .fa-search {
  color: lightgray;
  position: absolute;
  right: 0;
  padding-right: 8px;
  transform: rotate(95deg);
  -webkit-transform: rotate(95deg);
  -ms-transform: rotate(95deg);
  padding: 0;
}

/*
CUSTOM SLIDER
*/
#forms #range-form .group #range {
  -webkit-appearance: none;
  outline: none;
  background: #dcbe00;
  height: 3px;
  border-radius: 5px;
}
#forms #range-form .group #range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #dcbe00;
}

/* FIREFOX */
#range::-moz-range-thumb {
  border: none;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: #dcbe00;
  cursor: pointer;
}

#range::-moz-range-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  background: #dcbe00;
  border-radius: 5px;
}

/**************
MODAL
***************/
.modal {
  display: flex;
  position: relative;
}
.modal .close-modal {
  position: absolute;
  top: 10px;
  right: 10px;
  font-weight: bold;
  color: #999999;
  cursor: pointer;
}
.modal img {
  width: 320px;
  height: 512px;
  display: block;
}
.modal > div {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.modal > div h1 {
  font-weight: 100;
  font-family: 'Poppins', sans-serif;
  color: #737373;
}
.modal > div a {
  text-transform: uppercase;
  color: lightblue;
  font-weight: bold;
  font-size: 15px;
  margin-bottom: 20px;
  padding: 0 30px;
}

.modal-movie-title {
  background: white;
  box-shadow: 15px 3px 50px 2px lightgray;
  padding: 40px 40px 20px 40px;
  margin: 40px 50px 30px -60px;
}
.modal-movie-title h1 {
  text-transform: uppercase;
}

.modal .modal-genre {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: solid 1px #ededed;
  font-weight: bold;
  font-family: 'Poppins', sans-serif;
}
.modal .modal-genre .genre {
  color: lightblue;
  margin-right: auto;
}
.modal .modal-genre .rated, .modal .modal-genre .duration {
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  background: #f4f4f4;
  padding: 5px 0;
  width: 70px;
  margin: 0 5px;
  border-radius: 10px;
  color: #737373;
}
.modal .modal-genre .rated {
  text-transform: uppercase;
}

.fa-heart {
  color: #fa5050;
}

.fa-thumbs-down {
  color: #0050f0;
}

.fa-thumbs-up {
  color: #00f000;
}

.fa-trophy {
  color: #ffdd1a;
}

.movie-numbers {
  display: flex;
}
.movie-numbers > div {
  flex: 1;
  text-align: center;
}

.movie-numbers i {
  font-size: 22px;
  margin-right: 8px;
}
.movie-numbers h4 {
  font-size: 26px;
  font-weight: 100;
  margin: 0;
  color: #737373;
}
.movie-numbers p {
  font-family: 'Poppins';
  font-size: 13px;
  color: gray;
  text-align: center;
  margin: 0;
}

.modal-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.modal-rating div {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  padding: 0;
}

.score {
  display: flex;
  flex-direction: column;
}
.score div {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 5px;
}

.awards {
  display: flex;
  flex-direction: column;
}
.awards div {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 5px;
}

.modal .movie-description {
  font-family: 'Poppins', sans-serif;
  color: #737373;
  margin-bottom: 15px;
  padding: 0 30px;
}

.modal .modal-buttons {
  margin-top: auto;
  display: flex;
}
.modal .modal-buttons button {
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  border: none;
  text-transform: uppercase;
  flex: 1;
  padding: 25px 20px;
}
.modal .modal-buttons button .fa {
  margin-left: 20px;
}
.modal .modal-buttons button:first-child {
  background: #dcbe00;
  color: white;
}
.modal .modal-buttons button:first-child:hover {
  background: #c3a800;
}
.modal .modal-buttons button:last-child {
  background: #404040;
  color: #dcbe00;
}
.modal .modal-buttons button:last-child:hover {
  background: #333333;
}


/*Downloaded from https://www.codeseek.co/-J0hn-/react-imdb-website-aVaLQP */
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

ReactModal.setAppElement('#app');

var customStyles = {
  overlay: {
    position: 'fixed',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'rgba(0, 0, 0, .8)'
  },
  content: {
    position: 'absolute',
    top: '40px',
    left: '100px',
    right: '100px',
    bottom: 'auto',
    background: '#fff',
    overflow: 'auto',
    WebkitOverflowScrolling: 'touch',
    borderRadius: '0px',
    outline: 'none'
  }

};

var movies = [{
  title: 'Mad Max: Fury Road',
  genre: ['Action', 'Adventure', 'Sci-Fi'],
  rating: 8.3,
  poster: 'https://s-media-cache-ak0.pinimg.com/originals/ce/0c/93/ce0c93d50ae68922d1f4f6667c95e1a8.jpg',
  description: 'A woman rebels against a tyrannical ruler in postapocalyptic Australia in search for her home-land with the help of a group of female prisoners, a psychotic worshipper, and a drifter named Max.',
  duration: '2h',
  rated: 'r',
  score: 90,
  awards: 88
}, {
  title: 'The Hunger Games: Mockingjay Part 1',
  genre: ['Adventure', 'Sci-Fi', 'Thriller'],
  rating: 6.8,
  poster: 'https://1.bp.blogspot.com/-Ds0sudZmSq4/Vgxrr75E77I/AAAAAAAAREo/sZkZW5YMDTw/s1600/Mockingjay%2BPart%2B1.jpg',
  description: 'Katniss Everdeen is in District 13 after she shatters the games forever. Under the leadership of President Coin and the advice of her trusted friends, Katniss spreads her wings as she fights to save Peeta and a nation moved by her courage.',
  duration: '2h 3m',
  rated: 'pg-13',
  score: 64,
  awards: 8
}, {
  title: 'Jurassic World',
  genre: ['Action', 'Adventure', 'Sci-Fi'],
  rating: 7.2,
  poster: 'https://s-media-cache-ak0.pinimg.com/736x/0b/ab/9a/0bab9a9c671dbb7aa8626eec44a0195f.jpg',
  description: 'A new theme park, built on the original site of Jurassic Park, creates a genetically modified hybrid dinosaur, which escapes containment and goes on a killing spree.',
  duration: '2h 4m',
  rated: 'pg-13',
  score: 59,
  awards: 8
}, {
  title: 'Everest',
  genre: ['Adventure', 'Drame', 'Thriller'],
  rating: 7.4,
  poster: 'http://www.impawards.com/2015/posters/everest_ver4.jpg',
  description: 'The story of New Zealand\'s Robert "Rob" Edwin Hall, who on May 10, 1996, together with Scott Fischer, teamed up on a joint expedition to ascend Mount Everest.',
  duration: '2h 1m',
  rated: 'pg-13',
  score: 64,
  awards: 0
}, {
  title: 'Insurgent',
  genre: ['Adventure', 'Sci-Fi', 'Thriller'],
  rating: 6.4,
  poster: 'http://cdn2-www.comingsoon.net/assets/uploads/2015/01/FIN16_Insurgent_Guns_1Sht_Trim-1422379653-mtv-14224534611.jpg',
  description: 'Beatrice Prior must confront her inner demons and continue her fight against a powerful alliance which threatens to tear her society apart with the help from others on her side.',
  duration: '1h 59m',
  rated: 'pg-13',
  score: 42,
  awards: 3
}, {
  title: 'Sicario',
  genre: ['Action', 'Crime', 'Drama'],
  rating: 8,
  poster: 'https://s-media-cache-ak0.pinimg.com/564x/7f/a1/5c/7fa15c26aa2cb48562ea37bbc177be74.jpg',
  description: 'An idealistic FBI agent is enlisted by a government task force to aid in the escalating war against drugs at the border area between the U.S. and Mexico.',
  duration: '2h 1m',
  rated: 'r',
  score: 82,
  awards: 15
}];

var text_truncate = function text_truncate(str, length, ending) {
  if (length == null) {
    length = 100;
  }
  if (ending == null) {
    ending = '...';
  }
  if (str.length > length) {
    return str.substring(0, length - ending.length) + ending;
  } else {
    return str;
  }
};

var Nav = function Nav() {
  return React.createElement(
    'nav',
    null,
    React.createElement('img', { className: 'logo', src: 'http://ia.media-imdb.com/images/M/MV5BMTczNjM0NDY0Ml5BMl5BcG5nXkFtZTgwMTk1MzQ2OTE@._V1_.png' }),
    React.createElement(
      'ul',
      { className: 'nav' },
      React.createElement(
        'li',
        { className: 'active' },
        'movies'
      ),
      React.createElement(
        'li',
        null,
        'celebs & photos'
      ),
      React.createElement(
        'li',
        null,
        'community'
      ),
      React.createElement(
        'li',
        null,
        'news'
      )
    ),
    React.createElement(
      'div',
      { className: 'user' },
      React.createElement('i', { className: 'fa fa-gear user-settings' }),
      React.createElement('img', { className: 'user-icon', src: 'https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg' })
    )
  );
};

var Header = function Header() {
  return React.createElement(
    'header',
    null,
    React.createElement(Nav, null),
    React.createElement(
      'div',
      { className: 'movie-info' },
      React.createElement(
        'h1',
        null,
        'the martian'
      ),
      React.createElement(
        'ul',
        { className: 'genre' },
        React.createElement(
          'li',
          null,
          'adventure'
        ),
        React.createElement(
          'li',
          null,
          'sci-fi'
        ),
        React.createElement(
          'li',
          null,
          'thriller'
        )
      ),
      React.createElement(
        'button',
        null,
        'watch trailer ',
        React.createElement('i', { className: 'fa fa-play-circle-o' })
      ),
      React.createElement(
        'h3',
        null,
        'In theaters'
      ),
      React.createElement(
        'h4',
        null,
        '15 Oct, 2015 (USA)'
      )
    )
  );
};

var Tabs = function Tabs() {
  return React.createElement(
    'ul',
    { className: 'options' },
    React.createElement(
      'li',
      { className: 'active' },
      'in theaters'
    ),
    React.createElement(
      'li',
      null,
      'coming soon'
    ),
    React.createElement(
      'li',
      null,
      'charts'
    ),
    React.createElement(
      'li',
      null,
      'tv series'
    ),
    React.createElement(
      'li',
      null,
      'trailers'
    ),
    React.createElement(
      'li',
      null,
      'more'
    )
  );
};

var Forms = function (_React$Component) {
  _inherits(Forms, _React$Component);

  function Forms(props) {
    _classCallCheck(this, Forms);

    var _this = _possibleConstructorReturn(this, (Forms.__proto__ || Object.getPrototypeOf(Forms)).call(this, props));

    _this.updateSearch = _this.updateSearch.bind(_this);
    return _this;
  }

  _createClass(Forms, [{
    key: 'updateSearch',
    value: function updateSearch(newSearch) {
      this.props.updateSearch(newSearch);
    }
  }, {
    key: 'render',
    value: function render() {
      // console.log(this.props);
      var search = this.props.search;

      return React.createElement(
        'div',
        { id: 'forms' },
        React.createElement(
          'form',
          { id: 'range-form' },
          React.createElement(
            'p',
            null,
            'IMDb Rating'
          ),
          React.createElement(
            'div',
            { className: 'group' },
            React.createElement('input', { id: 'range',
              type: 'range',
              min: '6.0',
              max: '8.3',
              step: '0.1',
              value: '6'
            }),
            React.createElement(
              'p',
              { id: 'results' },
              '6'
            )
          )
        ),
        React.createElement(
          'div',
          { id: 'search-input' },
          React.createElement('input', { id: 'search',
            type: 'search',
            results: '5',
            placeholder: 'Search Movies...',
            value: search,
            onChange: this.updateSearch
          }),
          React.createElement('i', { className: 'fa fa-search' })
        )
      );
    }
  }]);

  return Forms;
}(React.Component);

var Movie = function (_React$Component2) {
  _inherits(Movie, _React$Component2);

  function Movie(props) {
    _classCallCheck(this, Movie);

    var _this2 = _possibleConstructorReturn(this, (Movie.__proto__ || Object.getPrototypeOf(Movie)).call(this, props));

    _this2.openModal = function () {
      _this2.setState({ showModal: true });
    };

    _this2.closeModal = function () {
      _this2.setState({ showModal: false });
    };

    _this2.state = {
      showModal: false
    };
    return _this2;
  }

  _createClass(Movie, [{
    key: 'render',
    value: function render() {
      var showModal = this.state.showModal;
      var movie = this.props.movie;


      return React.createElement(
        'div',
        null,
        React.createElement(
          'figure',
          { onClick: this.openModal },
          React.createElement('img', { src: movie.poster }),
          React.createElement(
            'figcaption',
            null,
            React.createElement(
              'h5',
              null,
              text_truncate(movie.title, 26)
            ),
            React.createElement(
              'p',
              null,
              movie.genre.join(', ')
            ),
            React.createElement(
              'div',
              { className: 'rating' },
              React.createElement('i', { className: 'fa fa-heart' }),
              React.createElement(
                'h4',
                null,
                movie.rating
              )
            )
          )
        ),
        React.createElement(Modal, { showModal: showModal, closeModal: this.closeModal, movie: movie })
      );
    }
  }]);

  return Movie;
}(React.Component);

var Modal = function Modal(_ref) {
  var showModal = _ref.showModal,
      closeModal = _ref.closeModal,
      movie = _ref.movie;
  return React.createElement(
    ReactModal,
    {
      className: 'modal',
      isOpen: showModal,
      onRequestClose: closeModal,
      shouldCloseOnOverlayClick: true,
      style: customStyles
    },
    React.createElement(
      'p',
      { onClick: closeModal, className: 'close-modal' },
      'X'
    ),
    React.createElement('img', { src: movie.poster, alt: movie.title }),
    React.createElement(
      'div',
      null,
      React.createElement(
        'div',
        { className: 'modal-movie-title' },
        React.createElement(
          'h1',
          null,
          movie.title
        ),
        React.createElement(
          'div',
          { className: 'modal-genre' },
          React.createElement(
            'p',
            { className: 'genre' },
            movie.genre.join(', ')
          ),
          React.createElement(
            'span',
            { className: 'rated' },
            movie.rated
          ),
          React.createElement(
            'span',
            { className: 'duration' },
            movie.duration
          )
        ),
        React.createElement(
          'div',
          { className: 'movie-numbers' },
          React.createElement(
            'div',
            { className: 'modal-rating' },
            React.createElement(
              'div',
              null,
              React.createElement('i', { className: 'fa fa-heart' }),
              React.createElement(
                'h4',
                null,
                movie.rating
              )
            ),
            React.createElement(
              'p',
              null,
              'Rating'
            )
          ),
          React.createElement(
            'div',
            { className: 'score' },
            React.createElement(
              'div',
              null,
              React.createElement('i', { className: movie.score < 70 ? 'fa fa-thumbs-down' : 'fa fa-thumbs-up' }),
              React.createElement(
                'h4',
                null,
                movie.score
              )
            ),
            React.createElement(
              'p',
              null,
              'Score'
            )
          ),
          React.createElement(
            'div',
            { className: 'awards' },
            React.createElement(
              'div',
              null,
              React.createElement('i', { className: 'fa fa-trophy' }),
              React.createElement(
                'h4',
                null,
                movie.awards
              )
            ),
            React.createElement(
              'p',
              null,
              'Awards'
            )
          )
        )
      ),
      React.createElement(
        'p',
        { className: 'movie-description' },
        movie.description
      ),
      React.createElement(
        'a',
        { href: '#' },
        'full movie profile'
      ),
      React.createElement(
        'div',
        { className: 'modal-buttons' },
        React.createElement(
          'button',
          null,
          'watch trailer ',
          React.createElement('i', { className: 'fa fa-caret-right' })
        ),
        React.createElement(
          'button',
          null,
          'to watchlist ',
          React.createElement('i', { className: 'fa fa-star' })
        )
      )
    )
  );
};

var Movies = function (_React$Component3) {
  _inherits(Movies, _React$Component3);

  function Movies() {
    _classCallCheck(this, Movies);

    return _possibleConstructorReturn(this, (Movies.__proto__ || Object.getPrototypeOf(Movies)).apply(this, arguments));
  }

  _createClass(Movies, [{
    key: 'render',
    value: function render() {
      // console.log(this.props);
      var _props = this.props,
          movies = _props.movies,
          search = _props.search;

      var filterMovies = movies.filter(function (movie) {
        return movie.title.toLowerCase().includes(search.toLowerCase());
      });
      return React.createElement(
        'section',
        { id: 'movies' },
        filterMovies.map(function (movie) {
          return React.createElement(Movie, { movie: movie });
        })
      );
    }
  }]);

  return Movies;
}(React.Component);

var Main = function (_React$Component4) {
  _inherits(Main, _React$Component4);

  function Main(props) {
    _classCallCheck(this, Main);

    var _this4 = _possibleConstructorReturn(this, (Main.__proto__ || Object.getPrototypeOf(Main)).call(this, props));

    _this4.updateSearch = _this4.updateSearch.bind(_this4);
    _this4.state = {
      movies: movies,
      search: ''
    };
    return _this4;
  }

  _createClass(Main, [{
    key: 'updateSearch',
    value: function updateSearch(e) {
      e.preventDefault();
      this.setState({
        search: e.target.value.substr(0, 26)
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _state = this.state,
          movies = _state.movies,
          search = _state.search;

      return React.createElement(
        'main',
        null,
        React.createElement(Tabs, null),
        React.createElement(Forms, { search: search, updateSearch: this.updateSearch }),
        React.createElement(Movies, { movies: movies, search: search })
      );
    }
  }]);

  return Main;
}(React.Component);

var LoadingIcon = function LoadingIcon() {
  return React.createElement(
    'div',
    { className: 'loading' },
    React.createElement('i', { className: 'fa fa-spinner fa-spin' })
  );
};

var Footer = function Footer() {
  return React.createElement(
    'footer',
    null,
    React.createElement(
      'div',
      null,
      React.createElement(
        'h3',
        null,
        'IMDb'
      ),
      React.createElement(
        'div',
        { className: 'social-links' },
        React.createElement('i', { className: 'fa fa-twitter social-link' }),
        React.createElement('i', { className: 'fa fa-facebook social-link' }),
        React.createElement('i', { className: 'fa fa-instagram social-link' })
      ),
      React.createElement(
        'p',
        null,
        '1990-2017 imdb.com, inc'
      )
    ),
    React.createElement(
      'a',
      { href: '#' },
      'show menu'
    )
  );
};

var App = function (_React$Component5) {
  _inherits(App, _React$Component5);

  function App() {
    _classCallCheck(this, App);

    return _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).apply(this, arguments));
  }

  _createClass(App, [{
    key: 'render',
    value: function render() {
      return React.createElement(
        'div',
        { id: 'wrapper' },
        React.createElement(Header, null),
        React.createElement(Main, null),
        React.createElement(LoadingIcon, null),
        React.createElement(Footer, null)
      );
    }
  }]);

  return App;
}(React.Component);

var app = document.getElementById('app');
ReactDOM.render(React.createElement(App, null), app);

Comments