made public polling working and also shows result

accounts/admin.py

@@ -10,8 +10,8 @@ from .forms import UserAdminCreationForm,UserAdminUpdateForm
 class MyUserAdmin(admin.ModelAdmin):
 
     search_fields=('email','username')
-    #ordering=('-start_date',)
-    list_display = ('email','username','is_active','is_staff','is_superuser')
+    ordering=('-joining_date',)
+    list_display = ('email','username','joining_date','is_active','is_staff','is_superuser')
 
     # fieldsets=((None,{'fields':('email','username')}),
     #            (None,{'fields':('password',)}))

accounts/migrations/0003_user_joining_date.py

@@ -0,0 +1,19 @@
+# Generated by Django 4.2.3 on 2023-07-27 01:18
+
+from django.db import migrations, models
+import django.utils.timezone
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('accounts', '0002_alter_user_is_active'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='user',
+            name='joining_date',
+            field=models.DateTimeField(default=django.utils.timezone.now, verbose_name='Joining Date'),
+        ),
+    ]

accounts/models.py

@@ -1,4 +1,5 @@
 from django.db import models
+from django.utils import timezone
 from django.contrib.auth.models import AbstractBaseUser,PermissionsMixin,BaseUserManager
 
 
@@ -38,6 +39,7 @@ class User(AbstractBaseUser,PermissionsMixin):
 
     email        = models.EmailField(verbose_name="Email Address",primary_key=True,max_length=255,unique=True)
     username     = models.CharField("Name",max_length=150,unique=False)
+    joining_date = models.DateTimeField("Joining Date",default=timezone.now)
     is_staff     = models.BooleanField(default=False)
     is_superuser = models.BooleanField(default=False)
     is_active    = models.BooleanField(default=True)

newdata.json

@@ -0,0 +1 @@
+[{"model": "polls.question", "pk": 1, "fields": {"author": "panthrianuj@gmail.com", "question_text": "What is your age group ?", "pub_date": "2023-07-26T08:45:41Z"}}, {"model": "polls.question", "pk": 2, "fields": {"author": "panthrianuj@gmail.com", "question_text": "who do you love the most?", "pub_date": "2023-07-26T09:44:13Z"}}, {"model": "polls.question", "pk": 3, "fields": {"author": "panthrianuj@gmail.com", "question_text": "which laptop is the best ?", "pub_date": "2023-07-26T16:24:56Z"}}, {"model": "polls.question", "pk": 4, "fields": {"author": "panthriankur@gmail.com", "question_text": "new question ?", "pub_date": "2023-07-28T06:10:51.731Z"}}, {"model": "polls.question", "pk": 8, "fields": {"author": "panthrianuj@gmail.com", "question_text": "dffg", "pub_date": "2023-07-28T09:01:45.976Z"}}, {"model": "polls.question", "pk": 9, "fields": {"author": "panthrianuj@gmail.com", "question_text": "dffg", "pub_date": "2023-07-28T09:02:31.530Z"}}, {"model": "polls.choice", "pk": 1, "fields": {"question": 1, "choice_text": "under 15"}}, {"model": "polls.choice", "pk": 2, "fields": {"question": 1, "choice_text": "16-18"}}, {"model": "polls.choice", "pk": 3, "fields": {"question": 1, "choice_text": "20-24"}}, {"model": "polls.choice", "pk": 4, "fields": {"question": 2, "choice_text": "Friends"}}, {"model": "polls.choice", "pk": 5, "fields": {"question": 2, "choice_text": "Family"}}, {"model": "polls.choice", "pk": 6, "fields": {"question": 3, "choice_text": "Acer"}}, {"model": "polls.choice", "pk": 7, "fields": {"question": 3, "choice_text": "Msi"}}, {"model": "polls.choice", "pk": 8, "fields": {"question": 3, "choice_text": "Hp"}}, {"model": "polls.choice", "pk": 9, "fields": {"question": 3, "choice_text": "Dell"}}, {"model": "polls.choice", "pk": 10, "fields": {"question": 3, "choice_text": "Asus"}}, {"model": "polls.choice", "pk": 11, "fields": {"question": 4, "choice_text": "me"}}, {"model": "polls.choice", "pk": 12, "fields": {"question": 4, "choice_text": "you"}}, {"model": "polls.choice", "pk": 19, "fields": {"question": 8, "choice_text": "{{ choice.choice_text }}"}}, {"model": "polls.choice", "pk": 20, "fields": {"question": 8, "choice_text": "{{ choice.choice_text }}"}}, {"model": "polls.choice", "pk": 21, "fields": {"question": 8, "choice_text": "{{ choice.choice_text }}"}}, {"model": "polls.choice", "pk": 22, "fields": {"question": 9, "choice_text": "{{ choice.choice_text }}"}}, {"model": "polls.choice", "pk": 23, "fields": {"question": 9, "choice_text": "{{ choice.choice_text }}"}}, {"model": "polls.choice", "pk": 24, "fields": {"question": 9, "choice_text": "{{ choice.choice_text }}"}}]

polls/admin.py

@@ -1,21 +1,32 @@
 from django.contrib import admin
-from .models import Question,Choice
+from .models import Question,Choice,Vote
 
 
 class ChoiceInline(admin.TabularInline):
-    # fields=['question_text','pub_date']
-    model=Choice
-    extra=2
+    fields          = ['choice_text']
+    model           = Choice
+    extra           = 2
 
 class QuestionAdmin(admin.ModelAdmin):
-    # fields=['question_text','pub_date']
-    
-    fieldsets=[("question",{"fields":['question_text']}),
-               ("Date information",{"fields":['pub_date']})]
+    # fields=['question_text','pub_date','author']
     
     inlines = [ChoiceInline]
+    
+    readonly_fields = ['pub_date']
+    
+    
+    
+    
+    fieldsets = [("question",{"fields":['question_text']}),
+                ("Meta data",{"fields":['pub_date','author']})]
+    
+    model = Question
+
+    def get_changeform_initial_data(self, request):
+        return {"author": request.user}
 
 
 # Register your models here.
 admin.site.register(Question,QuestionAdmin)
-admin.site.register(Choice)
+admin.site.register(Choice)
+admin.site.register(Vote)

polls/forms.py

@@ -1,6 +1,7 @@
 from django import forms
 from django.contrib.auth import get_user_model
 from accounts.forms import UserAdminCreationForm,UserAdminUpdateForm
+from .models import Question
 
 User=get_user_model()
 
@@ -12,3 +13,11 @@ class UserSignupForm(UserAdminCreationForm):
 class UserLoginForm(forms.Form):
     email    = forms.EmailField()
     password = forms.CharField(widget=forms.PasswordInput)
+
+
+class QuestionForm(forms.ModelForm):
+    class Meta:
+        model=Question
+        fields=('question_text','pub_date','author')
+    
+    

polls/migrations/0002_question_author.py

@@ -0,0 +1,22 @@
+# Generated by Django 4.2.3 on 2023-07-27 01:27
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+        ('polls', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='question',
+            name='author',
+            field=models.ForeignKey(default='panthrianuj@gmail.com', on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL),
+            preserve_default=False,
+        ),
+    ]

polls/migrations/0003_remove_choice_votes_votes.py

@@ -0,0 +1,28 @@
+# Generated by Django 4.2.3 on 2023-07-28 06:29
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+        ('polls', '0002_question_author'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='choice',
+            name='votes',
+        ),
+        migrations.CreateModel(
+            name='Votes',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('choice', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='polls.choice')),
+                ('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
+            ],
+        ),
+    ]

polls/migrations/0004_rename_votes_vote.py

@@ -0,0 +1,19 @@
+# Generated by Django 4.2.3 on 2023-07-28 06:32
+
+from django.conf import settings
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+        ('polls', '0003_remove_choice_votes_votes'),
+    ]
+
+    operations = [
+        migrations.RenameModel(
+            old_name='Votes',
+            new_name='Vote',
+        ),
+    ]

polls/models.py

@@ -1,10 +1,13 @@
 from django.db import models
 import datetime
 from django.utils import timezone
+from django.contrib.auth import get_user_model
 
+User=get_user_model()
 # Create your models here.
 class Question(models.Model):
     
+    author        = models.ForeignKey(User,on_delete=models.CASCADE)
     question_text = models.CharField(max_length=300)
     pub_date      = models.DateTimeField("date published",default=datetime.datetime.now)
     
@@ -13,7 +16,11 @@ class Question(models.Model):
     
     @property
     def total_votes(self):
-        return self.choice_set.aggregate(models.Sum('votes'))['votes__sum']
+        return len(Vote.objects.filter(choice__question__pk=self.pk))
+    
+    def has_user_voted(self,user):
+        return len(Vote.objects.filter(choice__question__pk=self.pk,user=user))>0
+
     def was_recently_pub(self):
         return self.pub_date >= timezone.now() - datetime.timedelta(days=1)
 
@@ -22,7 +29,19 @@ class Choice(models.Model):
     
     question    = models.ForeignKey(Question, on_delete=models.CASCADE)
     choice_text = models.CharField(max_length=200)
-    votes       = models.IntegerField(default=0)
     
     def __str__(self):
-        return self.question.question_text+"-"*5+self.choice_text
+        return self.question.question_text+"-"*5+self.choice_text
+    
+    @property
+    def vote_count(self):
+        return len(Vote.objects.filter(choice=self.pk))
+    @property
+    def vote_percent(self):
+        return "{:.2f}".format(((self.vote_count/(self.question.total_votes))*100))
+        
+    
+
+class Vote(models.Model):
+    user     = models.ForeignKey(User, on_delete=models.CASCADE)
+    choice   = models.ForeignKey(Choice, on_delete=models.CASCADE)

polls/static/polls/create.css

@@ -0,0 +1,160 @@
+/*********************sub header***************************/
+#sub_header{
+    font-weight:100;
+    padding:40px 40px;
+    padding-bottom: 0px;
+}
+
+
+/*******************main container*******************************/
+
+#main_container{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+}
+
+.question_container{
+    width:500px;
+    
+    color:#ffffff;
+    background-color: #5B66C6;
+    
+    border-radius: 7px;
+    box-shadow: 0px 20px 52px 0px #0000004b;
+    overflow: hidden;
+    margin-top:40px;
+}
+.question_container:last-child{
+    margin-bottom:40px;
+}
+
+.question_header{
+    padding: 30px 20px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+
+}
+
+
+.question_meta{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-right: 30px;
+
+    font-size: small;
+    font-weight: 100;
+}
+
+.question_header>#question_text{
+    height: 20px;
+    width: 60%;
+    color:white;
+    background-color: #5B66C6;
+    border:none;
+    outline: none;
+    border-bottom:white solid 2px;
+
+    display: block;
+    overflow: hidden;
+    resize: none;
+}
+.question_header>#question_text::placeholder{
+    color:#dddbdb;
+}
+
+.question_header>.right_section{
+    display: flex;
+    align-items: center;
+
+}
+.question_header>.right_section>img{
+    fill: white;
+    height: 25px;
+    
+    
+}  
+
+.question_container>.form_container{
+    box-sizing: border-box;
+    padding: 10px 20px;
+    width: 100%;
+    border-radius: 7px;
+
+    background-color: white;
+    
+    
+    display:flex;
+    flex-direction: column;
+    align-items: center;
+
+}
+.choices{
+    margin-top: 30px;
+    width: 100%;
+}
+
+.choice{
+    margin: 10px 0;
+    padding: 10px 20px;
+    
+    background-color: #5b66c670;
+    
+    border-radius: 3px;
+
+    display: flex;
+    position: relative;
+}
+
+.choice_text{
+    margin-left: 20px;
+    width: 80%;
+
+    color:white;
+    background-color:transparent;
+    border:none;
+    outline: none;
+    border-bottom:white solid 2px;
+
+    display: block;
+    overflow: hidden;
+    resize: none;
+}   
+.remove_choice_btn{
+    position: absolute;
+    right:20px;
+    color: red;
+    /* top:2px; */
+}
+.remove_choice_btn:hover{
+    cursor: pointer;
+}
+.create_btn{
+    margin: 10px 0;
+    border:none;
+    outline: none;
+    
+    background-color: #5B66C6;
+    color: white;
+    padding: 10px 30px;
+    border-radius: 8px;
+}
+
+.create_btn:hover{
+    cursor: pointer;
+}
+
+
+#add_option{
+    color:#5B66C6;
+    
+}
+#add_option:hover{
+    text-decoration:#5B66C6 underline solid 2px;
+    cursor: pointer;
+}

polls/static/polls/create.js

@@ -0,0 +1,164 @@
+
+var tx = document.getElementsByTagName('textarea');
+for (var i = 0; i < tx.length; i++) {
+  tx[i].setAttribute('style', 'height:' + (tx[i].scrollHeight) + 'px;overflow-y:hidden;');
+  tx[i].addEventListener("input", OnInput, false);
+}
+
+function OnInput(e) {
+    e.target.style.height = 'auto';
+    e.target.style.height = (e.target.scrollHeight) + 'px';
+}
+
+
+function getCookie(name) {
+    let cookieValue = null;
+
+    if (document.cookie && document.cookie !== '') {
+        const cookies = document.cookie.split(';');
+        for (let i = 0; i < cookies.length; i++) {
+            const cookie = cookies[i].trim();
+
+            // Does this cookie string begin with the name we want?
+            if (cookie.substring(0, name.length + 1) === (name + '=')) {
+                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+
+                break;
+            }
+        }
+    }
+
+    return cookieValue;
+}
+const csrftoken = getCookie('csrftoken');
+
+
+
+
+
+function number_choices(){
+    var i=0;
+    var choice_list=document.querySelectorAll(".choices>.choice");
+    choice_list.forEach(choice=>{
+        i++;
+        choice.querySelector("span>span").innerHTML=String.fromCharCode(i+64);
+    })
+
+
+}
+
+function create_choice(){
+    /*
+    <div class="choice">
+        <span>
+            <span>{{ forloop.counter|add:"64"|stringformat:"c" }}</span>
+            <span> -</span>
+        </span>
+        <span class="choice_text">{{ choice.choice_text }}</span>
+    </div>
+    */
+    
+    // <div class="remove_choice_btn" onclick="delete_choice()">X</div>
+
+    
+    var choices_div=document.querySelector(".choices");
+    var choice_div=document.createElement("div");
+    choice_div.className="choice";
+    
+    
+    choice_div.innerHTML=`<span>\
+                            <span>A</span>\
+                            <span> -</span>\
+                            </span>\
+                          <textarea class="choice_text" oninput="OnInput(event)"></textarea>`;
+    
+    if (choices_div.querySelectorAll(".choice").length>0){
+        choice_div.innerHTML+=`<div class="remove_choice_btn" onclick="delete_choice(this)">X</div>`;
+    }
+
+    choices_div.appendChild(choice_div);
+
+    number_choices();
+
+
+}
+
+function delete_choice(elem){
+    
+    elem.parentNode.remove();
+    number_choices();
+}
+
+
+function validate(){
+    if(question_text.value==''){
+        question_text.style.borderBottom="2px solid red";
+        question_text.focus();
+
+        return false;
+    }
+    else{
+        question_text.style.removeProperty("border-bottom");
+    }
+
+    choice_list=document.querySelectorAll(".choice");
+    var i=0;
+    for(i=0;i<choice_list.length;i++){
+        choice_text=choice_list[i].querySelector(".choice_text");
+        
+        if(choice_text.value==""){
+            choice_text.style.borderBottom="2px solid red";
+            choice_text.focus();
+            return false
+        }
+        else{
+            choice_text.style.removeProperty("border-bottom");   
+        }
+    }
+    
+    return true;
+}
+
+
+
+function create_question(){
+    if(!validate()) return;
+    
+    var data_to_send = {};
+
+    
+    
+
+    var choice_text_list=[];
+    choice_list=document.querySelectorAll(".choice");
+    var i=0;
+    for(i=0;i<choice_list.length;i++){
+        choice_text=choice_list[i].querySelector(".choice_text");
+        
+        choice_text_list.push(choice_text.value);
+        
+    }
+    
+    // console.log(question_text.value);
+    // console.log(choice_text_list);
+
+    data_to_send["question_text"]=question_text.value;
+    data_to_send["choice_text_list"]=choice_text_list;
+
+    fetch("",{
+        method:"POST",
+        headers:{
+            'X-CSRFToken': csrftoken
+        },
+        body:JSON.stringify(data_to_send)
+    }).then(res=>res.json()).then(res=>{
+        console.log(res);
+        if (!res.hasOwnProperty("error_message")){
+            window.location.href = res["redirect"];
+        }
+    });
+
+}
+
+create_choice();
+create_choice();

polls/static/polls/header.css

@@ -0,0 +1,77 @@
+*{
+    padding:0px;
+    margin: 0px;
+}
+header{
+    background-color: #5B66C6;
+    color:white;
+    height:80px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 80px;
+}
+header>#app_name{
+    font-size: larger;
+}
+
+#profile{
+    background-color: #00000058;
+    
+    height: 60px;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    position:relative;
+}
+#profile:hover{
+    cursor: pointer;
+}
+
+#profile>#first_alpha{
+    position:absolute;
+    top:50%;
+    left:50%;
+    transform: translate(-50%,-50%);
+
+}
+
+#profile>#profile_options{
+    position: absolute;
+    right:0;
+    top: 100%;
+    margin-top:10px;
+
+    background-color: #ffffff;
+
+    width: 180px;
+    
+    box-shadow: 0px 4px 29px 0px #0000004b;
+    border-radius: 10px;
+
+    overflow: hidden;
+}
+#profile_options.hidden{
+    display: none;
+}
+
+#profile_options>.option{
+
+    padding: 10px 0;
+    color:black;
+    border-bottom: #C3C3C3 solid 1px;
+    text-decoration: none;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+#profile_options>.option:last-child{
+    border-bottom:none; /*used to remove border of last option*/
+}
+
+#profile_options>.option:hover{
+    background-color: gray;
+    color:white;
+}
+

polls/static/polls/index.css

@@ -35,87 +35,13 @@
 
 /***********************New css*****************************/
 
-
-*{
-    padding:0px;
-    margin: 0px;
-}
-
-
-
-
-header{
-    background-color: #5B66C6;
-    color:white;
-    height:80px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 80px;
-}
-header>#app_name{
-    font-size: larger;
-}
-
-#profile{
-    background-color: #00000058;
-    
-    height: 60px;
-    aspect-ratio: 1;
-    border-radius: 50%;
-    position:relative;
-}
-#profile:hover{
-    cursor: pointer;
-}
-
-#profile>#first_alpha{
-    position:absolute;
-    top:50%;
-    left:50%;
-    transform: translate(-50%,-50%);
-
-}
-
-#profile>#profile_options{
-    position: absolute;
-    right:0;
-    top: 100%;
-    margin-top:10px;
-
-    background-color: #ffffff;
-
-    width: 180px;
-    
-    box-shadow: 0px 4px 29px 0px #0000004b;
-    border-radius: 10px;
-
-    overflow: hidden;
-}
-#profile_options.hidden{
-    display: none;
-}
-
-#profile_options>.option{
-
-    padding: 10px 0;
-    color:black;
-    border-bottom: #C3C3C3 solid 1px;
-    
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+:root{
+    --primary-color:#5B66C6;
+    --secondary-color:#5b66c670;
+    --percentage-color:#7a73ff;
 }
 
-#profile_options>.option:last-child{
-    border-bottom:none; /*used to remove border of last option*/
-}
 
-#profile_options>.option:hover{
-    background-color: gray;
-    color:white;
-}
 
 
 
@@ -141,13 +67,16 @@ header>#app_name{
     width:500px;
     
     color:#ffffff;
-    background-color: #5B66C6;
+    background-color: var(--primary-color);
     
     border-radius: 7px;
     box-shadow: 0px 20px 52px 0px #0000004b;
     overflow: hidden;
     margin-top:40px;
 }
+.question_container:last-child{
+    margin-bottom:40px;
+}
 
 .question_header{
     padding: 10px 20px;
@@ -169,8 +98,15 @@ header>#app_name{
     font-weight: 100;
 }
 
-.question_header>span{
+.question_header>.question_text{
     width: 60%;
+    color:white;
+    background-color: var(--primary-color);
+    border:none;
+    outline: none;
+
+    overflow: hidden;
+    resize: none;
 }
 .question_header>.right_section{
     display: flex;
@@ -207,27 +143,44 @@ header>#app_name{
     margin: 10px 0;
     padding: 10px 20px;
     
-    background-color: #5b66c670;
+    background-color: var(--secondary-color);
     
     border-radius: 3px;
+    display: flex;
 }
 
 .choice_text{
     margin-left: 20px;
+    width: 70%;
+    color:white;
+    background-color:transparent;
+    border:none;
+    outline: none;
+    overflow: hidden;
+    resize: none;
+}
+.choice_text:hover{
+    cursor:pointer;
 }
 
 .choice:hover{
-    background-color: #5B66C6;
+    background-color: var(--primary-color);
     /* color:#C3C3C3; */
     cursor: pointer;
 }
+.choice.active{
+    background-color: var(--primary-color);
+}
+/* .choices.result>.choice{
+    background: linear-gradient(90deg, var(--percentage-color) 50%, var(--secondary-color) 0%);
+} */
 
 .vote_btn{
     margin: 10px 0;
     border:none;
     outline: none;
     
-    background-color: #5B66C6;
+    background-color: var(--primary-color);
     color: white;
     padding: 10px 30px;
     border-radius: 8px;

polls/static/polls/index.js

@@ -0,0 +1,100 @@
+
+var tx = document.getElementsByTagName('textarea');
+for (var i = 0; i < tx.length; i++) {
+  tx[i].setAttribute('style', 'height:' + (tx[i].scrollHeight) + 'px;overflow-y:hidden;');
+  tx[i].addEventListener("input", OnInput, false);
+}
+
+function OnInput(e) {
+    e.target.style.height = 'auto';
+    e.target.style.height = (e.target.scrollHeight) + 'px';
+}
+
+
+function getCookie(name) {
+    let cookieValue = null;
+
+    if (document.cookie && document.cookie !== '') {
+        const cookies = document.cookie.split(';');
+        for (let i = 0; i < cookies.length; i++) {
+            const cookie = cookies[i].trim();
+
+            // Does this cookie string begin with the name we want?
+            if (cookie.substring(0, name.length + 1) === (name + '=')) {
+                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+
+                break;
+            }
+        }
+    }
+
+    return cookieValue;
+}
+const csrftoken = getCookie('csrftoken');
+
+
+
+
+
+function select_option(elem){
+    elem.parentNode.querySelectorAll(".choice.active").forEach(choice => {
+        if (elem!=choice)
+            choice.classList.remove("active");
+    });
+    elem.classList.toggle("active");
+}
+
+
+function validate(elem){
+    var active_choices=elem.querySelectorAll(".choice.active");
+    for(var i=0;i<active_choices.length;i++){
+        return true;
+    }
+    
+    return false;
+}
+
+function Vote(elem){
+    if(!validate(elem.parentElement))   return;
+
+    var data_to_send = {};
+
+    
+    data_to_send["choice_id"]=elem.parentElement.querySelector('.choice.active').dataset.id;
+
+    fetch("vote/",{
+        method:"POST",
+        headers:{
+            'X-CSRFToken': csrftoken
+        },
+        body:JSON.stringify(data_to_send)
+    }).then(res=>res.json()).then(res=>{
+        console.log(res);
+        
+        if (res["message"]=="success"){
+            
+            elem.parentElement.querySelectorAll(".choice").forEach(choice=>{
+                choice.dataset.percent=res['vote_percent_dict'][choice.dataset.id];
+                show_result(choice);
+            });
+            // update total vote by adding 1
+            var total_votes=elem.parentElement.parentElement.querySelector(".total_votes");
+            total_votes.innerText=parseInt(total_votes.innerText)+1;        
+            console.log(total_votes);
+
+        }
+        
+    });
+
+    
+}
+
+document.querySelectorAll(".choices.result>.choice").forEach(choice=>{
+    console.log(choice.dataset.percent);
+    show_result(choice);
+});
+
+function show_result(choice){
+    choice.style.background= `linear-gradient(90deg, var(--percentage-color) ${choice.dataset.percent}%, var(--secondary-color) 0%)`;
+    choice.innerHTML+=choice.dataset.percent+"%";
+}

polls/static/polls/your_polls.css

@@ -0,0 +1,180 @@
+/* .questions{
+    display: flex;
+    flex-wrap: wrap;
+}
+.question{    
+    background-color: rgb(133, 127, 255);
+    color: white;
+    padding: 4px;
+    margin:20px 4px;
+    width:140px;
+    height: 150px;
+    border-radius: 10px;
+    position:relative;
+}
+.question>.question_text{
+    font: caption;
+    margin: 0px;
+    padding: 0px;
+    margin-bottom: 14px;
+}
+.question:hover{
+    cursor: pointer;
+}
+
+.total_count{
+    font:-webkit-control;
+    color: black;
+    position:absolute;
+    bottom: 5px;
+    right: 5px;
+    padding: 0;
+    margin: 0;
+} */
+
+
+/***********************New css*****************************/
+
+
+
+
+
+
+
+
+/*********************sub header***************************/
+#sub_header{
+    font-weight:100;
+    padding:40px 40px;
+    padding-bottom: 0px;
+}
+
+
+/*******************main container*******************************/
+
+#main_container{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+}
+
+.question_container{
+    width:500px;
+    
+    color:#ffffff;
+    background-color: #5B66C6;
+    
+    border-radius: 7px;
+    box-shadow: 0px 20px 52px 0px #0000004b;
+    overflow: hidden;
+    margin-top:40px;
+}
+.question_container:last-child{
+    margin-bottom:40px;
+}
+
+.question_header{
+    padding: 10px 20px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+
+}
+
+.question_meta{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-right: 30px;
+
+    font-size: small;
+    font-weight: 100;
+}
+
+.question_header>.question_text{
+    width: 60%;
+    color:white;
+    background-color: #5B66C6;
+    border:none;
+    outline: none;
+
+    overflow: hidden;
+    resize: none;
+}
+.question_header>.right_section{
+    display: flex;
+    align-items: center;
+
+}
+.question_header>.right_section>img{
+    fill: white;
+    height: 25px;
+    
+    
+}  
+
+.question_container>.form_container{
+    box-sizing: border-box;
+    padding: 10px 20px;
+    width: 100%;
+    border-radius: 7px;
+
+    background-color: white;
+    
+    
+    display:flex;
+    flex-direction: column;
+    align-items: center;
+
+}
+.choices{
+    margin-top: 30px;
+    width: 100%;
+}
+
+.choice{
+    margin: 10px 0;
+    padding: 10px 20px;
+    
+    background-color: #5b66c670;
+    
+    border-radius: 3px;
+    display: flex;
+}
+
+.choice_text{
+    margin-left: 20px;
+    color:white;
+    background-color:transparent;
+    border:none;
+    outline: none;
+    overflow: hidden;
+    resize: none;
+}
+.choice_text:hover{
+    cursor:pointer;
+}
+
+.choice:hover{
+    background-color: #5B66C6;
+    /* color:#C3C3C3; */
+    cursor: pointer;
+}
+
+.vote_btn{
+    margin: 10px 0;
+    border:none;
+    outline: none;
+    
+    background-color: #5B66C6;
+    color: white;
+    padding: 10px 30px;
+    border-radius: 8px;
+}
+
+.vote_btn:hover{
+    cursor: pointer;
+}

polls/static/polls/your_polls.js

@@ -0,0 +1,64 @@
+
+var tx = document.getElementsByTagName('textarea');
+for (var i = 0; i < tx.length; i++) {
+  tx[i].setAttribute('style', 'height:' + (tx[i].scrollHeight) + 'px;overflow-y:hidden;');
+  tx[i].addEventListener("input", OnInput, false);
+}
+
+function OnInput(e) {
+    e.target.style.height = 'auto';
+    e.target.style.height = (e.target.scrollHeight) + 'px';
+}
+
+
+function getCookie(name) {
+    let cookieValue = null;
+
+    if (document.cookie && document.cookie !== '') {
+        const cookies = document.cookie.split(';');
+        for (let i = 0; i < cookies.length; i++) {
+            const cookie = cookies[i].trim();
+
+            // Does this cookie string begin with the name we want?
+            if (cookie.substring(0, name.length + 1) === (name + '=')) {
+                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+
+                break;
+            }
+        }
+    }
+
+    return cookieValue;
+}
+const csrftoken = getCookie('csrftoken');
+
+
+
+function validate(){
+    if(question_text.value==''){
+        question_text.style.borderBottom="2px solid red";
+        question_text.focus();
+
+        return false;
+    }
+    else{
+        question_text.style.removeProperty("border-bottom");
+    }
+
+    choice_list=document.querySelectorAll(".choice");
+    var i=0;
+    for(i=0;i<choice_list.length;i++){
+        choice_text=choice_list[i].querySelector(".choice_text");
+        
+        if(choice_text.value==""){
+            choice_text.style.borderBottom="2px solid red";
+            choice_text.focus();
+            return false
+        }
+        else{
+            choice_text.style.removeProperty("border-bottom");   
+        }
+    }
+    
+    return true;
+}

polls/templates/polls/base.html

@@ -0,0 +1,16 @@
+<html>
+<head>
+    {% load static %}
+    <link type="text/css" rel="stylesheet" href="{% static 'polls/header.css' %}">
+    {% include 'polls/font.html' %}
+    
+    {% block head %}{% endblock %}
+
+</head>
+<body>
+    {% include 'polls/header.html' %}
+    
+    {% block body %}{% endblock %}
+    <script src="{% static 'polls/header.js' %}"></script>
+</body>
+</html>

polls/templates/polls/create.html

@@ -0,0 +1,55 @@
+{% extends 'polls/base.html' %}
+
+{% block head %}
+    {% load static %}
+    <link type="text/css" rel="stylesheet" href="{% static 'polls/create.css' %}">
+{% endblock %}
+
+{% block body %}
+    
+    <h2 id="sub_header">Create Poll</h2>
+
+    
+
+
+        <div id="main_container">
+           
+
+                <div class="question_container">
+                    <div class="question_header">
+                        <textarea id="question_text" placeholder="New question"></textarea>
+                        
+                    </div>
+                    <div class="form_container">
+                        <div class="choices">
+                            
+                            
+                        </div>
+                        <span id="add_option" onclick="create_choice()">Add option</span>
+                        <button class="create_btn" onclick="create_question()">Create</button>
+                        
+                    </div>
+                </div>
+            
+        </div>
+
+        
+    <!-- {% if latest_questions_list %}
+
+        <div class="questions" >
+            {% for question in latest_questions_list %}
+            
+            <div class="question" onclick="window.location.href = `{% url 'polls:detail' question.id %}`;">
+                <p class="question_text">{{ question }}</p>
+                <p class="total_count">Votes:{{ question.total_votes }}</p>  
+            </div>
+            {% endfor %}
+        </div>
+
+        
+    {% else %}
+        <p>No questions yet</p>
+    {% endif %} -->
+    <script src="{% static 'polls/create.js' %}"></script>
+
+{% endblock %}

polls/templates/polls/header.html

@@ -0,0 +1,16 @@
+<header>
+    <span id="app_name">Polling App</span>
+    
+    <div id="profile" onclick="toggle_profile_options(event)">
+        <span id="first_alpha">{{ request.user }}</span>
+
+        <div id="profile_options" class="hidden">
+            <a class="option" href="{% url 'polls:create' %}">Create Poll</a>
+            <a class="option" href="{% url 'polls:your_polls' %}">Your Polls</a>
+            <a class="option" href = "{% url 'polls:your_votes' %}">Your Votes</a>
+            <a class="option" href = "{% url 'polls:settings' %}">Settings</a>
+            <a class="option" href = "{% url 'polls:logout' %}">Log Out</a>
+        </div>
+
+    </div>
+</header>

polls/templates/polls/index.html

@@ -1,26 +1,12 @@
-<html>
-<head>
+{% extends 'polls/base.html' %}
+
+{% block head %}
+    {% load index %}
     {% load static %}
     <link type="text/css" rel="stylesheet" href="{% static 'polls/index.css' %}">
-    {% include 'polls/font.html' %}
-</head>
-<body>
-    <header>
-        <span id="app_name">Polling App</span>
-        
-        <div id="profile" onclick="toggle_profile_options(event)">
-            <span id="first_alpha">{{ request.user }}</span>
-
-            <div id="profile_options" class="hidden">
-                <div class="option">Create Poll</div>
-                <div class="option">Your Polls</div>
-                <div class="option">Your Votes</div>
-                <div class="option">Settings</div>
-                <div class="option">Log Out</div>
-            </div>
+{% endblock %}
 
-        </div>
-    </header>
+{% block body %}
     
     <h2 id="sub_header">Public Polls</h2>
 
@@ -32,11 +18,11 @@
 
                 <div class="question_container">
                     <div class="question_header">
-                        <span>{{ question.question_text }}</span>
+                        <textarea oninput="OnInput(event)" class="question_text" readonly="true">{{ question.question_text }}</textarea>
                         <div class="right_section">
                             <div class="question_meta">
                                 <span>
-                                    <span>{{ question.total_votes }}</span>
+                                    <span class="total_votes">{{ question.total_votes }}</span>
                                     Votes
                                 </span>
 
@@ -50,19 +36,26 @@
                         </div>
                     </div>
                     <div class="form_container">
-                        <div class="choices">
+                        <div class="choices {{ question.has_voted|yesno:'result,' }}">
                             
                             {% for choice in question.choice_set.all  %}
-                                <div class="choice">
+                                <div class="choice" onclick="select_option(this)" data-id="{{ choice.pk }}" 
+                                    {% if question.has_voted %}
+                                        data-percent="{{ choice.vote_percent }}"
+                                    {% endif %}        
+                                    >
+
                                     <span>
                                         <span>{{ forloop.counter|add:"64"|stringformat:"c" }}</span>
                                         <span> -</span>
                                     </span>
-                                    <span class="choice_text">{{ choice.choice_text }}</span>
+                                    <textarea class="choice_text" oninput="OnInput(event)" readonly="true">{{ choice.choice_text }}</textarea>
+                                    
+                                    
                                 </div>
                             {% endfor %}
                         </div>
-                        <button class="vote_btn">Vote</button>
+                        <button class="vote_btn" onclick="Vote(this)">Vote</button>
                         
                     </div>
                 </div>
@@ -89,6 +82,5 @@
     {% else %}
         <p>No questions yet</p>
     {% endif %} -->
-<script src="{% static 'polls/header.js' %}"></script>
-</body>
-</html>
+<script src="{% static 'polls/index.js' %}"></script>
+{% endblock %}

polls/templates/polls/your_polls.html

@@ -0,0 +1,78 @@
+{% extends 'polls/base.html' %}
+
+{% block head %}
+    {% load static %}
+    <link type="text/css" rel="stylesheet" href="{% static 'polls/index.css' %}">
+{% endblock %}
+
+{% block body %}
+    
+    <h2 id="sub_header">Your Polls</h2>
+
+    {% if latest_questions_list %}
+
+
+        <div id="main_container">
+            {% for question in latest_questions_list %}
+
+                <div class="question_container">
+                    <div class="question_header">
+                        <textarea oninput="OnInput(event)" class="question_text" readonly="true">{{ question.question_text }}</textarea>
+                        <div class="right_section">
+                            <div class="question_meta">
+                                <span>
+                                    <span>{{ question.total_votes }}</span>
+                                    Votes
+                                </span>
+
+                                <span>Results in 
+                                    <span>1 hour</span>
+                                </span>
+                            </div>
+                            
+                            <img src="{% static 'polls/arrow-up-right-from-square-solid.svg' %}">
+        
+                        </div>
+                    </div>
+                    <div class="form_container">
+                        <div class="choices">
+                            
+                            {% for choice in question.choice_set.all  %}
+                                <div class="choice">
+                                    <span>
+                                        <span>{{ forloop.counter|add:"64"|stringformat:"c" }}</span>
+                                        <span> -</span>
+                                    </span>
+                                    <textarea class="choice_text" oninput="OnInput(event)" readonly="true">{{ choice.choice_text }}</textarea>
+                                </div>
+                            {% endfor %}
+                        </div>
+                        <button class="vote_btn">Vote</button>
+                        
+                    </div>
+                </div>
+            {% endfor %}
+        </div>
+
+        
+    {% else %}
+        <p>No questions yet</p>
+    {% endif %}
+    <!-- {% if latest_questions_list %}
+
+        <div class="questions" >
+            {% for question in latest_questions_list %}
+            
+            <div class="question" onclick="window.location.href = `{% url 'polls:detail' question.id %}`;">
+                <p class="question_text">{{ question }}</p>
+                <p class="total_count">Votes:{{ question.total_votes }}</p>  
+            </div>
+            {% endfor %}
+        </div>
+
+        
+    {% else %}
+        <p>No questions yet</p>
+    {% endif %} -->
+<script src="{% static 'polls/index.js' %}"></script>
+{% endblock %}

polls/templatetags/index.py

@@ -0,0 +1,7 @@
+from django import template
+
+register=template.Library()
+
+@register.filter
+def index(indexable,i):
+    return indexable[i]

polls/urls.py

@@ -8,6 +8,13 @@ urlpatterns = [
     path("signup/",views.signup,name="signup"),
     path("login/",views.login,name="login"),
     path("details/<int:question_id>/",views.detail,name="detail"),
-    path("vote/<int:question_id>/",views.vote,name="vote"),
+    path("vote/",views.vote,name="vote"),
     path("result/<int:question_id>/",views.result,name="result"),
+
+    path("create/",views.create,name="create"),
+    path("your_polls/",views.your_polls,name="your_polls"),
+    path("votes/",views.your_votes,name="your_votes"),
+    path("settings/",views.settings,name="settings"),
+    path("logout/",views.logout,name="logout"),
+
 ]

polls/views.py

@@ -4,7 +4,7 @@ from django.contrib.auth import login as auth_login,logout as auth_logout
 from django.contrib.auth import get_user_model
 from django.urls import reverse
 import json
-from .models import Question,Choice
+from .models import Question,Choice,Vote
 from .forms import UserSignupForm,UserLoginForm
 
 
@@ -13,7 +13,17 @@ User = get_user_model() # user model
 # Create your views here.
 def index(request):
     latest_questions_list = Question.objects.order_by("-pub_date")[:5]
-    context={"latest_questions_list":latest_questions_list}
+    
+    
+    for q in latest_questions_list:
+        q.has_voted=q.has_user_voted(request.user) 
+    
+    # print(latest_questions_list[0].has_voted)
+    
+    context={"latest_questions_list":latest_questions_list,
+             
+             }
+
     return render(request,"polls/index.html",context)
 
 def detail(request,question_id):
@@ -24,29 +34,36 @@ def detail(request,question_id):
         
     return render(request,"polls/detail.html",{"question":question})
 
-def vote(request,question_id):
-    
-    question=get_object_or_404(Question,pk=question_id)
-
-
-    try:
+def vote(request):
+    if request.method=='POST':
         json_data=json.loads(request.body)
         print(json_data)
-        selected_choice = question.choice_set.get(pk=json_data["choice"])
-    except(KeyError,Choice.DoesNotExist):
-        # redirect back to details page with error message
-        return JsonResponse({
-            
-            "error_message":"You didn't select a Choice."
-        })
-    
-    else:
-        selected_choice.votes += 1
-        selected_choice.save()
-        # return HttpResponseRedirect(reverse("polls:result",args=(question_id,)))
-        return JsonResponse({
-            "redirect":reverse("polls:result",args=(question_id,)),
+        choice=get_object_or_404(Choice,pk=json_data['choice_id'])
+        # check if already has voted on this question
+        
+        old_vote_on_same_question=Vote.objects.filter(user=request.user,choice__question=choice.question)
+        
+        if len(old_vote_on_same_question)>0:
+            return JsonResponse({
+            "message":"error",
+            'error_message':"you have already voted !"
+            })
 
+
+        vote=Vote.objects.create(choice=choice,user=request.user)
+        vote.save()
+
+        # get percentage of each choice for showing result
+        
+        vote_percent_dict={c.pk:c.vote_percent  for c in choice.question.choice_set.all()}
+        
+        # print(vote_percent_dict)
+
+        
+
+        return JsonResponse({
+            "message":"success",
+            "vote_percent_dict" :vote_percent_dict,
         })
     
 
@@ -117,4 +134,37 @@ def login(request):
                 'data':data}
     # print(context)
 
-    return render(request,"polls/login.html",context)
+    return render(request,"polls/login.html",context)
+
+
+def create(request):
+    if request.method=="GET":
+        return render(request,'polls/create.html',{})
+    
+    json_data=json.loads(request.body)
+    print(json_data)
+    question=Question.objects.create(author=request.user,
+                            question_text=json_data['question_text'])
+    question.save()
+
+    for choice_text in json_data['choice_text_list']:
+        choice=Choice.objects.create(question=question,choice_text=choice_text)
+        choice.save()
+
+    return JsonResponse({
+            
+            "redirect":reverse("polls:index")
+        })
+    
+def your_polls(request):
+    latest_questions_list = Question.objects.filter(author=request.user).order_by("-pub_date")[:5]
+    context={"latest_questions_list":latest_questions_list}
+    return render(request,'polls/your_polls.html',context)
+
+def your_votes(request):
+    pass
+def settings(request):
+    pass
+def logout(request):
+    auth_logout(request)
+    return HttpResponseRedirect(reverse('polls:login'))