Added Progress Bar For Funding

pages/admin.py

@@ -1,5 +1,6 @@
 from django.contrib import admin
-from .models import Story
+from .models import Story, Bar
 
 # Register your models here.
 admin.site.register(Story)
+admin.site.register(Bar)

pages/models.py

@@ -6,4 +6,9 @@ class Story(models.Model):
     header = models.CharField(max_length=30)
     img_name = models.CharField(max_length=50, default=None, null=True)
     body = models.TextField(max_length=200)
-    created = models.DateTimeField(auto_now=True)
+    created = models.DateTimeField(auto_now=True)
+
+
+class Bar(models.Model):
+    name = models.CharField(max_length=50)
+    money_raised = models.FloatField()

pages/templates/pages/index.html

@@ -3,6 +3,24 @@
 {% block title %}Home{% endblock title %}
 {% block css %}
     <link rel="stylesheet" type="text/css" href="{% static 'pages/css/styles.css' %}">
+    <style>
+    #progress {
+      width: 100%;
+      background-color: #eee;
+      border-radius: 50px;
+    }
+
+    #bar {
+      width: 1%;
+      height: 50px;
+      background-color: #0000ff ;
+      text-align: center;
+      line-height: 50px;
+      color: white;
+      border-radius: 50px;
+      transition: all 1s;
+    }
+    </style>
 {% endblock css %}
 {% block content %}
 <div class="jumbotron jumbotron-fluid">
@@ -26,4 +44,33 @@
         {% endfor %}
     </div>
 </div>
+
+<br><br><br>
+<div class="container news">
+    <h1 class="text-center font-weight-bold">{{ bar.name }}!</h1>
+    <br><br>
+    <div id="progress">
+      <div id="bar">$0</div>
+    </div>
+    <script>
+    document.addEventListener("DOMContentLoaded", function(){
+      var thing = ({{ bar.money_raised }})/50000;
+      thing = thing * 100;
+      console.log(thing);
+      width = 1;
+      var id = setInterval(frame, 100);
+      function frame() {
+          if (width < thing) {
+              width+=.25;
+              document.getElementById('bar').style.width = width + "%";
+              document.getElementById('bar').innerHTML = "$" + (width * 500)
+          } else {
+              document.getElementById('bar').style.width = thing + "%";
+              document.getElementById('bar').innerHTML = "$" + (thing * 500)
+              clearInterval(id);
+          }
+      }
+    });
+    </script>
+</div>
 {% endblock content %}

pages/views.py

@@ -1,16 +1,18 @@
 from django.shortcuts import render
-from .models import Story
+from .models import Story, Bar
 
 
 # Create your views here.
 def index(request):
     try:
         stories = Story.objects.all().order_by('-created')
+        bar = Bar.objects.all()[0]
         stories = stories[:3]
     except Exception:
         stories = []
+        bar = None
 
-    return render(request, 'pages/index.html', {'stories': stories, 'animate': True})
+    return render(request, 'pages/index.html', {'stories': stories, 'animate': True, 'bar': bar})
 
 
 def council(request):