Track list with React JS

In this example below you will see how to do a Track list with React JS with some HTML / CSS and Javascript

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>Track list with React JS</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.min.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="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/-J0hn-/track-list-with-react-js-bogEab */
p {
  margin: 0;
}

body {
  margin: 0;
}

ul {
  box-shadow: 0 5px 20px gray;
  background: white;
  list-style: none;
  text-transform: capitalize;
  font-family: sans-serif;
  padding: 0;
  max-width: 450px;
  margin: 0 auto;
}
ul .inline {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 .50em;
  cursor: default;
}
ul .inline:hover {
  background: orangered;
  color: white;
}
ul .inline:hover .track {
  color: white;
}
ul .inline .track {
  margin-right: 1.2em;
  width: .50em;
  color: gray;
  cursor: pointer;
}
ul .inline .fa-play, ul .inline .fa-pause {
  margin-right: .90em;
  cursor: pointer;
}
ul .inline .name-time {
  padding: .80em 0;
  margin-right: auto;
  display: flex;
  flex-direction: column;
}
ul .inline .name-time .duration {
  font-size: .80em;
  margin-top: .50em;
}
ul .inline .price {
  background: white;
  color: orangered;
  font-size: 14px;
  font-weight: bold;
  border: solid 2px orangered;
  border-radius: 4px;
  padding: .50em 1em;
  cursor: pointer;
}

#total-price {
  position: absolute;
  top: 0;
  left: 0;
  background: orangered;
  color: white;
  padding: 5px 15px;
  margin: 10px;
  width: 60px;
  box-shadow: 0 5px 16px 0 lightgray;
  border-radius: 3px;
  text-align: center;
  font-family: sans-serif;
}


/*Downloaded from https://www.codeseek.co/-J0hn-/track-list-with-react-js-bogEab */
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; }

var songs = [{
  track: 1,
  name: "turnin on the screw",
  duration: "05:20",
  price: 1.29
}, {
  track: 2,
  name: "sick, sick, sick",
  duration: "03:34",
  price: 1.29
}, {
  track: 3,
  name: "i'm designer",
  duration: "04:04",
  price: 1.29
}, {
  track: 4,
  name: "into the hollow",
  duration: "03:42",
  price: 1.29
}, {
  track: 5,
  name: "misfit love",
  duration: "05:39",
  price: 1.29
}, {
  track: 6,
  name: "battery acid",
  duration: "04:06",
  price: 1.29
}, {
  track: 7,
  name: "make it wit chu",
  duration: "04:50",
  price: 1.29
}, {
  track: 8,
  name: "3s & 7s",
  duration: "03:34",
  price: 1.29
}, {
  track: 9,
  name: "suture up your future",
  duration: "04:37",
  price: 1.29
}, {
  track: 10,
  name: "river in the road",
  duration: "03:19",
  price: 1.29
}, {
  track: 11,
  name: "run, pig, run",
  duration: "04:39",
  price: 1.29
}];

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

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

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

    _this.showPlayBtn = _this.showPlayBtn.bind(_this);
    _this.togglePlayPauseBtn = _this.togglePlayPauseBtn.bind(_this);

    _this.state = {
      isHovered: false,
      isClicked: false
    };

    return _this;
  }

  _createClass(Song, [{
    key: "showPlayBtn",
    value: function showPlayBtn() {
      this.setState({ isHovered: !this.state.isHovered });
      this.setState({ isClicked: false });
    }
  }, {
    key: "togglePlayPauseBtn",
    value: function togglePlayPauseBtn() {
      this.setState({ isClicked: !this.state.isClicked });
    }
  }, {
    key: "render",
    value: function render() {
      var _props$song = this.props.song,
          track = _props$song.track,
          name = _props$song.name,
          duration = _props$song.duration,
          price = _props$song.price;
      var _state = this.state,
          isHovered = _state.isHovered,
          isClicked = _state.isClicked;

      var toggleBtn = isClicked ? 'fa fa-pause' : 'fa fa-play';

      return React.createElement(
        "li",
        { onMouseEnter: this.showPlayBtn,
          onMouseLeave: this.showPlayBtn,
          className: "inline" },
        isHovered ? React.createElement("i", { onClick: this.togglePlayPauseBtn, className: toggleBtn }) : React.createElement(
          "span",
          { className: "track" },
          track
        ),
        React.createElement(
          "div",
          { className: "name-time" },
          React.createElement(
            "p",
            { className: "songName" },
            name
          ),
          React.createElement(
            "p",
            { className: "duration" },
            duration
          )
        ),
        React.createElement(
          "button",
          { className: "price" },
          "$",
          price
        )
      );
    }
  }]);

  return Song;
}(React.Component);

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

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

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

  _createClass(Songs, [{
    key: "render",
    value: function render() {
      var songs = this.props.songs;

      return React.createElement(
        "ul",
        null,
        songs.map(function (song) {
          return React.createElement(Song, { song: song });
        })
      );
    }
  }]);

  return Songs;
}(React.Component);

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

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

    var _this3 = _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).call(this, props));

    _this3.state = {
      songs: songs
    };

    return _this3;
  }

  _createClass(App, [{
    key: "render",
    value: function render() {
      var songs = this.state.songs;

      return React.createElement(Songs, { songs: songs });
    }
  }]);

  return App;
}(React.Component);

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

Comments