Voting platform example
HTML
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row">
<div class="alert alert-warning user-feedback">
Alerts
</div>
</div>
<div class="row">
<div class="col-xs-12">
<ul class="nav nav-tabs" id="myTabs">
<li role="presentation" class="active"><a href="#home">Login</a></li>
<li role="presentation"><a href="#voting">Voting</a></li>
<li role="presentation"><a href="#admin">Admin</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<div class="row">
<div class="col-xs-12">
<div class="voter-login">
<p>Please enter your details below to vote. </p>
<div class="form-group">
<input type="text" class="form-control" name="voterId" placeholder="Voter ID" >
</div>
<div class="form-group">
<input type="password" class="form-control" name="voterPass" placeholder="Passcode" >
</div>
<div class="form-group">
<button class="btn btn-success vfm-voter">Login!</button>
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="voting">
<div class="row">
<div class="col-xs-12">
<h3>Select issue to vote for:</h3>
<div class="form-group">
<select name="community_issues" class="form-control"></select>
</div>
<div class="form-group">
<button name="cast_vote" class="btn...
CSS
body {
margin-top:20px;
}
.user-feedback {
float:left;
position:absolute;
display:none;
left:30%;
width:200px;
top:50px;
z-index:999;
text-align:center;
}
JavaScript
// global variable setup
isLoggedIn = false;
isAdmin = false;
var voter;
// user db setup
var site_users = [
{voterId: 'v1234', voterPass: '0987', voterName: 'Chuck Norris', hasVoted: false, postcode:2950, isAdmin:true},
{voterId: 'v1235', voterPass: '9876', voterName: 'Michael Jackson', hasVoted: false, postcode:2345},
{voterId: 'v1236', voterPass: '8765', voterName: 'Captain America', hasVoted: false, postcode:2683},
{voterId: 'v1237', voterPass: '7654', voterName: 'Peter Parker', hasVoted: false, postcode:2098},
];
var community_issues = [];
//Load community issues into the UI
function loadCommunityIssues() {
if(community_issues.length == 0){
$('select[name=community_issues]').append('<option class="list-group-item">No issues loaded. Please see an Admin</option>');
$('button[name=cast_vote]').attr('disabled', true);
}else{
//Clear the element just to make sure we get the right number of elements in it.
$('select[name=community_issues]').html('');
//Reset the disabled button
$('button[name=cast_vote]').attr('disabled', false);
console.log(community_issues);
for(i = 0; i < community_issues.length; i++) {
$('select[name=community_issues]').append('<option value="'+community_issues[i].id+'" class="list-group-item">'+community_issues[i].title+'</option>');
}
}
}
//Display votes in the Admin UI
function displayVotes() {
$('.final_votes').html('');
for (i = 0; i < community_issues.length; i++){
$('.final_votes').append('<li class="list-group-item"><span class="label label-default label-pill pull-right"> '+community_issues[i].votes+'</span>'+community_issues[i].title+'</li>');
}
}
//Admin create issues form
$('button[name=add_issue]').click(function() {
var issue = $('input[name=new_community_issue]');
if(issue.val() == ''){
messageUsers("Please enter an issue to store first.");
}else{
community_issues.push({id:(community_issues.length + 1), title:issue.val(), votes:0});
...