Wrap guestbook message and add reply button

_site/assets/js/guestbook.js

@@ -90,6 +90,10 @@ const renderMessage = (item) => {
     const itemID = item[0];
     const itemValue = item[1];
 
+    const newMessageWrapperDiv = document.createElement('div');
+    newMessageWrapperDiv.classList.add('gb__message--wrapper');
+    newMessageWrapperDiv.id = `msg-${itemID}`;
+
     const newMessageDiv = document.createElement('div');
     newMessageDiv.classList.add('gb__message');
 
@@ -111,6 +115,11 @@ const renderMessage = (item) => {
     newMessageTime.classList.add('gb__message--time');
     newMessageTime.textContent = itemValue.timestamp;
 
-    messageListEl.append(newMessageDiv);
-    newMessageDiv.append(newMessageName, newMessageMsg, newMessageTime);
+    const messageReplyBtn = document.createElement('button');
+    messageReplyBtn.classList.add('gb__message--reply-btn');
+    messageReplyBtn.textContent = 'Reply';
+
+    messageListEl.append(newMessageWrapperDiv);
+    newMessageWrapperDiv.append(newMessageDiv);
+    newMessageDiv.append(newMessageName, newMessageMsg, newMessageTime, messageReplyBtn);
 };

_site/feed.xml

@@ -4,7 +4,7 @@
     <subtitle>Leilukin&#39;s personal website.</subtitle>
     <link href="https://leilukin.neocities.org/feed.xml" rel="self"/>
     <link href="https://leilukin.neocities.org"/>
-    <updated>2024-05-19T08:29:29Z</updated>
+    <updated>2024-05-19T11:24:03Z</updated>
     <id>https://leilukin.neocities.org</id>
     <author>
         <name>Leilukin</name>

_site/guestbook/index.html

@@ -424,16 +424,18 @@
         gap: 0.2em;
     }
 
-    .gb__form--submit {
+    .gb__form--submit,
+    .gb__message--reply-btn {
         border: none;
         background: var(--clr-link-btn-bg);
         color: var(--clr-link-btn-txt);
-        padding: 0.3em;
+        padding: 0.3em 0.6em;
     }
 
     .gb__form--input input,
     .gb__form--input textarea,
-    .gb__form--submit {
+    .gb__form--submit,
+    .gb__message--reply-btn {
         border-radius: 0.2em;
     }
 
@@ -460,9 +462,15 @@
         font-size: 1.4rem;
     }
 
-    .gb__message--time {
+    .gb__message--time,
+    .gb__message--reply-btn {
         font-size: 1rem;
     }
+
+    .gb__message--reply-btn {
+        justify-self: start;
+        margin-top: 0.3em;
+    }
 </style>
 
 <script type="module" src="/assets/js/guestbook.js" defer></script>

src/assets/js/guestbook.js

@@ -90,6 +90,10 @@ const renderMessage = (item) => {
     const itemID = item[0];
     const itemValue = item[1];
 
+    const newMessageWrapperDiv = document.createElement('div');
+    newMessageWrapperDiv.classList.add('gb__message--wrapper');
+    newMessageWrapperDiv.id = `msg-${itemID}`;
+
     const newMessageDiv = document.createElement('div');
     newMessageDiv.classList.add('gb__message');
 
@@ -111,6 +115,11 @@ const renderMessage = (item) => {
     newMessageTime.classList.add('gb__message--time');
     newMessageTime.textContent = itemValue.timestamp;
 
-    messageListEl.append(newMessageDiv);
-    newMessageDiv.append(newMessageName, newMessageMsg, newMessageTime);
+    const messageReplyBtn = document.createElement('button');
+    messageReplyBtn.classList.add('gb__message--reply-btn');
+    messageReplyBtn.textContent = 'Reply';
+
+    messageListEl.append(newMessageWrapperDiv);
+    newMessageWrapperDiv.append(newMessageDiv);
+    newMessageDiv.append(newMessageName, newMessageMsg, newMessageTime, messageReplyBtn);
 };

src/pages/guestbook.njk

@@ -61,16 +61,18 @@ eleventyNavigation:
         gap: 0.2em;
     }
 
-    .gb__form--submit {
+    .gb__form--submit,
+    .gb__message--reply-btn {
         border: none;
         background: var(--clr-link-btn-bg);
         color: var(--clr-link-btn-txt);
-        padding: 0.3em;
+        padding: 0.3em 0.6em;
     }
 
     .gb__form--input input,
     .gb__form--input textarea,
-    .gb__form--submit {
+    .gb__form--submit,
+    .gb__message--reply-btn {
         border-radius: 0.2em;
     }
 
@@ -97,9 +99,15 @@ eleventyNavigation:
         font-size: 1.4rem;
     }
 
-    .gb__message--time {
+    .gb__message--time,
+    .gb__message--reply-btn {
         font-size: 1rem;
     }
+
+    .gb__message--reply-btn {
+        justify-self: start;
+        margin-top: 0.3em;
+    }
 </style>
 
 <script type="module" src="/assets/js/guestbook.js" defer></script>