Building a Poll System with HTML, CSS, and JavaScript

This project is a simple, interactive poll system built using HTML, CSS, and JavaScript. It allows users to vote for their favourite programming language from options like JavaScript, Python, Java, and C++.
The results are dynamically displayed with visual bars, providing an engaging way to visualize preferences. This project is perfect for learning about web development fundamentals and how to create interactive user interfaces.

Key Elements:

• Radio Buttons: Each option for voting is a radio button, ensuring only one choice can be selected.
• Submit Button: Calls the submitVote() function to process the user's selection.
• Results Div: Displays the poll results dynamically.

Benefits of the Poll System Project

1. Interactive Learning: Gain hands-on experience with HTML, CSS, and JavaScript.
2. User Engagement: Provides an engaging way for users to participate and see real-time results.
3. Dynamic Updates: Teaches how to manipulate the DOM and update content dynamically.
4. Data Visualization: Visual representation of data through percentage bars enhances understanding.
5. Customization: Easily customizable to include more options or different topics.

Tools used

HTML
The HTML code sets up a poll interface with radio buttons for selecting a favorite programming language, a submit button to cast votes, and a div to display results.

CSS
The CSS styles the poll system with a centered container, colorful labels, and animated elements, enhancing user interaction and visual appeal.

JAVASCRIPT

• Data Structure: An array of objects stores poll options and their vote counts.
• Vote Submission: submitVote() checks for a selected option, increments votes, and calls displayResult() to update the results.
• Dynamic Results: displayResult() calculates percentages and updates the results display with a progress bar for each option.

1. Options Array: Stores poll options, each with an ID, text, and vote count.

2. submitVote Function:

   • Checks if a poll option is selected.
   • Increments the vote count for the selected option.
   • Calls displayResult() to update the poll results.

3. displayResult Function:

   • Calculates the percentage of total votes for each option.
   • Dynamically creates and displays result bars and percentages in the #result div.

4. getTotalVotes Function:

   • Computes the total number of votes across all options.

5. refreshPage Function:

   • Refreshes the page when called, effectively resetting the poll.

SO,

This poll system project provides an engaging way to learn and apply HTML, CSS, and JavaScript. It allows users to vote and see dynamic results, reinforcing concepts like DOM manipulation and data visualization. This foundational project can be easily customized and expanded, making it a great starting point for further web development exploration.

THANK YOU!
HAPPY CODING!