add success message

.gitignore

@@ -3,4 +3,5 @@ backend/creds.json
 db/data
 **/node_modules/**
 pi/backend/env.sh
-db/env.sh
+db/env.sh
+public/*

content/reading-tracker.html

@@ -126,6 +126,22 @@
   -moz-appearance: textfield;
 }
 
+.text-green {
+  color: green;
+}
+
+.mt {
+  margin-top: 10px;
+}
+
+.show {
+  display: block;
+}
+
+.hide {
+  display: none;
+}
+
 #prayer-section button {
   position: relative;
 
@@ -336,6 +352,7 @@ <h3><span id="tally-display-week-hours"></span> hours and <span id="tally-displa
                     type="button"
                     onclick="addTime(event)"
                 >Add time</button>
+            <p id="success-message" class="text-green mt hide">Reading added successfully!</p>
         </div>
     </form>
 </div>
@@ -352,7 +369,7 @@ <h2>Days of the week</h2>
   <h2>Minutes spent in each book</h2>
     <canvas id="bookChart"></canvas>
 </div>
-
+  <link rel="stylesheet" href="/toast.css">
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   <script src="/reading.js"></script>
   <script>

static/reading.js

@@ -167,6 +167,8 @@ fetch(`${apiUrl}/${tallyType}?minutes=${minutes}&passage=${selectedBook}`, {
   {
     response.json();
     updateTally();
+    const message = document.getElementById('success-message');
+    message.classList.replace('hide', 'show');
     })
   .then((data) => {
     console.log('Success:', data);