1 files changed, 52 insertions, 0 deletions
diff --git a/templates/budget.html b/templates/budget.html
new file mode 100644
index 0000000..82fbbad
--- /dev/null
+++ b/templates/budget.html
@@ -0,0 +1,52 @@
+{% extends "layout.html"%}
+
+{% block title %}
+    Budget
+{% endblock %}
+
+{% block main %}
+<div class="row align-items-start row-cols-2">
+    <!-- Display current budget-->
+    <div class="col" style="margin-top: 120px;">
+        <p style="font-size: 20px; font-weight: bold;">Your budget:</p>
+        <div class="container-money">
+            <img id="dollar" src="/static/red_dollar.jpg" alt="dollar bill">
+            <div class="centered-money">
+                <span id="budget">{{ budget | usd }}</span>
+            </div>
+        </div><br>
+        <!-- Set new budget -->
+        <div>
+            <form action="/budget" method="post">
+                <div class="mb-3">
+                    <label for="add_budget" style="margin-top: 30px; font-weight: bold;">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cash-stack" viewBox="0 0 16 16">
+                            <path d="M1 3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1H1zm7 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/>
+                            <path d="M0 5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V5zm3 0a2 2 0 0 1-2 2v4a2 2 0 0 1 2 2h10a2 2 0 0 1 2-2V7a2 2 0 0 1-2-2H3z"/>
+                        </svg>   Set your budget
+                    </label><br>
+
+                    <span style="font-size: 20px; margin-right: 5px;">&#36;</span>
+                    <input name="add_budget" autocomplete="off" autofocus class="form-control" placeholder="Add Budget..." type="number" min="1.00" step="0.01" required>
+                </div>
+                <button class="btn btn-success" type="submit">Update Budget</button>
+            </form>
+        </div>
+    </div>
+    <div class="col">
+        <img src="/static/piggy_green.png"><br>
+    </div>
+</div>
+
+<!-- Change budget background image depending on budget balance -->
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        let budget = document.getElementById('budget').innerHTML.split('$').pop();
+        if (parseFloat(budget) <= 0) {
+            document.getElementById('dollar').setAttribute('src', '/static/red_dollar.jpg');
+        } else {
+            document.getElementById('dollar').setAttribute('src', '/static/green_dollar.jpg');
+        }
+    });
+</script>
+{% endblock %}