Smart Offline E-Voting System with Live Results

Hi Guys!

Assalamu Alaikum, I hope everyone is well and enjoying their lives. Today, I am going to describe an offline e-voting system, a front-end web project we will build using HTML, CSS, and JavaScript. This project is very easy and implements an electronic voting system that runs without any internet or a back-end server.

There are some main features of this project, such as the first one, which is that it verifies the voter through their voter ID. The second one is that it allows a user to vote once; a user cannot vote repeatedly. Apart from that, it stores the votes locally in a browser and shows a live voting result through a progress bar.

Basically, this project is designed to understand the logic of JavaScript. Further, the understanding of local storage also becomes better. Real-world user interface interaction can be practiced. It can also be used for academic and demo purposes.

We have divided this project into three main parts: the first is HTML, which will create the structure of this project; the second is CSS, which will design it, and the third is JavaScript, which will execute its logic and functionality.

First of all, if I talk about its user interface, which we have developed through HTML and designed through CSS, you can see that we have an input field where the voter has to write their ID. Each voter will have a unique ID through which they can cast their vote. After writing the ID, he will click on the verify button. As soon as he clicks on the verify button, the candidates he has to vote for will be given three options. He has to select one of these three. For example, if that candidate selects one, his vote will be successfully cast, and the live result will be shown in the progress bar below.

Voter Verification Function:

The main purpose of this function is to ensure that a voter can only cast one vote at a time and cannot vote repeatedly.

This function will be called when the verify button is clicked. It will read the voter ID that the user has entered in the input field. If the field is empty, it will show an error.

It will check from the array of the voted user whether the voter ID already exists or not. If it has already voted, then the voting will be blocked. If not, then the verification will be successful. The login section will be finished, and the voting section will be displayed. In this way, the voter ID will be temporarily stored in the local storage.

Vote Casting Function:

The main purpose of this function is to securely record votes and prevent duplicate voting.

This function is called when any voter clicks on the candidate button. It installs the voter ID in the Local Storage. If it already exists, then the function stops. If the vote is successful, a message is shown to you. In this way, the voter ID is added to the voted user list. Similarly, when the vote is cast, it updates the progress bar every 1.5 seconds and then reloads again.

Live Result Update Function:

This function calculates our total number of votes and converts each candidate's votes into a percentage. When a candidate votes, the width of their progress bar increases, and similarly, if there are no votes, the bar remains at zero.

Reset Election Function:

The main purpose of this function is to clear all the data and start the page for a fresh election. When the reset election button is clicked, a confirmation dialog appears in front of us, which is for safety. It confirms that the local storage data will be deleted, through which the page will be reloaded, and the voters and votes will be reset.

All these functions together make an offline e-voting system secure, functional, and user-friendly.

How it Works Live Demo:

In the future, we can further expand this project into a Real Online Voting system in which we can add backend and database, further improve its security, improve user authentication and admin panel, and we can use this system for school elections classroom polls and community voting, and for further improvement, we can also add live result analytics, mobile friendly design, this can be a complete smart e-voting project and I will try my best to expand it further.

Thank You