finished final project

catalog/js/cart.js

@@ -0,0 +1,47 @@
+const items = document.querySelectorAll(".cart_item");
+const total = document.querySelector("h3#total");
+
+items.forEach((item) => {
+  const quantity = item.querySelector(".item_quantity");
+  const id = item.querySelector('input[type="hidden"]');
+  const delete_btn = item.querySelector("i");
+
+  quantity.addEventListener("change", () =>
+    handle_quantity_change(id.value, quantity.value, item),
+  );
+
+  delete_btn.addEventListener("click", () => remove_item(id.value, item));
+});
+
+function handle_quantity_change(id, q, item) {
+  if (parseInt(q) == 0) {
+    remove_item(id, item);
+  } else {
+    fetch("functions/catalog.php", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+      body: "form_id=cart&action=adjust&product_id=" + id + "&quantity=" + q,
+    })
+      .then((response) => response.text())
+      .then((data) => {
+        total.innerText = decodeURIComponent(data);
+      });
+  }
+}
+
+function remove_item(id, item) {
+  fetch("functions/catalog.php", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded",
+    },
+    body: "form_id=cart&action=remove&product_id=" + id,
+  })
+    .then((response) => response.text())
+    .then((data) => {
+      total.innerText = decodeURIComponent(data);
+      item.remove();
+    });
+}

catalog/js/create-account.js

@@ -1,65 +1,65 @@
-const username_field = document.querySelector('#username');
-const password_field = document.querySelector('#password');
-const v_password_field = document.querySelector('#v_password');
+const username_field = document.querySelector("#username");
+const password_field = document.querySelector("#password");
+const v_password_field = document.querySelector("#v_password");
 const submit_button = document.querySelector('input[type="submit"]');
 
-const err_username = document.querySelector('#err_username');
-const err_match = document.querySelector('#err_match');
-const err_length = document.querySelector('#err_length');
-const err_num = document.querySelector('#err_num');
+const err_username = document.querySelector("#err_username");
+const err_match = document.querySelector("#err_match");
+const err_length = document.querySelector("#err_length");
+const err_num = document.querySelector("#err_num");
 
 function handle_input() {
   const password = password_field.value;
   const v_password = v_password_field.value;
-  if (password != v_password && v_password != '')
-    err_match.innerText = 'Passwords do not match.';
-  else
-    err_match.innerText = '';
-
+  if (password != v_password && v_password != "")
+    err_match.innerText = "Passwords do not match.";
+  else err_match.innerText = "";
 
   if (password.length < 8)
-    err_length.innerText = 'Password must be at least 8 characters long.';
-  else
-    err_length.innerText = '';
+    err_length.innerText = "Password must be at least 8 characters long.";
+  else err_length.innerText = "";
 
   const num_regex = /\d/;
   if (!num_regex.test(password))
-    err_num.innerText = 'Password must have at least 1 digit.';
-  else
-    err_num.innerText = '';
+    err_num.innerText = "Password must have at least 1 digit.";
+  else err_num.innerText = "";
 
-  if (err_match.innerText == '' && err_length.innerText == '' && err_num.innerText == '' && err_username == '' && v_password != '')
+  if (
+    err_match.innerText == "" &&
+    err_length.innerText == "" &&
+    err_num.innerText == "" &&
+    err_username.innerText == "" &&
+    v_password != ""
+  )
     submit_button.disabled = false;
-  else
-    submit_button.disabled = true;
+  else submit_button.disabled = true;
 }
 
 function handle_username() {
   const username = username_field.value;
 
-  fetch('functions/user.php', {
-    method: 'POST',
+  fetch("functions/user.php", {
+    method: "POST",
     headers: {
-      'Content-Type': 'application/x-www-form-urlencoded',
+      "Content-Type": "application/x-www-form-urlencoded",
     },
-    body: 'form_id=create-account&username=' + username,
+    body: "form_id=create-account&username=" + username,
   })
-    .then(response => {
+    .then((response) => {
       if (!response.ok) {
-        console.log('Failed to check if username exists!');
+        console.log("Failed to check if username exists!");
       }
 
       return response.json(); // Parse response body as JSON
     })
-    .then(data => {
-      if (data['exists'] == 'True')
-        err_username.innerText = 'Username is taken.';
-      else
-        err_username.innerText = '';
+    .then((data) => {
+      if (data["exists"] == "True")
+        err_username.innerText = "Username is taken.";
+      else err_username.innerText = "";
     });
 }
 
-username_field.addEventListener('blur', handle_username);
-password_field.addEventListener('input', handle_input);
-v_password_field.addEventListener('input', handle_input);
+username_field.addEventListener("blur", handle_username);
+password_field.addEventListener("input", handle_input);
+v_password_field.addEventListener("input", handle_input);
 submit_button.disabled = true;

catalog/js/index.js

@@ -0,0 +1,172 @@
+const bg = document.querySelector("#bg");
+const bubbles = document.querySelectorAll(".bubble"); // Get bubbles *after* the page has loaded
+const cart_btn = document.querySelector("#add_to_cart_btn");
+
+const colors = [
+  "#cedff3",
+  "#adcaeb",
+  "#ffd700",
+  "#f4a460",
+  "#1e90ff",
+  "#dc143c",
+  "#7CFC00",
+];
+
+const text_colors = ["#f4a460", "#1e90ff", "#dc143c"];
+
+let welcome = document.querySelector("#welcome");
+if (welcome != null) {
+  let h1 = welcome.querySelector("h1");
+  let p = welcome.querySelector("p");
+
+  let color = text_colors[Math.floor(Math.random() * colors.length)];
+  h1.style.color = color;
+  p.style.color = color;
+}
+
+function initial_bubbles() {
+  bubbles.forEach((bubble) => {
+    let size = Math.ceil(Math.random() * 100) + 50;
+    let color = colors[Math.floor(Math.random() * colors.length)];
+    let x = Math.floor(Math.random() * bg.offsetWidth) - size + 100;
+    let y = Math.floor(Math.random() * bg.offsetHeight) - size + 100;
+    const delay = Math.random() * 5 + "s";
+    const duration = Math.random() * 10 * Math.random() + 15 + "s";
+
+    let randomX = (Math.random() - 0.5) * 500;
+    let randomY = (Math.random() - 0.5) * 500;
+
+    while (randomX < 0 || randomX > window.innerWidth)
+      randomX = (Math.random() - 0.5) * 500;
+
+    while (randomY < 0 || randomY > window.innerHeight)
+      randomY = (Math.random() - 0.5) * 500;
+
+    randomX = randomX + "px";
+    randomY = randomY + "px";
+
+    let a = Math.random();
+    let b = Math.random();
+    let c = Math.random();
+    let d = Math.random();
+
+    if (Math.random() > 0.5) a *= -1;
+
+    if (Math.random() > 0.5) b *= -1;
+
+    if (Math.random() > 0.5) c *= -1;
+
+    if (Math.random() > 0.5) d *= -1;
+
+    if (Math.random() > 0.5) {
+      let curveX = (Math.random() - 0.5) * 500 + "px";
+      let curveY = (Math.random() - 0.5) * 500 + "px";
+      bubble.style.setProperty("--curve-x", curveX);
+      bubble.style.setProperty("--curve-y", curveY);
+      bubble.style.animationName = "float-curve"; // Apply the curved animation
+    } else {
+      bubble.style.animationName = "float-random"; // Keep the straight animation
+    }
+
+    bubble.style.position = "absolute";
+    bubble.style.top = y + "px";
+    bubble.style.left = x + "px";
+    bubble.style.height = size + "px";
+    bubble.style.width = size + "px";
+    bubble.style.borderRadius = "50%";
+    bubble.style.backgroundColor = color;
+    bubble.style.opacity = 0.8;
+    bubble.style.setProperty("--random-x", randomX);
+    bubble.style.setProperty("--random-y", randomY);
+    bubble.style.animationDelay = delay;
+    bubble.style.animationDuration = duration;
+    bubble.style.animationTimingFunction =
+      "cubic-bezier(" + a + ", " + b + ", " + c + ", " + d + ")";
+    bubble.style.boxShadow = "6px 6px 14px rgba(0, 0, 0, 0.45)";
+  });
+}
+
+initial_bubbles();
+if (document.startViewTransition) {
+  window.navigation.addEventListener("navigate", () =>
+    document.startViewTransition(),
+  );
+}
+
+//
+// // Function to capture the current state of the bubbles
+// function captureBubbleStates() {
+//   const bubbles = document.querySelectorAll(".bubble");
+//   bubbleStates = Array.from(bubbles).map((bubble) => ({
+//     left: bubble.style.left,
+//     top: bubble.style.top,
+//     width: bubble.style.width,
+//     height: bubble.style.height, // Added height
+//     backgroundColor: bubble.style.backgroundColor,
+//     opacity: bubble.style.opacity,
+//     delay: bubble.style.animationDelay,
+//     dur: bubble.style.animationDuration,
+//     ran_x: getComputedStyle(bubble).getPropertyValue("--random-x"),
+//     ran_y: getComputedStyle(bubble).getPropertyValue("--random-y"),
+//   }));
+//
+//   try {
+//     window.name = JSON.stringify(bubbleStates);
+//   } catch (error) {
+//     console.error("Error stringifying bubble states:", error);
+//     window.name = ""; // Clear window.name in case of error
+//   }
+// }
+//
+// // Function to apply the stored states to the new bubbles
+// function applyBubbleStates() {
+//   try {
+//     const storedStates = JSON.parse(window.name);
+//     if (storedStates && storedStates.length > 0) {
+//       const newBubbles = document.querySelectorAll(".bubble");
+//       newBubbles.forEach((bubble, index) => {
+//         if (storedStates[index]) {
+//           bubble.style.left = storedStates[index].left;
+//           bubble.style.top = storedStates[index].top;
+//           bubble.style.width = storedStates[index].width;
+//           bubble.style.height = storedStates[index].width;
+//           bubble.style.backgroundColor = storedStates[index].backgroundColor;
+//           bubble.style.borderRadius = "50%";
+//           bubble.style.position = "absolute"; // Ensure they are absolutely positioned
+//           bubble.style.opacity = storedStates[index].opacity;
+//           bubble.style.animationDuration = storedStates[index].dur;
+//           bubble.style.setProperty("--random-x", storedStates[index].ran_x);
+//           bubble.style.setProperty("--random-y", storedStates[index].ran_y);
+//         }
+//       });
+//
+//       bubbleStates = storedStates; // Update the local variable
+//     } else {
+//       initial_bubbles();
+//     }
+//   } catch (error) {
+//     console.error("Error parsing window.name:", error);
+//     initial_bubbles();
+//   }
+// }
+//
+// // Event listeners
+// window.addEventListener("load", applyBubbleStates);
+// window.addEventListener("beforeunload", captureBubbleStates);
+//
+// // View Transitions API Handling
+// if (document.startViewTransition) {
+//   window.navigation.addEventListener("navigate", (event) => {
+//     const promise = Promise.resolve()
+//       .then(captureBubbleStates)
+//       .then(() =>
+//         document.startViewTransition(async () => {
+//           await event.destination.loadPromise;
+//           applyBubbleStates();
+//         }),
+//       );
+//   });
+// } else {
+//   console.log("ViewTransition API not supported");
+//   initial_bubbles();
+// }

catalog/js/login-modal.js

@@ -1,31 +0,0 @@
-const add_to_cart = document.querySelector('input[type="submit"]');
-
-const modal = document.querySelector('.modal');
-const username = document.querySelector('#username');
-const password = document.querySelector('#password');
-const login_button = document.querySelector('#login_submit');
-
-
-add_to_cart.addEventListener('click', (e) => {
-  e.preventDefault();
-
-  if (modal.classList[0] === "fade-in") {
-    modal.classList.remove("fade-in");
-    modal.classList.add("fade-out");
-  } else {
-    modal.classList.remove("fade-out");
-    modal.classList.add("fade-in");
-  }
-
-
-  modal.addEventListener('click', () => {
-    if (modal.classList[0] === "fade-in") {
-      modal.classList.remove("fade-in");
-      modal.classList.add("fade-out");
-    } else {
-      modal.classList.remove("fade-out");
-      modal.classList.add("fade-in");
-    }
-  })
-
-});

catalog/js/login.js

@@ -0,0 +1,29 @@
+const form = document.querySelector("form");
+const username_field = document.querySelector("#username");
+const password_field = document.querySelector("#password");
+const submit_button = document.querySelector('input[type="submit"]');
+
+const err = document.querySelector("#invalid");
+
+submit_button.addEventListener("click", (e) => {
+  e.preventDefault();
+
+  fetch("functions/user.php", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded",
+    },
+    body:
+      "form_id=login&username=" +
+      username_field.value +
+      "&password=" +
+      password_field.value,
+  })
+    .then((response) => {
+      return response.text(); // Parse response body as JSON
+    })
+    .then((data) => {
+      if (data == "true") form.submit();
+      else err.innerText = "Username or Password are incorrect.";
+    });
+});

catalog/js/product_page.js

@@ -0,0 +1,45 @@
+const is_logged_in = document.querySelector("#is_logged_in");
+const product_id = document.querySelector("#product_id");
+const quantity = document.querySelector("#quantity");
+const add_to_cart = document.querySelector('input[type="submit"]');
+
+const modal = document.querySelector(".modal");
+const username = document.querySelector("#username");
+const password = document.querySelector("#password");
+const login_button = document.querySelector("#login_submit");
+
+add_to_cart.addEventListener("click", (e) => {
+  e.preventDefault();
+
+  if (is_logged_in.value == "true") {
+    fetch("functions/catalog.php", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+      body: 'form_id=add_to_cart&product_id=' + product_id.value + '&quantity=' + quantity.value,
+    })
+      .then((response) => response.text())
+      .then((data) => {
+        document.querySelector('#dotton > small').innerText = decodeURIComponent(data);
+      });
+  } else {
+    if (modal.classList[0] === "fade-in") {
+      modal.classList.remove("fade-in");
+      modal.classList.add("fade-out");
+    } else {
+      modal.classList.remove("fade-out");
+      modal.classList.add("fade-in");
+    }
+
+    modal.addEventListener("click", () => {
+      if (modal.classList[0] === "fade-in") {
+        modal.classList.remove("fade-in");
+        modal.classList.add("fade-out");
+      } else {
+        modal.classList.remove("fade-out");
+        modal.classList.add("fade-in");
+      }
+    });
+  }
+});