Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Font Awesome
jQuery
v3.1.0
- 3 Downloads
- 103 Views
- Download Now View Demo
- 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');
}
});
});
