JSFiddle - React, Tailwind, and code Playground

by Becky Tomino

HTML

<fieldset id="candidates">
  <legend>Candidates</legend>

  <div>
    <label for="cand1">Candidate 1</label>
    <input class="candidate" id="cand1" placeholder="Candidate" />
  </div>

  <div>
    <label for="cand2">Candidate 2</label>
    <input class="candidate" id="cand2" placeholder="Candidate" />
  </div>

  <div>
    <label for="cand3">Candidate 3</label>
    <input class="candidate" id="cand3" placeholder="Candidate" />
  </div>

</fieldset>
<fieldset id="statistics">
  <legend>Current Results</legend>
  <div>
    Candidate 1
    <div id="candidateName1"></div>
    <label for="cand1pct">Percentage</label>
    <output id="cand1pct"></output>
  </div>
  <div>
    Candidate 2
    <div id="candidateName2"></div>
    <label for="cand2pct">Percentage</label>
    <output id="cand2pct"></output>
  </div>
  <div>
    Candidate 3
    <div id="candidateName3"></div>
    <label for="cand3pct">Percentage</label>
    <output id="cand3pct"></output>
  </div>
</fieldset>
<button onclick="calculateVotes()" type="button">Calculate</button>

JavaScript

function calculateVotes() {

  var candidate = function candidateInfo() {
    var candidateName = document.getElementById('candName[]').value;
  }

}