JSFiddle - React, Tailwind, and code Playground

by ryan fosse

HTML

<div class = background>
<br> username
<select class="users">
  <option value="invalid">pick</option>
  <option value="mjohns">mjohns</option>
  <option value="rfosse">rfosse</option>
  <option value="btooth">btooth</option>
  <option value="bhacket">bhacket</option>
</select>
<br>
<br>
<label>password </label>
<input type="text" name="password" />
<br>
<button class='click-me'>
  login
</button>
<button class='logout'>
  logout
</button>
<br>
<br> issue
<select class="issueName">
  <option value="invalid">issue</option>
  <option value="Rubbish">Pulution</option>
  <option value="Transport">Transport</option>
  <option value="Education">Education</option>
</select>
<br>
<br>
<label>Response </label>
<input type="text" name="response" />
<p>
</p>
<button class='submit'>
  Submit
</button>
</div>

CSS

.background {
  background-color: grey;
  color: red;
}

JavaScript

var login = false;
var login_good = false;

voterDetails = [ 
{username: "mjohns", password: "password1", name: "Matt Johns"}, 
{username: "rfosse", password: "password2", name: "Ryan Fosse"},
{username: "btooth", password: "password3", name: "Bryce Tooth"},
{username: "bhacket", password: "password4", name: "Bailey hacket"},
];

issues = [
{issueName: "Pulition"},
{issueName: "Transport"},
{issueName: "Education"}
];

responses = [ 
{issue: "Transport", response: "beep beep"},
{issue: "Education", response: "go mccarthy"},
];

$('.click-me').click(function() {
  var username = $(".users");
  var password = $("input[name='password']");

  loginIsOk = false;
  for (i = 0; i < voterDetails.length; i++) {
    if (username.val() == voterDetails[i].username && password.val() == voterDetails[i].password) {
      loginIsOk = true;
    }
  }
  if (loginIsOk) {
    console.log("you logged in");
    login = true
  } else {
    console.log("you didnt log in");
  }
});

$('.logout').click(function() {
  if (login, loginIsOk)
    login = false;
  loginIsOk = false;
  console.log("logged out");
});

$('.submit').click(function() { 
console.log("clicked");
  var issueName = $(".issueName");
  var response = $("input[name='response']");
  if (login) {
    responses.push({
      issue: issueName.val(),
      response: response.val()
    })
    console.log(issueName.val() + response.val());
  } else {
    console.log('login first!');
  }
});