This article is a part of a series called Corporate Governance on Blockchain.
Part 1 of the series outlines the potential applications of blockchain in corporate governance and walks through how to set up your project to follow this series. Part 2 outlines the entire business logic of the shareholder voting smart contract and includes best practices for smart contract development.
In Part 3, we started weaving in the UI and learned how to read from the blockchain. In Part 4, we added voting functionality for both the candidates and learned how to write to the blockchain.
This part is going to be the final part of this series. Until now, we were simply logging the results on the developer console. In this blog, we will learn how to display the voting results on the UI.
We will display the results in the form of a table which will look something like this:
We will achieve this in three simple steps:
- Create a hidden
<action-button>
that will be fired each time a user votes. - Create a placeholder table to display the results similar to the above drawn table.
- Modify the
showResults()
function to display the table on the UI.
Let’s get started!
Step 1: Create a hidden <action-button>
This <action-button>
will be hidden
so that the user (voter) can’t see the current results of the vote before actually casting their vote.
Create this <action-button>
in dapp-page.js
within render()
function. This button will be wrapped within a div
with a unique ID. This div
should also be hidden
.
In the above code snippet, you can see that the hidden
property of the <action-button>
is set to true
. This <action-button>
also has a unique ID get-candidates
. We set ID to get-candidates
because this <action-button>
is essentially fetching all data relevant to the candidates. The most important property of this <action-button>
is the .click
property. When this hidden<action-button>
is clicked, getCandidates()
method is called. We will take care of clicking this button by manipulating the DOM. This button will be clicked and getCandidates()
method will be fired as soon as the user (voter) castes their vote.
Let’s create the getCandidates()
method within dapp-page.js
. This function should be near other custom made functions like showResults()
.
The function getCandidates()
fetches data from the blockchain by invoking the smart contract. The received result is then presented in the form of the table with a unique ID candidate-lookup
. This table will be created in Step 2.
Step 2: Create a placeholder table
We need to create a placeholder table so that we can populate it dynamically. You can style it in anyway you like. We will use Tailwind CSS.
We will add this placeholder table within the div
we created in Step 1 with ID tally
.
Now, we are all set to display the results. The data to be populated is ready to be loaded, and the placeholder is ready to be filled. All we need to do is display the div
with ID tally
. We need to take care that the hidden
<action-button>
is clicked before the div
is loaded.
Step 3: Modify the showResults()
function
Until now we were just logging the result in the developer console. Now, let’s manipulate the DOM and display the result in the form of a table.
In the showResults()
function in dapp-page.js
, make the following changes:
We are accessing the DOM by capturing the element by ID (elid)
. First, we are clicking on the hidden
<action-button>
to fire the getCandidates()
function and then we are removing the hidden
class from div
with ID tally
to make it visible in the DOM.
And this was all!
Your dapp should now successfully display the current vote tally.
This was the final feature we wanted to add to this voting dapp.
Top comments (3)
I think it will help me in my Digital Voting Platform project.
Thanks.
I am glad :)
hey i need help in finding the source code.