JSFiddle - React, Tailwind, and code Playground

by Jayden

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Recreational Facilities</a></li>
    <li><a href="#tabs-2">Roads and Transport</a></li>
    <li><a href="#tabs-3">Health Services</a></li>
    <li><a href="#tabs-4">Water Quality</a></li>
  </ul>
  <div id="tabs-1">
    <p>The creation of parks, tennis courts, swimming pools, gyms, racing venues, camping grounds and caravan parks</p>
  </div>
  <div id="tabs-2">
    <p>Smooth out rough roads</p>
  </div>
  <div id="tabs-3">
    <p>Toilets, food inspection, vaccinations</p>
    </div>
  <div id="tabs-4">
    <p>Reduced total dissolved solids in water</p>
  </div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>






<div class="container-fluid">

  <div class="alert alert-warning user-feedback">
    
  </div>
  <div class="row">
    <div class="col-xs-12">
      <h2>The local ballot</h2>
      
      <div class="voter-login">
        <p>Please enter your login ID and password 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 class="row">
    <div class="col-xs-12 vfm-issue-wrapper">
      <h3>Select issue to vote for:</h3>
      <div class="form-group">
        <select name="vfm-issue" class="form-control vfm-issue"></select>    
      </div>
      <div class="form-group">
        <button class="btn btn-success vfm-castvote">Cast vote</button>
      </div>
     </div>
    <div class="col-xs-12">
      <ul...

CSS

body {
  margin-top:20px; 
  background: url('http://i.imgur.com/muicp15.jpg')no-repeat;
}
.user-feedback {
  float:left;
  position:absolute;
  left:30%;
  width:250px;
  top:75px;
  z-index:999;
  text-align:center;
  display:none;
}

.vfm-issue-wrapper {
  display:none;
}

JavaScript

//Tabs
$(function() {
    $( "#tabs" ).tabs();
  });
  
loggedIn = false;
voterId = '';

//The voter's details, array of objects
voterRegister = [
	{voterId: 'y9876', voterPass: '8765', voterName: 'Penelope Potato', hasVoted: false},
  {voterId: 'y9875', voterPass: '8764', voterName: 'Elizabeth Eggplant', hasVoted: false},
  {voterId: 'y9874', voterPass: '8763', voterName: 'Charlie Carrot', hasVoted: false},
  {voterId: 'y9873', voterPass: '8762', voterName: 'Daniel Dragonfruit', hasVoted: false},
];

//The issues details
issueRegister = [
	{issueId: 'x4561', issueName: 'Recreational facilities', votes: 0},
  {issueId: 'x4562', issueName: 'Roads and transport', votes: 0},
  {issueId: 'x4563', issueName: 'Health services', votes: 0},
  {issueId: 'x4564', issueName: 'Water quality', votes: 0}
];

//Click events
$('.vfm-voter').click(function() {
	voterId = $('input[name=voterId]');
  voterPass = $('input[name=voterPass]');
  voterLogin(voterId.val(), voterPass.val());
});

$('.vfm-castvote').click(function() {
	issue = $('select[name=vfm-issue]');
  castVote(issue.val(), voterId.val());
});


//Returns information if voter has voted or entered incorrect details
function voterLogin (voterId, voterPass) {
	var voter = $.grep(voterRegister, function(e){ 
  	return e.voterId === voterId && e.voterPass === voterPass; 
  });
  if(voter.length > 0){
    if(voter[0].hasVoted){
      messageUsers('You have already voted. You cannot vote again.');
    }else{
    	loggedIn = true;
      $('.voter-login').fadeOut().promise().then(function() {
	      voterId = voter[0].voterId;
        messageUsers('Hi, '+voter[0].voterName);
        $('.vfm-issue-wrapper').fadeIn();
      });
    }
  }else{
  	messageUsers('login ID or password incorrect. Please try again.');
  }
}

//Voter votes
function castVote (issueId, voter) {
  var issue = $.grep(issueRegister, function(e){ return e.issueId === issueId; });
  if(issue.length > 0){
  	for(i = 0; i < issueRegister.length; i++) {
   ...