50Projects-HTML-CSS-JavaScript : Interactive polling app

README.md

@@ -562,6 +562,17 @@ In order to run this project you need:
 
 
 
+
+
+Simple Chat App
+This is an interactive polling app that allows users to vote on a specific question. Users can vote for their preferred options and view the results in real-time. The app tracks the votes for each option and stores them in the local storage so the votes persist even after the page is refreshed.
+
+Live Demo
+Source
+ 
+
+
+
 
 
 (back to top)

Source-Code/InteractivePolling/index.html

@@ -0,0 +1,29 @@
+
+
+
+  
+  
+  Interactive Polling App
+  
+
+
+  
+    Vote for Your Favorite Programming Language
+    
+      Ruby
+      Python
+      Java
+      Javascript
+    
+    
+      Results
+      
+        
+      
+    
+  
+
+  
+  
+
+

Source-Code/InteractivePolling/script.js

@@ -0,0 +1,48 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const pollOptions = document.querySelectorAll('.poll-option');
+  const resultsList = document.getElementById('results-list');
+
+  const votes = JSON.parse(localStorage.getItem('votes')) || {
+    Ruby: 0,
+    Python: 0,
+    Java: 0,
+    Javascript: 0,
+  };
+
+  // Update the results on the page
+  function updateResults() {
+    resultsList.innerHTML = ''; // Clear previous results
+
+    const totalVotes = Object.values(votes).reduce(
+      (total, count) => total + count,
+      0,
+    );
+
+    // Display the updated results
+    Object.entries(votes).forEach(([option, count]) => {
+      const percentage = totalVotes
+        ? ((count / totalVotes) * 100).toFixed(1)
+        : 0;
+
+      const resultItem = document.createElement('li');
+      resultItem.innerHTML = `
+          ${option}: ${count} votes (${percentage}%)
+          
+        `;
+      resultsList.appendChild(resultItem);
+    });
+  }
+
+  // Display initial poll results
+  updateResults();
+
+  // Event listener for voting
+  pollOptions.forEach((option) => {
+    option.addEventListener('click', () => {
+      const selectedVote = option.getAttribute('data-vote');
+      votes[selectedVote] += 1;
+      localStorage.setItem('votes', JSON.stringify(votes));
+      updateResults();
+    });
+  });
+});

Source-Code/InteractivePolling/style.css

@@ -0,0 +1,67 @@
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background-color: #f9f9f9;
+}
+
+.poll-container {
+  background: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  width: 100%;
+  max-width: 400px;
+  text-align: center;
+}
+
+.poll-question {
+  font-size: 1.2rem;
+  margin-bottom: 20px;
+}
+
+label {
+  display: block;
+  margin: 10px 0;
+  font-size: 1rem;
+}
+
+button {
+  margin-top: 20px;
+  padding: 10px 20px;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+
+.poll-results {
+  margin-top: 20px;
+  text-align: left;
+}
+
+.poll-results ul {
+  list-style: none;
+  padding: 0;
+}
+
+.poll-results li {
+  padding: 5px 0;
+  font-size: 1rem;
+}
+
+.poll-results .bar {
+  background-color: #007bff;
+  height: 10px;
+  border-radius: 4px;
+  margin-top: 5px;
+}