Added cool animation when habit is done in the unit

app.py

@@ -298,6 +298,9 @@ def check_habit():
     # Check if habit has been tracked today
     delete_tracking = None
     for tracking in trackings:
+        if tracking.created_at.date() == datetime.date.today():
+            delete_tracking = tracking
+        """
         # day
         if habit.unit == 0:
             if tracking.created_at.date() == datetime.date.today():
@@ -318,6 +321,7 @@ def check_habit():
             if tracking.created_at.date().year == datetime.date.today().year:
                 delete_tracking = tracking
                 break
+                """
 
     if not delete_tracking:
         HabitTrackings.create(habit_id, 1)

models/Habit.py

@@ -81,25 +81,28 @@ class Habit:
         count = 0
         self.checked = False
         for tracking in self.get_habitTrackings():
+            if tracking.created_at.day == datetime.today().day:
+                self.checked = True
+
             # day
             if self.unit == 0:
-                if tracking.created_at == datetime.today():
-                    self.checked = True
+                if tracking.created_at.day == datetime.today().day:
+                    # self.checked = True
                     count += 1
             # week
             elif self.unit == 1:
                 if tracking.created_at.isocalendar()[1] == datetime.today().isocalendar()[1]:
-                    self.checked = True
+                    # self.checked = True
                     count += 1
             # month
             elif self.unit == 2:
                 if tracking.created_at.month == datetime.today().month:
-                    self.checked = True
+                    # self.checked = True
                     count += 1
             # year
             elif self.unit == 3:
                 if tracking.created_at.year == datetime.today().year:
-                    self.checked = True
+                    # self.checked = True
                     count += 1
 
         self.percentage = int(count / self.times * 100)

templates/index.html

@@ -109,7 +109,7 @@
                 </button>
                 <div class="col-12">
                     <div class="progress" style="height: 2px; width: 90%">
-                        <div class="progress-bar" id="progress-bar-{{habit.id}}" role="progressbar" style="width: {{ habit.percentage }}%;"></div>
+                        <div class="progress-bar" id="progress-bar-{{habit.id}}" role="progressbar" style="width: {{ habit.percentage }}%; background-color: {% if habit.percentage >= 100 %} green {% else %} primary {% endif %}" aria-valuenow="{{ habit.percentage }}" aria-valuemin="0" aria-valuemax="100"></div>
                     </div>
                 </div>
             </li>
@@ -146,6 +146,22 @@
 
 
     <script>
+        function checkCompletionAndAnimate(habitId, percentage) {
+            var progressBar = document.getElementById("progress-bar-" + habitId);
+            var habitBlock = document.getElementById("habit-" + habitId);
+
+            if (percentage >= 100) {
+                progressBar.style.backgroundColor = "green";
+                habitBlock.classList.add("animate-bounce");
+                setTimeout(function () {
+                    habitBlock.classList.remove("animate-bounce");
+                }, 2000);
+            } else {
+                progressBar.style.backgroundColor = "";
+                habitBlock.classList.remove("animate-bounce");
+            }
+        }
+
         function sendPostRequest(checkboxId) {
             // Get the checkbox element using the provided ID
             var checkbox = document.getElementById(checkboxId);
@@ -167,6 +183,7 @@
                 var percentage = response.data.percentage;
                 var progressBar = document.getElementById("progress-bar-" + habitId);
                 progressBar.style.width = percentage + "%";
+                checkCompletionAndAnimate(habitId, percentage);
             }).catch(function (error) {
                 // Handle the error if needed
                 console.error('Error:', error);

templates/layouts/main.html

@@ -7,7 +7,7 @@
 
     <!-- Bootstrap CSS -->
     <link rel="stylesheet" href="/static/main.css">
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/fastbootstrap@2.2.0/dist/css/fastbootstrap.min.css" rel="stylesheet" integrity="sha256-V6lu+OdYNKTKTsVFBuQsyIlDiRWiOmtC8VQ8Lzdm2i4=" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
 
     <!-- Axios Library-->
@@ -52,8 +52,7 @@
     {% block content %} {% endblock %}
 
     <!-- Bootstrap JS -->
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
 </div>
 </body>
 </html>