JSFiddle - React, Tailwind, and code Playground

by rburns3

HTML

<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.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">
      <h2>Welcome to Vote For Spidey</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 class="tab-content">
        <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">
      ...

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 = '';

voterRegister = [
	{voterId: 'v1234', voterPass: '0987', voterName: 'Chuck Norris', hasVoted: false},
  {voterId: 'v1235', voterPass: '9876', voterName: 'Michael Jackson', hasVoted: false},
  {voterId: 'v1236', voterPass: '8765', voterName: 'Captain America', hasVoted: false},
  {voterId: 'v1237', voterPass: '7654', voterName: 'Peter Parker', hasVoted: false},
];

candidateRegister = [
	{candidateId: 'c1234', candidateName: 'John Howard', votes: 0},
  {candidateId: 'c1235', candidateName: 'Tony Blair', votes: 0},
  {candidateId: 'c1236', candidateName: 'George Bush', votes: 0},
  {candidateId: 'c1237', candidateName: 'Chairman Mao', votes: 0},
  {candidateId: 'c1238', candidateName: 'Vladimir Lenin', 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){
      	candidateRegister[i].votes++;
      }
    }
   ...