views/partyGoer/getSongs.ejs
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="/css/stylesheet.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
function validateForm() {
var song = document.forms['party-email-form']['selectedSong'].value;
if (song == null || song == '') {
$('#errormessage').text('You need to select a song first.')
return false;
}
}
</script>
</head>
<body>
<link rel="stylesheet" type="text/css" href="/css/getSongs.css">
<section class="container col-sm-6">
<section class="center jumbotron" style="background:rgba(0, 0, 0, .8);">
<p id='pg-title'>Please choose your party tracks for <span id="pp-party-name"><%- ppPartyName %></span> on <span id="pp-party-date"><%- ppPartyDate %></span></p>
<h2>Search for a Track</h2>
<p id='pg-subtitle'>Type a track name and click on 'Search'. Then, click on any track from the results to get a 30 second preview.</p>
<form id="song-choices">
<div class="control-group">
<div class="controls">
<input type="text" id="query" value="" style="color:black;" placeholder="Type a track name"/>
</div>
</div>
<input type="submit" name="submit" id="search" class="btn btn-inverse" value="Search" />
</form>
</section>
</section>
<section class="container col-sm-6">
<section class="center jumbotron" style="background:rgba(0, 0, 0, .8);">
<div id="results"></div>
<script src="//cdn.jsdelivr.net/handlebarsjs/3.0.0/handlebars.min.js"></script>
<script id="results-template" id="column" type="text/x-handlebars-template">
{{#each tracks.items}}
<td><div>{{artists.0.name}}: {{name}}</div><td>
<div idName="{{artists.0.name}}: {{name}}" id="{{id}}1" style="background-image:url({{album.images.0.url}})" data-track-id="{{id}}" class="cover"></div>
{{/each}}
</script>
<script>
$.each(staticData.datas, function (index, value) {
var html = Mustache.render($('#column').html(), value);
var $div = $(html);
$div.addClass("col" + (index%2 + 1));
$('#results').append($div);
});
</script>
<li style="list-style-type: none;" name="errormessage" id="errormessage" style="color:white;margin-top:1em;"></li>
<button id="addSong" class="btn btn-inverse">Add song</button>
</section>
<section class="center jumbotron" style="background:rgba(0, 0, 0, .8);">
<ul style="list-style-type: none;" class="songList"></ul>
<form action='/partygoer/getsongs' method='POST' id="party-email-form" onsubmit="return validateForm()">
<label for="email">Email:</label>
<input type="email" name="email" id='email' style="color:black;" required>
<input type="hidden" name="selectedSong" id="selected-song">
<input type="hidden" name="ppPartyName" id="pp-party-name-hidden">
<input type="hidden" name="ppPartyDate" id="pp-party-date-hidden">
<input type="submit" value="submit" id='go' class="btn btn-inverse" style="margin-right:1em;margin-bottom:.9em;">
</form>
</section>
</section>
<script type="text/javascript" src="../../../js/songSearch.js"></script>
<script type="text/javascript" src="../../../js/listUpdate.js"></script>
</body>