Create a User Polls Project using HTML CSS & JavaScript
Last Updated :
28 Apr, 2025
Creating a user polls project has various valuable purposes, including gathering feedback, engaging users, personalizing content, fostering community, conducting research, A/B testing, and improving the user experience. Clear objectives are crucial, and in this example, we focus on collecting data on users' preferences for programming. In this article, we will explore how to implement a user polls project using HTML, CSS, and JavaScript.
Prerequisites:
Preview Image:
Output ImageApproach
We have a clear set of observations to guide the thorough implementation of this project. Let's begin by creating the basic HTML structure based on the project description we have discussed above.
- There are two radio buttons for user input.
- At the top, there is a paragraph presenting the question.
- There is a button with the value attribute set to 'vote.'
- At the bottom, there are results displayed for 'Yes' and 'No,' along with their respective counts.
- We can notice that the background color is distinct.
- The position is centered, and text elements are aligned to the center.
- In this project, when we click the 'Vote' button, the values of 'Yes' and 'No' should either increase or remain the same, depending on the user's choice.
- To achieve this, we will utilize the getElementById method in JavaScript, which will allow us to increment the counters for 'Yes' and 'No' accordingly.
- Subsequently, the updated counts will be reflected in the output.
Example: Below is the basic implementation of the above approach.
JavaScript
document.addEventListener("DOMContentLoaded", function () {
const pollForm =
document.getElementById("poll-form");
const yesCount =
document.getElementById("yes-count");
const noCount =
document.getElementById("no-count");
let yesVotes = 0;
let noVotes = 0;
pollForm.addEventListener("submit", function (e) {
// It will help to prevent the submission of
// form, so that following code can execute
e.preventDefault();
const formData = new FormData(pollForm);
const userVote = formData.get("vote");
if (userVote === "yes") {
yesVotes++;
} else if (userVote === "no") {
noVotes++;
}
updateResults();
});
function updateResults() {
yesCount.textContent = yesVotes;
noCount.textContent = noVotes;
}
});
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>User Polls</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<h1 class="poll-question">
Do you like programming?
</h1>
<form id="poll-form" class="poll-form">
<label>
<input type="radio"
name="vote"
value="yes"> Yes
</label>
<label>
<input type="radio"
name="vote"
value="no"> No
</label>
<button type="submit"
class="vote-button">
Vote
</button>
</form>
<div id="results" class="results">
<h2 class="results-title">
Results
</h2>
<div class="results-count">
<p>Yes:
<span id="yes-count"
class="count">0
</span>
</p>
<p>No:
<span id="no-count"
class="count">0
</span>
</p>
</div>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
CSS
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
background: linear-gradient(to bottom, #0078d4, #0056b3);
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
color: #fff;
text-align: center;
padding: 30px;
}
.poll-question {
font-size: 24px;
margin-bottom: 20px;
}
.poll-form label {
display: block;
margin-bottom: 10px;
font-size: 18px;
color: #fff;
}
.vote-button {
background-color: #0056b3;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
font-size: 18px;
border-radius: 5px;
transition: background-color 0.3s ease-in-out;
}
.vote-button:hover {
background-color: #0078d4;
}
.results {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.results-title {
font-size: 20px;
}
.results-count {
display: flex;
justify-content: space-between;
font-size: 18px;
margin-top: 10px;
}
.count {
font-weight: bold;
}
Output:
Output
Similar Reads
Create a User Blocking project using HTML CSS & JavaScript The User Blocking project is a simple application that allows users to block or unblock certain users. It provides a basic interface to add users to a block list and remove them from the list. In this article, we are going to implement the functionality that can block a user by clicking a button and
4 min read
Create a Trigonometry Toolbox using HTML CSS and JavaScript This article will demonstrate how we can create a Trigonometry Toolbox using HTML, CSS, and JavaScript. Here, we have to give an angle in degrees as input in the input box and it calculates the corresponding value of the given angle. The application is user-friendly users can easily find the trigono
3 min read
Create an QR Code Generator Project using HTML CSS & JavaScript Today, more than 75% of websites and apps use QR codes to share links, contact info, or event details quickly. Here, youâll learn how to make your own QR Code Generator using HTML, CSS, and JavaScript. Weâll guide you step by step, so even if youâre a beginner, you can follow along easily. By the en
3 min read
Create a Health Tracker using HTML CSS & JavaScript In this article, we will see how we can create a health tracker using HTML, CSS, and JavaScript.Here, we have provided the user with three inputs i.e. input water intake, exercise duration, and blood sugar levels. The user can input these daily and then the provided data is stored in the localStorag
5 min read
Create a Crowdfunding Platform using HTML CSS & JavaScript In this article, we will see how we can implement a Crowdfunding Platform with the help of HTML, CSS, and JavaScript. The crowdfunding platform project is a basic front-end prototype developed using HTML, CSS, and JavaScript. Preview of final output: Let us have a loo at how the final project will l
4 min read