Array Of Objects Track List from Play Store

In this example below you will see how to do a Array Of Objects Track List from Play Store with some HTML / CSS and Javascript

SCSS and jquery, no HTML. I used an array of objects to store the track number, song name, song duration and price. Used a forEach to create an unordered list to store all the information. When the user hovers on a song, the track number changes to a play button where then user can toggle the play/pause animation

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 from Play Store with Mustache.js</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>

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

  
</head>

<body>

  <ul></ul>
<div id="total-price"></div>
<template id=playlist-template>
    <li class="inline">
      <span class="track"> {{track}} </span>
      <div class="name-time">
        <p class="songName"> {{name}} </p>
        <p class="duration"> {{duration}} </p>    
      </div>
      <button class="price"> ${{price}} </button>
    </li>
  </template>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/-J0hn-/array-of-objects-track-list-from-play-store-QdaZpV */
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 .track {
  margin-right: 1.2em;
  width: .50em;
  color: gray;
  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-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-/array-of-objects-track-list-from-play-store-QdaZpV */
$(document).ready(function() {
  var $ul = $('ul');
  var $template = $('#playlist-template').html();
  var tracks = '';
  
  var qotsa = [
    {
      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
    },
  ];
  
  function addSong(song) {
    tracks += Mustache.render($template, song);
    $ul.html(tracks);
  }

  // GET TOTAL PRICE OF ALBUM
  const total_price = qotsa.reduce(function(sum, total) {
      return +((sum + total.price).toFixed(2));
  }, 0);
  $('#total-price').html(`Total $${total_price}`);
  
  //LOOP THROUGH THE ARRAY & STORE IN UL
  qotsa.forEach(function(song){
    addSong(song);
  });
  
 //WHEN HOVER, CHANGE THE TRACK NUMBER TO A PLAY BUTTON
  var $div = $('ul').children();
  $div.each(function() {
    var $trackNumber = $(this).find('.track').text();

    $(this).hover(function() {
      $(this).find('.track').text('').addClass('fa fa-play').css('color', 'white');
    }, function() {
      $(this).find('.track').text($trackNumber).removeClass('fa fa-play fa-pause').css('color', 'gray');
    });
  });

  //TOGGLE PLAY/PAUSE BUTTON
  var $span = $div.find('span');
  $span.on('click', function() {
    if ($(this).hasClass('fa fa-play')) {
      $(this).removeClass('fa fa-play').addClass('fa fa-pause');
    } else if ($(this).hasClass('fa fa-pause')) {
      $(this).removeClass('fa fa-pause').addClass('fa fa-play');
    }
  });
  
});

Comments