app.js

var TruffleContract = require("truffle-contract");
App = {
    web3Provider: null,
    contracts: {},
    account: "0x0",
    loading: false,
    tokenPrice: 1000000000000000,
    tokensSold: 0,
    tokensAvailable: 750000,

    init: () => {
        console.log('App initialized...')
        return App.initWeb3();
    },
    initWeb3: () =>{
        if (typeof web3 !== 'undefined') {
            // If a web3 instance is already provided by Meta Mask.
            App.web3Provider = web3.currentProvider;
            web3 = new Web3(web3.currentProvider);
          } else {
            // Specify default instance if no web3 instance provided
            App.web3Provider = new Web3.providers.HttpProvider('http://localhost:7545');
            web3 = new Web3(App.web3Provider);
      }
      return App.initContracts();
    },
    initContracts: () => {
      $.getJSON("ERC20TokenSale.json", (ERC20TokenSale) =>{
        App.contracts.ERC20TokenSale = TruffleContract(ERC20TokenSale);
        App.contracts.ERC20TokenSale.setProvider(App.web3Provider);
        App.contracts.ERC20TokenSale.deployed().then((ERC20TokenSale) =>{
          console.log("ERC20 Token Sale Address:", ERC20TokenSale.address);
        });
      }).done(()=>{
          $.getJSON("ERC20Token.json", (ERC20Token) =>{
            App.contracts.ERC20Token = TruffleContract(ERC20Token);
            App.contracts.ERC20Token.setProvider(App.web3Provider);
            App.contracts.ERC20Token.deployed().then(function(ERC20Token){
              console.log("ERC20 Sale Address:", ERC20Token.address);
            });  
            App.listenForEvents();
            return App.render();

        });
      })
    },
    //Listen for events emitted from the contract
    listenForEvents: ()=>{
      App.contracts.ERC20TokenSale.deployed().then((instance)=>{
        instance.Sell({}, {
          fromBlock: 0,
          toBlock: 'latest',
        }).watch((error,event)=>{
          console.log("event triggered", event);
          App.render();
        })
      })
    },

    render: () => {
      if (App.loading){
        return;
      }
      App.loading = true;
      
      var loader = $('#loader');
      var content = $("#content");

      loader.show();
      content.hide();

      //Load account data
      web3.eth.getCoinbase( (err, account) => {
        if (err === null ) {
          console.log("account", account);
          App.account = account;
          $("#accountAddress").html("You Account: " + account);

        }
      })
      //Load token sale contract
      App.contracts.ERC20TokenSale.deployed().then(function(instance) {
        ERC20TokenSaleInstance = instance;
        return ERC20TokenSaleInstance.tokenPrice();
      }).then((tokenPrice) =>{
        console.log("tokenPrice " + tokenPrice.toNumber());
        App.tokenPrice = tokenPrice;
        $(".token-price").html(web3.fromWei(App.tokenPrice, "ether").toNumber());
        return ERC20TokenSaleInstance.tokensSold();
      }).then((tokensSold)=> {
        App.tokensSold = tokensSold.toNumber();
        $(".tokens-sold").html(App.tokensSold);
        $(".tokens-available").html(App.tokensAvailable);

        let  progressPercent = (Math.ceil(App.tokensSold) / App.tokensAvailable) * 100;
        console.log(progressPercent);
        $("#progress").css("width", progressPercent + '%');
        //Load token contract
        App.contracts.ERC20Token.deployed().then((instance)=>{
          ERC20TokenSaleInstance = instance;
          return ERC20TokenSaleInstance.balanceOf(App.account);
        }).then((balance)=> {
          $('.dapp-balance').html(balance.toNumber());

            App.loading = false;
            loader.hide();
            content.show();

        })
      });
      

    },
    buyTokens: () => {
      $("#content").hide();
      $("loader").show();
      let numberOfTokens = $("#numberOfTokens").val();
      App.contracts.ERC20TokenSale.deployed().then((instance)=>{
        return instance.buyTokens(numberOfTokens, {
          from: App.account,
          value: numberOfTokens * App.tokenPrice,
          gas: 500000
        });
      }).then((result)=> {
        console.log("Tokens bought...");
        $("form").trigger("reset"); //reset number of tokens in form
        //Wait for Sell event
      });
    }
  }

$(function(){
    $(window).load(function(){
        App.init();
    })
});

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ERC20 Token ICO Sale</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container" style="width: 650px;">
        <div class="col-lg-12">
            <h1 class="text-center">ERC20 TOKEN ICO SALE</h1>
            <hr/>
            <br/>
        </div>
        <div id="loader">
          <p class="text-center">Loading...</p>
        </div>
        <div id="content" class="text-center" style="display: none;">
          <p>
            Introducing "ERC20 Token" !
            Token price is <span class="token-price"></span> Ether. You currently have <span class="dapp-balance"></span>&nbsp;ERC20.
          </p>
          <br/>
          <form onSubmit="App.buyTokens(); return false;" role="form">
            <div class="form-group">
              <div class="input-group">
                <input id="numberOfTokens" class="form-control input-lg" type="number" name="number" value="1" min="1" pattern="[0-9]">
                </input>
                <span class="input-group-btn">
                  <button type="submit" class="btn btn-primary btn-lg">Buy Tokens</button>
                </span>
              </div>
            </div>
          </form>
          <br>
           <div class="progress">
              <div id="progress" class="progress-bar progress-bar-striped active" aria-valuemin="0" aria-valuemax="100">
              </div>
            </div>
          <p><span class="tokens-sold"></span> / <span class="tokens-available"></span> tokens sold</p>
          <hr>
          <p id="accountAddress"></p>
        </div>
      </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

Hello there I am wondering if you have any bug with your code? As in line

$(".token-price").html(web3.fromWei(App.tokenPrice, "ether").toNumber());
       return ERC20TokenSaleInstance.tokensSold();

I am not getting the value converted from the price given to wei instead is showing me number 0?

The code is buggy. I usually post buggy code on gist and asked for help. I think the complete code is from https://github.com/mr-fool/tokenSale and this code works. Cheer