Fixed Issue #71 and #72: Added a Blog feature and improved it's UI

assets/css/style.css

@@ -264,6 +264,17 @@ body.nav-active { overflow: hidden; }
   margin-inline: auto;
 }
 
+/* Cart anchor styling */
+#cart-anchor {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+#cart-anchor:hover .span {
+  color: var(--gold-crayola); /* Similar hover effect as other items */
+}
+
 .contact-number::after { bottom: -5px; }
 
 .text-center { text-align: center; }
@@ -303,6 +314,11 @@ body.nav-active { overflow: hidden; }
   padding: 12px 45px;
   overflow: hidden;
   z-index: 1;
+
+
+}
+.menu-card .add-to-cart {
+  margin-left: 15px; /* Adds space between price and button */
 }
 
 .btn::before {
@@ -992,9 +1008,28 @@ body.nav-active { overflow: hidden; }
 
 .menu-card {
   display: flex;
-  align-items: flex-start;
-  gap: 20px;
+  /* align-items: flex-start; */
+  /* gap: 20px; */
 }
+.menu-card {
+  display: grid;
+  grid-template-columns: 150px 500px 300px 300px;
+  grid-template-rows: auto;  /* Two equal columns */
+  /* height: 50px; */
+  row-gap: 5px;
+  gap: 20px;  /* Gap between the columns */
+  align-items: center; /* Aligns buttons vertically */
+}
+
+/* .menu-card .btn {
+  width: 150px;
+  text-align: center;
+} */
+
+/* .menu-card .title-wrapper {
+  margin-bottom: 15px;
+} */
+
 
 .hover\:card .card-banner { background-color: var(--gold-crayola); }
 
@@ -2051,4 +2086,88 @@ textarea.input-field {
     left: 0;
   }
 
-}
+}
+
+#blog-section {
+  width: 50%;
+  margin: 50px auto;
+  background-color: #444444;
+  padding: 20px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  border-radius: 4px; 
+}
+
+.blogListhead{
+  color: var(--gold-crayola);
+  font-weight: var(--weight-bold);
+  letter-spacing: var(--letterSpacing-1);
+  margin-left:  3%;
+  padding-top: 40px;
+}
+
+.bloghead{
+  color: var(--gold-crayola);
+  text-align: center;
+} 
+
+.form-group {
+  margin-bottom: 15px;
+}
+
+label {
+  display: block;
+  margin-bottom: 5px;
+  color: #555;
+}
+
+input, textarea {
+  width: 100%;
+  padding: 10px;
+  background-color: #232327;
+  border: 1px solid #e8c494;
+  color: white;
+  border-radius: 4px;
+  font-size: 2rem;
+}
+
+button {
+  display: block;
+  width: 100%;
+  padding: 10px;
+  color: #444444;
+  border: none;
+  font-size: 1rem;
+}
+
+
+#blog {
+  margin-top: 20px;
+}
+
+.blog-entry {
+  background: #444444;
+  padding: 15px;
+  margin-bottom: 10px;
+  color: white;
+  display: grid;
+  padding-left: 100px;
+  border-bottom: 3px solid #e8c494;
+}
+
+.blog-entry h4{
+  margin: 0 0 10px;
+}
+.blog-entry p{
+  margin: 0 0 10px;
+  font-size: 25px;
+}
+.blogs{
+  color: #444444;
+  background: #444444;
+}
+.blogLabel{
+  color: var(--gold-crayola);
+  font-weight: var(--weight-bold);
+  letter-spacing: var(--letterSpacing-1);
+  line-height: 14px;
+}

assets/js/script.js

@@ -1,3 +1,31 @@
+document.getElementById("blogForm").addEventListener("submit", function(event) {
+  event.preventDefault(); 
+
+  const name = document.getElementById("name").value;
+  const email = document.getElementById("email").value;
+  const description = document.getElementById("description").value;
+
+  if (name.trim() !== "" && email.trim() !== "" && description.trim() !== "") {
+    addBlogEntry(name, email, description);
+    document.getElementById("blogForm").reset(); 
+  }
+});
+
+function addBlogEntry(name, email, description) {
+  const blog = document.getElementById("blog");
+
+  const blogEntry = document.createElement("div");
+  blogEntry.classList.add("blog-entry");
+
+  blogEntry.innerHTML = `
+      <h4 style="color: light-gray">${name}   <br>(${email})</h4>
+      <p>Post: ${description}</p>
+  `;
+
+  blog.appendChild(blogEntry);
+}
+
+
 
 /**
  * PRELOAD
@@ -23,6 +51,58 @@ const addEventOnElements = function (elements, eventType, callback) {
   }
 }
 
+let youtube = "https://www.youtube.com";
+let instagram = "https://www.instagram.com";
+let twitter = "https://www.x.com";
+let maps = "https://maps.google.com";
+let facebook = 'https://www.facebook.com';
+
+document.querySelector("#twt").setAttribute('href', twitter);
+document.querySelector("#utube").setAttribute('href', youtube);
+document.querySelector("#map").setAttribute('href', maps);
+document.querySelector("#instagram").setAttribute('href', instagram);
+document.querySelector("#facebook").setAttribute('href', facebook);
+
+// Select the cart anchor and elements
+const cartAnchor = document.getElementById("cart-anchor");
+const addToCartButtons = document.querySelectorAll(".add-to-cart");
+const removeFromCartButtons = document.querySelectorAll(".remove");
+
+let cartItemCount = 0;
+
+// Function to update cart text
+const updateCartDisplay = () => {
+  if (cartItemCount > 99) {
+    cartAnchor.querySelector(".span").textContent = "Cart 99+";
+  } else if (cartItemCount > 0) {
+    cartAnchor.querySelector(".span").textContent = `Cart ${cartItemCount}`;
+  } else {
+    cartAnchor.querySelector(".span").textContent = "Cart";
+  }
+};
+
+// Add event listeners to "Add to Cart" buttons
+addToCartButtons.forEach(button => {
+  button.addEventListener("click", () => {
+    cartItemCount += 1;
+    updateCartDisplay();
+  });
+});
+
+// Add event listeners to "Remove" buttons
+removeFromCartButtons.forEach(button => {
+  button.addEventListener("click", () => {
+    if (cartItemCount > 0) {
+      cartItemCount -= 1;
+      updateCartDisplay();
+    }
+  });
+});
+
+// Initialize the cart display on page load
+window.addEventListener("load", updateCartDisplay);
+
+
 
 
 /**
@@ -51,7 +131,6 @@ const emailElements = document.querySelectorAll("[data-email]");
 //click event now
 addEventOnElements(emailElements, "click", openMailClient);
 
-
 /**
  * HERO SLIDER
  */
@@ -113,8 +192,7 @@ addEventOnElements([heroSliderNextBtn, heroSliderPrevBtn], "mouseover", function
 });
 
 addEventOnElements([heroSliderNextBtn, heroSliderPrevBtn], "mouseout", autoSlide);
-
-window.addEventListener("load", autoSlide);
+w.addEventListener("load", autoSlide);
 
 
 
@@ -141,4 +219,5 @@ window.addEventListener("mousemove", function (event) {
     parallaxItems[i].style.transform = `translate3d(${x}px, ${y}px, 0px)`;
   }
 
-});
+});
+