Local

.gitignore

@@ -1,2 +1,17 @@
+lib-cov
+*.seed
+*.log
+*.csv
+*.dat
+*.out
+*.pid
+*.gz
+
+pids
+logs
+results
+
+npm-debug.log
+node_modules
 .env
-node_modules
+profileEJSBU.txt

app/routes.js

@@ -49,8 +49,14 @@ const moodActions = {
             const user = req.user || null; 
 
             const moodCollection = await Mood.find({ userId: req.user._id }); 
+
+            const latestMood = await Mood.findOne().sort({ timestamp: 1 }).exec();
+            console.log(`This is the latest log: ${latestMood}`)
+            console.log(`This is the latest mood: ${latestMood.mood}`)
+            const backgroundColor = latestMood.length > 0 ? latestMood.mood : 'neutral'
+            console.log(`This is the background color: ${backgroundColor}`)
 
-            res.render('profile', { user, moodCollection });
+            res.render('profile', { user, moodCollection, backgroundColor });
         } catch (err) {
             console.log('Error fetching moods:', err);
             res.status(500).send('Internal Server Error');
@@ -106,7 +112,7 @@ app.post('/submitMood', (req, res) => {
 });
 
 
-// Edit mood 
+// Edit mood
 
 app.put('/mood/:id', async (req, res) => {
     const moodId = req.params.id;

config/database.js

@@ -1,6 +1,5 @@
 // config/database.js
 module.exports = {
-
     'MONGO_URL' : 'mongodb://mongo:hFEAPBxjHSBPGoLgPeajINPqOYOBuycW@mongodb-niml.railway.internal:27017', 
     'dbName': 'mood-tracker'
 };

public/main.js

@@ -47,3 +47,49 @@ Array.from(document.querySelectorAll('.deleteClick')).forEach(button => {
       }
   });
 });
+
+
+
+// fetch('/profile', {
+//     method: 'GET',
+//     headers: {
+//         'Content-Type': 'application/json',
+//     },
+//     // body: JSON,
+//     //body: JSON.stringify(payload),
+// })
+// .then(response => {
+//     if (!response.ok) {
+//       throw new Error('Network response was not ok');
+//     }
+//     return response.text();
+//   })
+// .then(data => {
+//   // Handle the data
+//   console.log("This is the data from profile route", data.moodCollection)
+//   // changeBackgroundColor(data);
+// })
+// .catch(error => console.error('Error:', error));
+
+// function changeBackgroundColor(data) {
+//     console.log("This is the data from profile route", data)
+
+//     let backgroundColor = '#EEDAD1'; // Default color
+
+//     if (data.mood === 'happy') {
+//       backgroundColor = '#FFE680';
+//     } else if (data.mood === 'sad') {
+//       backgroundColor = '#7DA3DA';
+//     } else if (data.mood === 'angry') {
+//       backgroundColor = 'blue';
+//     } else if (data.mood === 'stressed') {
+//         backgroundColor = '#935252';
+//     } else if (data.mood === 'excited') {
+//         backgroundColor = 'blue';
+//     } else {
+//         backgroundColor = '#EEDAD1';
+//     }
+
+//     setBodyBackgroundColor(backgroundColor);
+//   }
+

public/style.css

@@ -6,15 +6,15 @@
 
 body {
   font-family: 'Helvetica Neue', sans-serif;
-  background: linear-gradient(180deg, #FBE3D2, #FAF4D9); 
+  /* background: linear-gradient(180deg, #FBE3D2, #FAF4D9);  */
   color: #333;
   margin: 0;
   padding: 0;
   font-size: 18px; 
 }
 
 .container {
-  max-width: 900px;
+  /* max-width: 900px; */
   margin: 0 auto;
   padding: 30px;
 }
@@ -101,6 +101,7 @@ h1 {
   display: flex;
   justify-content: space-between;
   align-items: center; 
+  /* justify-content: center; */
   margin-bottom: 20px;
 }
 
@@ -138,6 +139,14 @@ h1 {
   background-color: #A03C52;
 }
 
+.large-mood-text {
+  font-size: 8rem;
+}
+
+.large-actions-text {
+  font-size: 3rem;
+}
+
 /* Mood Log List */
 .moodCollection {
   list-style: none;
@@ -226,9 +235,35 @@ h1 {
   margin: 5px 0;
 }
 
+.first-box {
+  float: left;
+  width: 20%;
+  height: 20%;
+}
 
+.box {
+  float: left;
+  width: 40%;
+  height: 20%;
+}
 
+.logout-box {
+  float: left;
+  width: 10%;
+  /* height: 20%; */
+}
 
+body.happy {
+  background-color: #FFE680;
+}
+
+body.sad {
+  background-color: #7DA3DA;
+}
+
+body.neutral {
+  background-color: #FBE3D2;
+}
 
 
 

server.js

@@ -11,6 +11,7 @@ var flash    = require('connect-flash');
 var morgan       = require('morgan'); // Logging
 var cookieParser = require('cookie-parser');
 var bodyParser   = require('body-parser'); // See whats coming with req
+
 var session      = require('cookie-session'); // This is to deploy it
 
 var configDB = require('./config/database.js');

views/profile.ejs

@@ -8,25 +8,28 @@
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
     <link rel="stylesheet" href="/style.css">
 </head>
-<body>
+<body class="<%= backgroundColor %>">
+    <%= backgroundColor %>
+
   <div class="container">
 
-    <div class="page-header text-center">
-        <h1>Mood Tracker Profile</h1>
-        <a href="/logout" class="btn btn-logout">Logout</a>
-    </div>
+    <div class="row"> <!--First row: Mood Tracker title and description, mood submission, logout-->
 
-    <div class="row">
+        <div class="first-box">
+            <h1>Mood Tracker Profile</h1>
+            <p>What should you do today?</p>
+            <p>Enter your mood to find out!</p>
+        </div>
 
+        <div class="box">
         <!-- Mood tracker form -->
-        <h2>Add a mood</h2>
         <% if (user) { %>
         <form action="/submitMood" method="POST" class="mood-entry-form">
 
             <!-- Mood, Date Inputs and Submit Button in One Row -->
             <div class="input-group">
                 <div class="input-item">
-                    <label for="mood">Select your mood for the day:</label>
+                    <label for="mood">What's your mood?:</label>
                     <select id="mood-dropdown" name="mood" required>
                         <option value="happy">Happy</option>
                         <option value="sad">Sad</option>
@@ -35,7 +38,7 @@
                 </div>
 
                 <div class="input-item">
-                    <label for="date-entry">Date Entry:</label>
+                    <label for="date-entry">Date:</label>
                     <input type="date" id="date-entry" name="date-entry" required> 
                 </div>
 
@@ -44,6 +47,25 @@
             </div>
         </form>
         <% } %>
+        </div>
+
+
+        <div class="logout-box">
+            <a href="/logout" class="btn btn-logout">Logout</a>
+        </div>
+
+    </div>
+
+    <div class="main-mood">
+        <% if (moodCollection.length > 0) { %>
+            <% const mainMoodData = moodCollection[moodCollection.length - 1]; %> <!-- '-1' grabs the last object -->
+            <p class="large-mood-text"><strong></strong> <%= mainMoodData.mood %> </p>
+            <p><strong>Last logged date:</strong> <%= mainMoodData.date %> </p>
+            <p class="large-actions-text"><%= mainMoodData.actions %></p>
+          <% } else { %>
+            <p>Enter your mood above</p>
+          <% } %>
+    </div>
 
         <!-- List of all moods logged -->
         <ul class="moodCollection">
@@ -84,7 +106,7 @@
         </div>
         <% }); %>
 
-    </div>
+
 
 </div>