Porgressbar und Löschen is kapput

templates/index.html

@@ -104,7 +104,7 @@
                     {{ habit.note }}
                 </div>
 
-                <button type="button" class="btn btn-xs btn-danger rounded-circle" style="width: 40px; height: 40px" onclick="deleteHabit('{{habit.id}}')">
+                <button type="button" class="btn btn-xs btn-danger rounded-circle" data-bs-toggle="modal" data-bs-target="#exampleModal" style="width: 40px; height: 40px" onclick="() => { let habitId = {{habit.id}} }">
                     <i class="bi bi-trash3"></i>
                 </button>
                 <div class="col-12">
@@ -118,6 +118,26 @@
         </ul>
     </div>
 
+
+    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    ...
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                    <button type="button" class="btn btn-primary btn-danger" onclick="deleteHabit(habitId) ">Löschen</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
     <script>
         function sendPostRequest(checkboxId) {
             // Get the checkbox element using the provided ID
@@ -148,6 +168,7 @@
 
         function deleteHabit(habitId) {
             // Make a POST request to /delete with the habit id
+
             axios.post('/delete', { habitId: habitId }, {
                 headers: {
                     'Content-Type': 'application/json'