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">login</a></li>
    <li><a href="#tabs-2">Cast Vote</a></li>
    <li><a href="#tabs-3">Admin</a></li>
  </ul>
  <div id="tabs-1">
    <p>
  </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 id="tabs-2">
    <p>
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) {
        candidateRegister[i].votes++;
      }
    }
    $('.vfm-candidates-wrapper').fadeOut();
    for (i = 0; i < voterRegister.length; i++) {
      if (voterRegister[i].voterId === voter) {
        voterRegister[i].hasVoted = true;
      }
    }

    messageUsers('Thank you for voting for: ' + candidate[0].candidateName);
    loggedIn = false;
    $('.voter-login').fadeIn().promise().then(function() {
      messageUsers('You have been logged out');
    });
    displayVotes();
  } else {
    messageUsers('Error casting vote');
  }
}</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...

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 buildCandidateVoting() {
  for (i = 0; i < candidateRegister.length; i++) {
    $('.vfm-candidates').append('<option value="' + candidateRegister[i].candidateId + '">' + candidateRegister[i].candidateName + '</option>');
 ...