JSFiddle - React, Tailwind, and code Playground

by ryan fosse

HTML

<div class="container-fluid">

  <div class="alert alert-warning user-feedback">
    Some text here
  </div>
  <div class="row">
    <div class="col-xs-12">
      <h2>Whos the new presednet vote now
     </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="text" class="form-control" name="voterPass" placeholder="Passcode">
        </div>
        <div class="form-group">
          <button class="btn btn-success" name="login">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-top:20px;
}
.user-feedback {
  float:left;
  position:absolute;
  left:30%;
  width:200px;
  top:50px;
  z-index:999;
  text-align:center;
  display:none;
}

JavaScript

isLoggedIn = false;
voter = false;

var voter_access = [{
  voterID: 'Ryan_fosse',
  voterpass: 'v11111',
  has_voted: false,
  access: 'admin'
}, {
  voterID: 'Bryce_Tooth',
  voterpass: 'v12222',
  votes: 0,
  access: 'admin'
}, {
  voterID: 'Matt_Johns',
  voterpass: 'v13333',
  votes: 0,
  access: "user"
}, {
  voterID: 'Bailey_Hackett',
  voterpass: 'v14444',
  votes: 0,
  access: 'user'
}, {
  voterID: 'Gage_Rogers',
  voterpass: 'v15555',
  votes: 0,
  access: 'user'
}, {
  voterID: 'Nic_job',
  voterpass: 'v16666',
  votes: 0,
  access: 'user'
}, {
  voterID: 'Jack_Tompson',
  voterpass: 'v1777',
  votes: 0,
  access: 'user'
}];

$('button[name=login]').click(function() {
 var voterId = $('input[name=voterId]');
 var pass = $('input[name=voterPass]');
 for(i = 0; i < voter_access.length; i++){
 console.log(voter_access[i].voterID, voter_access[i].voterpass, voterId.val(), pass.val());
 	if(pass.val() == voter_access[i].voterpass){
  	//Allow access
    isLoggedIn = true;
    voter = voter_access[i];
  }else{
  	messageUser("No login with that combination");
  }
 }
});

function messageUser(message){
	$('.user-feedback').html(message).fadeIn().delay(3000).promise().then(function() {
  	$(this).fadeOut().html('');
  });
}

// these is a information data base
  var voter_register = [{
        id: 3432,
        name: "Bailey_Hackett",
        email: "[email protected]",
        postcode: "2567",
        age: 18
},{
          id: 9759,
        name: "Matt_Johns",
        email: "[email protected]",
        postcode: "2454",
        age: 56
},{
          id: 08786,
        name: "Nic_Job",
        email: "[email protected]",
        postcode: "2756",
        age: 26
},{
          id: 78654,
        name: "Gage_rogers",
        email: "[email protected]",
        postcode: "1264",
        age: 18
},{
          id: 8765,
        name: "Bryce_Tooth",
        email: "[email protected]",
        postcode: "5736",
        age: 19
},{
          id: 9862,
     ...