Online Voting System using HTML, CSS & JS
Online Voting System using HTML, CSS & JS
In today’s digital age, integration of technology into various aspects of our lives has become more prevalent than ever. One such area where technology has made significant progress is the area of Voting Systems. Online voting systems have emerged as a modern and efficient way of conducting elections, allowing greater accessibility and convenience for voters.
In this blog post, we will discuss in detail the development of an Online Voting System using HTML, CSS & JS. We will provide a detailed description of the source code and explain the functionality of each component.
Introduction to the Online Voting System
The Online Voting System we’ll be discussing is designed to facilitate voting in a digital environment. It allows voters to log in, select their preferred candidate from a list of options, and submit their vote securely. The system also provides features for tallying votes and displaying the voting results in real-time.
HTML structure
Let’s start by examining the HTML Structure of our online voting system:
<div class="container">
<h1>Online Voting System</h1>
<p id="hpara">Developed by SM-Tech </p>
<button class="refresh-button" onclick="refreshPage()">Refresh</button>
<div class="form">
<label for="name">Enter Your Name:</label>
<input type="text" id="name" placeholder="Enter your name">
</div>
<div class="candidates">
<h4 id="cp">Nominated Parties:</h4>
<div class="candidate">
<input type="radio" id="candidate1" name="candidate" value="BJP">
<label for="candidate1">BJP</label>
</div>
<div class="candidate">
<input type="radio" id="candidate2" name="candidate" value="Congress">
<label for="candidate2">Congress</label>
</div>
<div class="candidate">
<input type="radio" id="candidate3" name="candidate" value="Other">
<label for="candidate3">Other</label>
</div>
</div>
<button class="btn" onclick="vote()">Vote</button> <br>
<button class="btn" onclick="calculateVotes()">Calculate Votes</button>
<div class="message" id="message"></div>
<div class="result" id="result"></div>
</div>
The HTML file sets up the basic structure of our web page, including the necessary meta tags and a container div where the voting system content will be displayed.
CSS Styling
Next, we’ll look at the CSS Styling that gives our Online Voting System its visual appeal and responsiveness:
body {font-family: Arial, sans-serif;
background-color: #002a42;
padding: 20px;
}
.container {
max-width: 600px;
margin: 0 auto;
color: white;
background-color: #003c6e;
padding: 20px;
border: 2px solid white;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
h1, h2 {
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
font-family: "Poetsen One", sans-serif;
color: #0f83ff;
-webkit-text-stroke: 1px #ffffff;
/* Set the text stroke width and color */
}
.form {
margin-bottom: 20px;
}
.form label {
display: block;
font-weight: bold;
font-size: 20px;
margin-bottom: 5px;
font-weight: 200;
font-family: "Love Ya Like A Sister", cursive;
}
.form input {
width: 50%;
padding: 6px;
margin-bottom: 10px;
border-radius: 10px;
font-size: 15px;
font-weight: bold;
border: 1px solid #ccc;
}
.candidates {
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
.candidate {
display: flex;
font-size: 20px;
font-weight: bold;
align-items: center;
margin-bottom: 10px;
font-weight: 200;
line-height: 0.0;
font-family: "Poetsen One", sans-serif;
}
.candidate input {
margin-right: 10px;
}
input[type="radio"] {
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid #007bff;
margin-right: 10px;
outline: none;
cursor: pointer;
}
.btn {
display: block;
width: 100%;
font-size: 18px;
font-weight: 100;
padding: 6px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-family: "Poetsen One", sans-serif;
}
.btn:hover {
background-color: #0098b3;
}
.message {
text-align: center;
margin-top: 10px;
}
.result {
margin-top: 20px;
border-top: 1px solid #ccc;
padding-top: 10px;
}
#cp {
margin: 0;
margin-bottom: 5px;
font-size: 20px;
font-family: "Love Ya Like A Sister", cursive;
font-weight: 200;
}
#hpara {
line-height: 0;
margin-bottom: 30px;
text-align: center;
font-weight: bold;
font-family: "Madimi One", sans-serif;
}
.refresh-button {
margin-right: auto;
/* Align to the right */
padding: 5px 10px;
margin-bottom: 10px;
background-color: #28a745;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
}
@media only screen and (max-width: 600px) {
h1,
h2 {
text-align: center;
font-weight: 200;
font-size: 25px;
font-family: "Poetsen One", sans-serif;
}
#hpara {
font-size: 12px;
font-weight: 100;
}
}
The CSS code includes styles for the body, container, form elements, candidate list, buttons, and other visual components of the voting system. These styles ensure that the voting interface is user-friendly and aesthetically pleasing.
JavaScript Functionality
Now, let’s explore the JavaScript code that powers the voting functionality of our system:
<script>
let votes = {}; // Object to store votes with voter's name
function vote() {
const name = document.getElementById('name').value;
const selectedCandidate = document.querySelector('input[name="candidate"]:checked');
if (!name) {
document.getElementById('message').innerHTML = "Please enter your name.";
} else if (!selectedCandidate) {
document.getElementById('message').innerHTML = "Please select a candidate.";
} else {
const candidateName = selectedCandidate.value;
votes[name] = candidateName;
document.getElementById('message').innerHTML = `Thank you, ${name}, for voting!`;
document.getElementById('message').style.color = "white";
document.getElementById('result').innerHTML = "Voting Result:<br>";
Object.keys(votes).forEach(voter => {
document.getElementById('result').innerHTML += `${voter}: Voted for ${votes[voter]}<br>`;
});
// Reset the form for the next voter
document.getElementById('name').value = '';
document.querySelector('input[name="candidate"]:checked').checked = false;
}
}
// Function for claculate vote
function calculateVotes() {
const voteCount = { "BJP": 0, "Congress": 0, "Other": 0 };
Object.values(votes).forEach(candidate => {
voteCount[candidate]++;
});
document.getElementById('result').innerHTML = "Voting Result:<br>";
Object.keys(voteCount).forEach(candidate => {
document.getElementById('result').innerHTML += `${candidate}: ${voteCount[candidate]} votes<br>`;
});
}
//Function for reload page
function refreshPage() {
location.reload();
}
</script>
The JavaScript code includes functions for voting, calculating votes, and refreshing the page. The votes object stores the votes along with the voter’s name. The vote() function handles the voting process by capturing voter input and updating the voting results dynamically. The calculateVotes() function calculates the total votes for each candidate and displays the results. The refreshPage() function reloads the page, allowing for a seamless voting experience.
Conclusion;
In conclusion, the online voting system we have discussed demonstrates how HTML, CSS, and JavaScript can be combined to create a functional and interactive voting platform. By leveraging the power of technology, such systems contribute to the democratization of voting processes and increase citizen engagement.
Feel free to explore and customize the provided source code to suit your specific requirements and create your own online voting system. Happy coding!
Explore More;
0 Comments