zastrin/app.js

## app.js
// Import the page's CSS. Webpack will know what to do with it.
import "../stylesheets/app.css";

// Import libraries we need.
import { default as Web3} from 'web3';
import { default as contract } from 'truffle-contract'

import voting_artifacts from '../../build/contracts/Voting.json'

var Voting = contract(voting_artifacts);

let candidates = {"Gayathri": "candidate-1", "Sindhu": "candidate-2", "Trishul": "candidate-3"}

window.voteForCandidate = function(candidate) {
  let candidateName = $("#candidate").val();
  try {
    $("#msg").html("Vote has been submitted. The vote count will increment as soon as the vote is recorded on the blockchain. Please wait.")
    $("#candidate").val("");

    /* Voting.deployed() returns an instance of the contract. Every call
     * in Truffle returns a promise which is why we have used then()
     * everywhere we have a transaction call
     */
    Voting.deployed().then(function(contractInstance) {
      contractInstance.voteForCandidate(candidateName, {gas: 140000, from: web3.eth.accounts[0]}).then(function() {
        let div_id = candidates[candidateName];
        return contractInstance.totalVotesFor.call(candidateName).then(function(v) {
          $("#" + div_id).html(v.toString());
          $("#msg").html("");
        });
      });
    });
  } catch (err) {
    console.log(err);
  }
}

$( document ).ready(function() {
  if (typeof web3 !== 'undefined') {
    console.warn("Using web3 detected from external source like Metamask")
    // Use Mist/MetaMask's provider
    window.web3 = new Web3(web3.currentProvider);
  } else {
    console.warn("No web3 detected. Falling back to http://localhost:8545");
    // fallback - use your fallback strategy (local node / hosted node + in-dapp id mgmt / fail)
    window.web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
  }

  Voting.setProvider(web3.currentProvider);
  let candidateNames = Object.keys(candidates);
  for (var i = 0; i < candidateNames.length; i++) {
    let name = candidateNames[i];
    Voting.deployed().then(function(contractInstance) {
      contractInstance.totalVotesFor.call(name).then(function(v) {
        $("#" + candidates[name]).html(v.toString());
      });
    })
  }
});

## index.html
<!DOCTYPE html>
<html>
<head>
  <title>Hello World DApp</title>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
  <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
</head>
<body class="container">
  <h1>A Simple Hello World Voting Application</h1>
  <div id="address"></div>
  <div class="table-responsive">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Candidate</th>
          <th>Votes</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Gayathri</td>
          <td id="candidate-1"></td>
        </tr>
        <tr>
          <td>Sindhu</td>
          <td id="candidate-2"></td>
        </tr>
        <tr>
          <td>Trishul</td>
          <td id="candidate-3"></td>
        </tr>
      </tbody>
    </table>
    <div id="msg"></div>
  </div>
  <input type="text" id="candidate" />
  <a href="#" onclick="voteForCandidate()" class="btn btn-primary">Vote</a>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="app.js"></script>
</html>
	// Import the page's CSS. Webpack will know what to do with it.
	import "../stylesheets/app.css";

	// Import libraries we need.
	import { default as Web3} from 'web3';
	import { default as contract } from 'truffle-contract'

	import voting_artifacts from '../../build/contracts/Voting.json'

	var Voting = contract(voting_artifacts);

	let candidates = {"Gayathri": "candidate-1", "Sindhu": "candidate-2", "Trishul": "candidate-3"}

	window.voteForCandidate = function(candidate) {
	let candidateName = $("#candidate").val();
	try {
	$("#msg").html("Vote has been submitted. The vote count will increment as soon as the vote is recorded on the blockchain. Please wait.")
	$("#candidate").val("");

	/* Voting.deployed() returns an instance of the contract. Every call
	* in Truffle returns a promise which is why we have used then()
	* everywhere we have a transaction call
	*/
	Voting.deployed().then(function(contractInstance) {
	contractInstance.voteForCandidate(candidateName, {gas: 140000, from: web3.eth.accounts[0]}).then(function() {
	let div_id = candidates[candidateName];
	return contractInstance.totalVotesFor.call(candidateName).then(function(v) {
	$("#" + div_id).html(v.toString());
	$("#msg").html("");
	});
	});
	});
	} catch (err) {
	console.log(err);
	}
	}

	$( document ).ready(function() {
	if (typeof web3 !== 'undefined') {
	console.warn("Using web3 detected from external source like Metamask")
	// Use Mist/MetaMask's provider
	window.web3 = new Web3(web3.currentProvider);
	} else {
	console.warn("No web3 detected. Falling back to http://localhost:8545");
	// fallback - use your fallback strategy (local node / hosted node + in-dapp id mgmt / fail)
	window.web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
	}

	Voting.setProvider(web3.currentProvider);
	let candidateNames = Object.keys(candidates);
	for (var i = 0; i < candidateNames.length; i++) {
	let name = candidateNames[i];
	Voting.deployed().then(function(contractInstance) {
	contractInstance.totalVotesFor.call(name).then(function(v) {
	$("#" + candidates[name]).html(v.toString());
	});
	})
	}
	});
	<!DOCTYPE html>
	<html>
	<head>
	<title>Hello World DApp</title>
	<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
	<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
	</head>
	<body class="container">
	<h1>A Simple Hello World Voting Application</h1>
	<div id="address"></div>
	<div class="table-responsive">
	<table class="table table-bordered">
	<thead>
	<tr>
	<th>Candidate</th>
	<th>Votes</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>Gayathri</td>
	<td id="candidate-1"></td>
	</tr>
	<tr>
	<td>Sindhu</td>
	<td id="candidate-2"></td>
	</tr>
	<tr>
	<td>Trishul</td>
	<td id="candidate-3"></td>
	</tr>
	</tbody>
	</table>
	<div id="msg"></div>
	</div>
	<input type="text" id="candidate" />
	<a href="#" onclick="voteForCandidate()" class="btn btn-primary">Vote</a>
	</body>
	<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
	<script src="app.js"></script>
	</html>