Add guestbook

scripts/guestbook.js

@@ -0,0 +1,69 @@
+function checkSubmissionValid(event) {
+   let message = document.querySelector('textarea[name="message"]').value;
+   let github = document.querySelector('input[name="github"]').value;
+   if (message.length < 1 || github.length < 1) {
+      event.preventDefault();
+      document.querySelector('.status').textContent = "Fill out all fields";
+   }
+   else {
+      document.querySelector('.status').textContent = "Post succesful!";
+   }
+}
+
+
+fetch('https://guestbook-api.hnasheralneam.dev/messages/random-5')
+   .then(response => response.json())
+   .then(data => {
+      for (let i = 0; i < data.length; i++) {
+         createMessage(data[i]);
+      }
+   })
+   .catch(error => {
+      console.error('Error fetching data:', error);
+   });
+
+function getAll() {
+   document.querySelector('.messages').innerHTML = "";
+   fetch('https://guestbook-api.hnasheralneam.dev/messages/all')
+      .then(response => response.json())
+      .then(data => {
+         for (let i = 0; i < data.length; i++) {
+            createMessage(data[i]);
+         }
+      })
+      .catch(error => {
+         console.error('Error fetching data:', error);
+      });
+}
+
+function createMessage(message) {
+   const messageDiv = document.createElement('div');
+   messageDiv.classList.add('card');
+   messageDiv.innerHTML = `
+      <div>
+         <p class="message">${message.message}</p>
+         <a class="name" href="https://fetchcv.hnasheralneam.dev/user/github/${message.github}">${message.github}</a><br>
+         <i>${formatDate(message.timestamp.toLocaleString(), "dmy")}</i>
+      </div>`;
+   document.querySelector('.messages').appendChild(messageDiv);
+
+}
+
+function toggleElement(elementName) {
+   const element = document.querySelector(`.${elementName}-container`);
+   if (element.style.opacity == 0) {
+      element.style.opacity = "1";
+      element.style.pointerEvents = "all";
+   } else {
+      element.style.opacity = 0;
+      element.style.pointerEvents = "none";
+   }
+}
+
+function showAll() {
+   getAll();
+   let messagesElement = document.querySelector(".messages");
+   messagesElement.style.overflowX = "hidden";
+   messagesElement.style.overflowY = "auto";
+   messagesElement.style.whiteSpace = "wrap";
+}