tj2023/pages/templates/pages/index.html

{% extends 'pages/base.html' %}
{% load static %}
{% block title %}Home{% endblock title %}
{% block css %}
    <link rel="stylesheet" type="text/css" href="{% static 'pages/css/styles.css' %}">
{% endblock css %}
{% block content %}
<div class="jumbotron jumbotron-fluid">
  <div class="container hero-text contrast">
    <h1 class="display-4"><strong><span class="no-mobile">TJHSST</span> Class of 2023</strong></h1>
    <p class="lead">We are the class to beat!</p>
  </div>
</div>
<div class="container news mb-2">
    <h1 class="text-center font-weight-bold">2023 News</h1>
    <br><br>
    <div class="row">
        {% for story in stories %}
            <div class="border-sides col-md-4 news-col card">
              <img class="card-img-top" src="{% static 'pages/css/img' %}/{{ story.img_name }}" alt="{{ story.header }} Image">
              <div class="card-body">
                <h3 class="card-title">{{ story.header }}</h3>
                <p class="card-text">{{ story.body }}</p>
              </div>
            </div>
        {% endfor %}
    </div>
</div>

{% for bar in bars %}
  <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>
{% endfor %}
{% endblock content %}