Online Voting System in Tailwind CSS is a web-based platform designed to facilitate the voting process. It allows users to cast their votes securely and efficiently through a user-friendly interface. The system is built using Tailwind CSS, a utility-first CSS framework, which ensures a responsive and visual design.
Approach to create Online Voting System Card:
-
Begin with a basic HTML structure, including the
<!DOCTYPE html>
declaration,<html>
,<head>
, and<body>
tags. Import external resources like Tailwind CSS for styling and Chart.js for creating the pie chart. - Create a container div with Tailwind CSS classes for styling. Inside the container, include a dropdown menu for selecting a color option.
- Add buttons for voting, clearing votes, and displaying a pie chart. Use event listeners to trigger the voting, clearing, and chart display functions.
- Use JavaScript to handle the voting process, storing votes in local storage, and displaying the pie chart. Define functions to update the vote count, clear votes, and display the chart.
-
Display the voting result and the list of votes in a div with an id of “result” and “votes” respectively. Use the
innerHTML
property to update the content of the divs.
Example: Implementation to design a online voting System.
HTML
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
< title >Online Voting</ title >
< link href =
rel = "stylesheet" >
< script src =
</ script >
</ head >
< body class="bg-gray-100 h-screen flex
flex-col justify-center items-center">
< div class="bg-white p-8 rounded-lg shadow-md w-full
md:w-1/2 lg:w-1/3 border-2 border-green-600">
< h1 class = "text-3xl font-bold text-center mb-8" >
Online Voting
</ h1 >
< div class = "flex flex-col mb-4" >
< label for = "color" class = "text-lg font-semibold mb-2" >
Select Color:
</ label >
< select id = "color"
class="border border-gray-300 rounded-md
py-2 px-3 focus:outline-none">
< option value = "Red" >Red House</ option >
< option value = "Blue" >Blue House</ option >
< option value = "Green" >Green House</ option >
< option value = "Yellow" >Yellow House</ option >
</ select >
</ div >
< button id = "voteButton"
class="bg-green-500 text-white px-6 py-2
rounded-md self-center mt-4 focus:outline-none">
Vote
</ button >
< button id = "clearButton"
class="bg-red-500 text-white px-6 py-2
rounded-md self-center mt-2 focus:outline-none">
Clear Votes
</ button >
< button id = "pieChartButton"
class="bg-purple-500 text-white px-6 py-2
rounded-md self-center mt-2 focus:outline-none">
Pie Chart
</ button >
< div id = "result" class = "mt-8" ></ div >
< div id = "votes" class = "mt-8" >
< h2 class = "text-xl font-semibold mb-4" >
Voted List:
</ h2 >
</ div >
< div class = "w-64 h-64 mx-auto" >
< canvas id = "pieChart" ></ canvas >
</ div >
</ div >
< script >
document.addEventListener('DOMContentLoaded', function () {
const colorDropdown = document.getElementById('color');
const voteButton = document.getElementById('voteButton');
const clearButton = document.getElementById('clearButton');
const pieChartButton = document.getElementById('pieChartButton');
const resultMessage = document.getElementById('result');
const votedList = document.getElementById('votes');
let myChart;
voteButton.addEventListener('click', function () {
const selectedColor = colorDropdown.value;
let colorVotes = JSON.parse(localStorage
.getItem('colorVotes')) || {};
colorVotes[selectedColor] = (colorVotes[selectedColor] || 0)+1;
localStorage.setItem('colorVotes', JSON.stringify(colorVotes));
resultMessage.textContent = `You voted for
${selectedColor} House.`;
displayVotes();
});
clearButton.addEventListener('click', function () {
localStorage.removeItem('colorVotes');
resultMessage.textContent = 'All votes cleared.';
displayVotes();
if (myChart) {
myChart.destroy();
}
});
pieChartButton.addEventListener('click', function () {
const colorVotes = JSON.parse(localStorage
.getItem('colorVotes')) || {};
const colors = Object.keys(colorVotes);
const votes = Object.values(colorVotes);
if (myChart) {
myChart.destroy();
}
const ctx = document.getElementById('pieChart')
.getContext('2d');
myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: colors,
datasets: [{
label: 'Votes',
data: votes,
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
],
hoverOffset: 4
}]
},
options: {
plugins: {
title: {
display: true,
text: 'Voting Results'
}
}
}
});
});
function displayVotes() {
votedList.innerHTML = '';
const colorVotes = JSON.parse(localStorage
.getItem('colorVotes')) || {};
for (const color in colorVotes) {
const voteItem = document.createElement('li');
voteItem.textContent = `${color} House:
${colorVotes[color]}`;
votedList.appendChild(voteItem);
}
}
displayVotes();
});
</ script >
</ body >
</ html >
|
Output:
Article Tags :
Recommended Articles