build:maintained poll percentage ,voted poll using localstorage and a…

…dded styles
kushal1o1 · Jul 2, 2024 · 505136c · 505136c
1 parent 4d6d07e
commit 505136c
Show file tree

Hide file tree

Showing 3 changed files with 169 additions and 41 deletions.
diff --git a/BackEnd/db.sqlite3 b/BackEnd/db.sqlite3
diff --git a/FrontEnd/polling-app/src/App.css b/FrontEnd/polling-app/src/App.css
@@ -1,39 +1,113 @@
-/* src/App.css */
+/* src/components/Polls.css */
 
-.App {
+.poll-container {
+  font-family: Arial, sans-serif;
+  margin: 20px;
+  background-color: #f0f2f5;  /* Light grey background like Facebook */
+  padding: 20px;
+  border-radius: 10px;
+  width:60%;
+  margin: 0 auto;
+}
+
+.title {
   text-align: center;
+  margin-bottom: 20px;
+  font-size: 24px;
+  color: #1877f2;  /* Facebook blue */
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 10vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+.poll-section {
+  margin-bottom: 30px;
+  padding: 15px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  background-color: white;
 }
 
-main {
-  padding: 20px;
+.latest {
+  border: 2px solid #1877f2;  /* Facebook blue */
 }
 
-button {
-  margin-left: 10px;
-  padding: 5px 10px;
-  cursor: pointer;
+.section-title {
+  font-size: 20px;
+  margin-bottom: 15px;
+  color: #1877f2;  /* Facebook blue */
+}
+
+.poll {
+  margin-bottom: 20px;
+}
+
+.poll-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.poll-date {
+  font-size: 14px;
+  color: #666;
 }
 
-h1, h3 {
-  color: #282c34;
+.poll-question {
+  font-size: 20px;
+  margin-bottom: 10px;
+  color: #333;
+  font-weight: bolder;
 }
 
-ul {
+.choices-list {
   list-style-type: none;
   padding: 0;
 }
 
-li {
-  margin: 10px 0;
+.choice-item {
+  padding: 10px;
+  border-bottom: 1px solid #ddd;
+  display: grid;
+  grid-template-columns: 0.3fr 1fr;
+  align-items: center;
+  font-size: 16px;
+  margin-bottom: 5px;
+  font-weight:600;
+}
+.choice-item:last-child {
+  border-bottom: none;
+}
+
+
+
+
+
+.vote-result {
+  background-color: #3281e9;  /* Facebook blue */
+  color: white;
+  padding: 5px;
+  border-radius: 5px;
+  transition: width 0.5s ease-in-out;
+  height: 20px;
+  display: inline-block;  /* Ensure the block starts from the left */
+  overflow: hidden;  /* Prevent overflow text */
+  white-space: nowrap;  /* Prevent line breaks */
+  text-align: right;
+  padding: 5px;
+  margin-left: 10px;
+  min-width: 30px;  /* Minimum width to ensure text visibility */
+  position: relative;
+}
+
+.vote-result span {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap; /* Prevent text from wrapping */
+  pointer-events: none; /* Prevent text from interfering with clicking */
+}
+
+
+@media (max-width: 600px) {
+  .poll-container {
+      width: 98%;
+  }
 }
diff --git a/FrontEnd/polling-app/src/components/Polls.js b/FrontEnd/polling-app/src/components/Polls.js
@@ -1,13 +1,13 @@
-// src/components/Polls.js
-
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 
 const Polls = () => {
     const [polls, setPolls] = useState([]);
+    const [votedPolls, setVotedPolls] = useState({});
 
     useEffect(() => {
         fetchPolls();
+        loadVotedPollsFromStorage(); // Load voted polls from localStorage on component mount
     }, []);
 
     const fetchPolls = async () => {
@@ -21,9 +21,10 @@ const Polls = () => {
 
     const handleVote = async (pollId, choiceId) => {
         try {
-            const response = await axios.post(`http://localhost:8000/polls/${pollId}/vote/`, { choice_id: choiceId });
-            alert(response.data.status);
-            fetchPolls(); // Refresh the poll data after voting
+            await axios.post(`http://localhost:8000/polls/${pollId}/vote/`, { choice_id: choiceId });
+            const updatedVotedPolls = { ...votedPolls, [pollId]: choiceId };
+            setVotedPolls(updatedVotedPolls);
+            saveVotedPollsToStorage(updatedVotedPolls); // Save updated voted polls to localStorage
         } catch (error) {
             if (error.response && error.response.data.error) {
                 alert(error.response.data.error);
@@ -33,24 +34,77 @@ const Polls = () => {
         }
     };
 
+    const calculatePercentage = (choiceVotes, totalVotes) => {
+        return totalVotes === 0 ? 0 : ((choiceVotes / totalVotes) * 100).toFixed(1);
+    };
+
+    const loadVotedPollsFromStorage = () => {
+        const storedVotedPolls = localStorage.getItem('votedPolls');
+        if (storedVotedPolls) {
+            setVotedPolls(JSON.parse(storedVotedPolls));
+        }
+    };
+
+    const saveVotedPollsToStorage = (updatedVotedPolls) => {
+        localStorage.setItem('votedPolls', JSON.stringify(updatedVotedPolls));
+    };
+
     return (
-        <div>
-            <h1>Vote on Polls</h1>
-            {polls.map((poll) => (
-                <div key={poll.id}>
-                    <h3>{poll.question}</h3>
-                    <ul>
-                        {poll.choices.map((choice) => (
-                            <li key={choice.id}>
-                                {choice.choice_text} - {choice.votes} votes
-                                <button onClick={() => handleVote(poll.id, choice.id)}>Vote</button>
-                            </li>
-                        ))}
-                    </ul>
+        <div className="poll-container">
+            <h1 className="title">Vote on Polls</h1>
+            {polls.length > 0 && (
+                <div className={`poll-section latest ${votedPolls[polls[0].id] ? 'voted' : ''}`}>
+                    <h3 className="section-title">Latest Poll</h3>
+                    <div key={polls[0].id} className="poll">
+                        <div className="poll-header">
+                            <h3 className="poll-question">{polls[0].question}</h3>
+                        </div>
+                        <ul className="choices-list">
+                            {polls[0].choices.map((choice) => {
+                                const totalVotes = polls[0].choices.reduce((acc, c) => acc + c.votes, 0);
+                                const percentage = calculatePercentage(choice.votes, totalVotes);
+                                const isVoted = votedPolls[polls[0].id] === choice.id;
+                                return (
+                                    <li key={choice.id} className="choice-item" onClick={() => handleVote(polls[0].id, choice.id)}>
+                                        <span>{choice.choice_text}</span>
+                                        <div className="vote-result" style={{ width: `${percentage}%`, backgroundColor: isVoted ? 'green' : ' #1877f2' }}>
+                                            {percentage}%
+                                        </div>
+                                    </li>
+                                );
+                            })}
+                        </ul>
+                    </div>
                 </div>
-            ))}
+            )}
+            <div className="poll-section history">
+                <h3 className="section-title">Poll History</h3>
+                {polls.map((poll) => (
+                    <div key={poll.id} className="poll">
+                        <div className="poll-header">
+                            <h3 className="poll-question">{poll.question}</h3>
+                        </div>
+                        <ul className="choices-list">
+                            {poll.choices.map((choice) => {
+                                const totalVotes = poll.choices.reduce((acc, c) => acc + c.votes, 0);
+                                const percentage = calculatePercentage(choice.votes, totalVotes);
+                                const isVoted = votedPolls[poll.id] === choice.id;
+                                return (
+                                    <li key={choice.id} className="choice-item">
+                                        <span>{choice.choice_text}</span>
+                                        <div className="vote-result" style={{ width: `${percentage}%`, backgroundColor: isVoted ? 'green' : ' #1877f2' }}>
+                                            {percentage}%
+                                        </div>
+                                    </li>
+                                );
+                            })}
+                        </ul>
+                    </div>
+                ))}
+            </div>
         </div>
     );
 };
 
 export default Polls;
+