Time stamp bd

package.json

@@ -34,6 +34,7 @@
     "axios": "0.20.0",
     "bootstrap": "4.5.2",
     "jquery": "3.5.1",
+    "moment": "^2.28.0",
     "popper.js": "1.16.1"
   }
 }

src/javascripts/components/displayMessages.js

@@ -8,6 +8,7 @@ const messageDummy = (item) => {
       <h5 class="card-character">${item.character}</h5>
       <p class="card-quote">${item.quote}</p>
       <button id="delete-${item.id}" type="button" class="btn btn-danger"><i class="far fa-trash-alt"></i> Delete Message</button>
+      <p class="timeStamped">${item.time}</p>
       </div>
     </div>
   </div>

src/javascripts/components/message.js

@@ -1,3 +1,4 @@
+import moment from 'moment';
 import Data from '../helpers/data/messageData';
 import Display from './displayMessages';
 
@@ -7,10 +8,13 @@ const addMessage = () => {
     const newId = Data.getInitialMessages().length + 1;
     const userMessage = $('#input-message').val();
     const userName = $('input:checked + label').text();
+    const time = moment().format('MMMM Do YYYY, h:mm:ss a');
+    console.error(time);
     Data.getInitialMessages().push({
       id: newId,
       quote: userMessage,
       character: userName,
+      time
     });
     $('#load-messages').html('');
     Display.displayDummy();

src/javascripts/helpers/data/messageData.js

@@ -3,29 +3,34 @@ const initialMessages = [
     id: 1,
     quote: 'My precious.',
     character: 'Gollum',
+    time: 'September 14th 2020, 6:49:18 pm',
   },
   {
     id: 2,
     quote:
       'I would rather share one lifetime with you than face all the Ages of this world alone.',
     character: 'Arwen',
+    time: 'September 14th 2020, 6:49:18 pm',
   },
   {
     id: 3,
     quote: 'Even the smallest person can chnage the course of the future.',
     character: 'Galadriel',
+    time: 'September 14th 2020, 6:49:18 pm',
   },
   {
     id: 4,
     quote:
       'The board is set, the pieces are moving. We come to it at last, the great battle of our time.',
     character: 'Gandalf',
+    time: 'September 14th 2020, 6:49:18 pm',
   },
   {
     id: 5,
     quote:
       'A day may come when the courage of men fails... but it is not THIS day.',
     character: 'Aragorn',
+    time: 'September 14th 2020, 6:49:18 pm',
   },
 ];
 

src/styles/components/_container.scss

@@ -7,5 +7,3 @@
   bottom: 10rem;
   right: 0;
 }
-
-

src/styles/components/_font-mode-button.scss

@@ -19,7 +19,6 @@
 
 // DARK MODE RULES
 .dark {
-  background-image: $darkBG;
   .font-change {
     cursor: pointer;
     border: 1px solid $font-color-bright;

src/styles/components/_modes.scss

@@ -7,9 +7,12 @@ body {
   padding: 10% 3% 10% 3%;
   text-align: center;
   background-image: $lightBG;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-attachment: fixed;
+  background-size: cover; 
 }
 
-
 // LIGHT MODE RULES
 .mode {
   text-align: left;
@@ -25,7 +28,7 @@ body {
     padding: 5px;
     margin-left: 8px;
     color: $font-color-dark;
-    margin-top: 10px; 
+    margin-top: 10px;
     display: inline-block;
   }
 }
@@ -42,12 +45,16 @@ body {
     padding: 5px;
     margin-left: 8px;
     color: $font-color-bright;
-    margin-top: 10px; 
+    margin-top: 10px;
     display: inline-block;
   }
   .mode {
     text-align: left;
     font-weight: bold;
     color: $font-color-bright;
   }
+  .card-body {
+    background-color: grey;
+    color: white;
+  }
 }