JSFiddle - React, Tailwind, and code Playground

by rburns3

HTML

<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">
      <h2>Welcome to VoteForSpidey</h2>
      <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>
      </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 actor 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>


           
              <button name="logout" class="btn btn-danger">Cancel and Logout</button>
            </div>
          </div>
        </div>
     ...

CSS

body {
  margin-top: 20px;
}

.user-feedback{
float: left;
  position: absolute;
  left: 30%;
  width: 200px;
  top: 50px;
  z-index: 999;
  text-align: center;
  display: none;
}

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

JavaScript

loggedIn = false
voterId = ''

voterIds = [{
  voterId: 'r122',
  voterPasscode: '5678',
  votersName: 'Ryan Burns',
  hasVoted: false
}, {
  voterId: 'j1122',
  voterPasscode: '0123',
  votersName: 'Jake White',
  hasVoted: false
}, {
  voterId: 'l122',
  voterPasscode: '3456',
  votersName: 'Luke Parsons',
  hasVoted: false
}, {
  voterId: 'm112',
  voterPasscode: '8901',
  votersName: 'Marley M-C',
  hasVoted: false
}, {
  voterId: 'e122',
  voterPasscode: '2345',
  votersName: 'Ethan Sorensen',
  hasVoted: false
}, ];

candidates = [{
  candidateId: 't1234',
  candidateName: 'Tobey Maguire ',
  votes: 0
}, {
  candidateId: 'a9876',
  candidateName: 'Andrew Garfield ',
  votes: 0
}, {
  candidateId: 't5678',
  candidateName: 'Tom Holland',
  votes: 0
}];


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


$('.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 ===...