JSFiddle - React, Tailwind, and code Playground

by rburns3

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">Welcome</a></li>
    <li><a href="#tabs-2">Login</a></li>
    <li><a href="#tabs-3">Place Vote</a></li>
  </ul>
  <div id="tabs-1">
    <p>If you 18 or above click tab 2</p>
  </div>
  <div id="tabs-2">
    <p>Check email for your login ID</p>
  </div>
  <div id="tabs-3">
    <p>This content in the third</p>
    <p>And you can have as much content here as you want.</p>
  </div>
</div>
<div class="container-fluid">

  <div class="alert alert-warning user-feedback">
    Some text here
  </div>
  <div class="row">
    <div class="col-xs-12">
      <h2>Welcome to VoteForMe</h2>
      
      <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 class="row">
    <div class="col-xs-12 vfm-candidates-wrapper">
      <h3>Select candidate to vote for:</h3>
      <div class="form-group">
        <select name="vfm-candidate" class="form-control vfm-candidates"></select>
      </div>
      <div class="form-group">
        <button class="btn btn-success vfm-castvote">Cast vote!</button>
      </div>
     </div>
    <div class="col-xs-12">
      <ul class="list-group vfm-candidate-votes"></ul>
    </div>
  </div>
</div>

CSS

body {
  margin:30px;
}

JavaScript

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

loginDetails = [
	{voterId: 'a1232', passwords: '7890', name: 'Jake White', hasVoted: false},
  {voterId: 'a7809', passwords: '0987', name: 'Ethan S', hasVoted: false},
  {voterId: 'a3322', passwords: '1234', name: 'Marely M-C', hasVoted: false},
  {voterId: 'a1984', passwords: '4321', name: 'Luke Parson', hasVoted: false},
];

ContestantsId = [
	{constestantId: 'c1234', contestantName: 'John Howard', votes: 0},
  {constestantId: 'c1234', contestantName: 'John Howard', votes: 0},
  {constestantId: 'c1234', contestantName: 'John Howard', votes: 0},
  {constestantId: 'c1234', contestantName: 'John Howard', votes: 0},
  {constestantId: 'c1234', contestantName: 'John Howard', votes: 0},
];

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

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

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('Looks like you\'ve voted! You cannot vote again.');
    }else{
    	loggedIn = true;
      $('.voter-login').fadeOut().promise().then(function() {
	      voterId = voter[0].voterId;
        messageUsers('Welcome, '+voter[0].voterName);
        $('.vfm-candidates-wrapper').fadeIn();
      });
    }
  }else{
  	messageUsers('Voter details incorrect. Please try again.');
  }
}

function castVote (candidateId, voter) {
	var candidate = $.grep(candidateRegister, function(e){ return e.candidateId === candidateId; });
  if(candidate.length > 0){
  	for(i = 0; i < candidateRegister.length; i++) {
    	if(candidateRegister[i].candidateId === candidateId){
     ...