Create a User Polls Project using HTML CSS & JavaScript Last Updated : 28 Apr, 2025 Comments Improve Suggest changes Like Article Like Report 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:HTMLCSSJavaScriptPreview Image:Output ImageApproachWe 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 Comment More infoAdvertise with us Next Article Create a User Polls Project using HTML CSS & JavaScript A apj752003 Follow Improve Article Tags : HTML Geeks Premier League 2023 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 How to Create a GitHub Profile Search using HTML CSS and JavaScript ? In this article, we will be developing an interactive GitHub Profile Search application using HTML, CSS, and JavaScript Language. In this application, there is a search bar where users can enter the username that they want to view. After entering the username, an API call is been triggered, and the 4 min read Create a Single Page Application using HTML CSS & JavaScript In this article, we are going to design and build a cool and user-friendly single-page application (SPA) using just HTML, CSS, and JavaScript. A single-page application contains multiple pages which can be navigated or visited without loading the page every time. This makes things faster and more in 4 min read Create a Quiz App with Timer using HTML CSS and JavaScript Creating a quiz app is an excellent way to learn the fundamentals of web development. In this tutorial, we will build a Quiz App that features a timer, allowing users to take a timed quiz with multiple-choice questions. The app will use HTML for the structure, CSS for styling, and JavaScript for fun 8 min read Create a Coin Flip using HTML, CSS & JavaScript We will display the styled INR coin to the user and there will be a styled button (Toss Coin). We will create the entire application structure using HTML and style the application with CSS classes and properties. Here, JavaScript will be used to manage the behavior of the Coin Flip and will be used 4 min read Create a Prime Number Finder using HTML CSS and JavaScript In this article, we will see how to create a Prime Number Finder using HTML, CSS, and JavaScript. The main objective of this project is to allow users to input a number and check if it is a prime number or not. Prime numbers are those, that can only be divided by 1 and themselves. We'll develop a ba 3 min read Like