Brandefy

by Alex Cowan

HTML

<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Your Website</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
<!--script>
          Add the back end for the navigation bar - Rohan Bansal and Gheed Saeed*/
          </script-->
  <body>
    <div class="background"></div>
    <div class="navbar">
      <a href="#home">Home</a>
      <a href="#about">About</a>
      <a href="#contact">Contact</a>
      <a href="#ourproducts">Our Products</a>
      <a href="#sale">Sale</a>
      <a class="cart-link" href="#cart">
    <img src="https://cdn-icons-png.flaticon.com/512/263/263142.png" alt="Cart">
  </a>
    </div>
    <div class="content">
      <header>
        <h1>brandefy.</h1>
      </header>
         <div class="search-container">
        <input type="text" id="searchInput" placeholder="Start typing what you are looking for...">
        <!--script>
          Updated the search instructions and added the Fall sale sentance - Vineet Krishnan*/
          </script-->
        <button onclick="searchProduct()">Search</button>
      </div>
         <header>
        <s1>
          FALL SALE! 20% OFF ALL MOISTURIZERS!
        </s1>
      </header>
    </div>
  </body>

  <main>
    <div class="main-product-card" style="display: none;">
      <img src="https://bluemercury.com/cdn/shop/products/global_images-3606000434967-1_825x.jpg?v=1692718634">
      <h2>Skinceuticals</h2>
      <p>Triple Lipid Restore</p>
      <p class="price">$150</p>
      <div id="toggle-button">
        <button id="formulaMatch" class="toggle-button" onclick="showProductCard('product-card-2', 'formulaMatch')">Formula match</button>
        <div class="separator"></div>
        <button id="lowestPrice" class="toggle-button" onclick="showProductCard('product-card-1', 'lowestPrice')">Lowest price</button>
        <div...

CSS

body {
  margin: 0;
  padding: 0;
  font-family: 'Libre Baskerville', serif;
  color: #000000;
}

/* Added Navigation Bar and formatted it to include an icon for cart and be transaparent (not to cover Gheed Saeed) Rohan Bansal and Gheed Saeed*/
/* Style the navigation bar */
.navbar {
  background-color: rgba(242, 242, 242, 0.5);
  overflow: hidden;
  text-align: center;
}

/* Style the navigation links and display them inline to be on the same row */
.navbar a {
  display: inline-block;
  color: black;
  padding: 14px 16px;
  text-decoration: none;
}

/* Add spacing between the links */
.navbar a + a {
  margin-left: 20px;
}

/* Change link color when you hover over it */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}
/* Code to format the cart icon */
.cart-link img {
  width: 20px;
  height: 20px;
  vertical-align: middle; /* Add this line to vertically align the cart icon */
  margin-right: 0px; /* Adjust the right margin as needed */
}




/* Style the "Cart" link */
.cart-link {
  margin-left: auto; /* Push the "Cart" link to the right by taking up all available space */
  padding-right: 20px; /* Add some right padding for spacing */
}



.background {
  background-image: url('https://drive.google.com/uc?export=view&id=1jhfKOiCNsQ_z3Cc3YUwpr7SPCdilTuJR');
  /* Place to change background photo - Gheed Saeed */ 
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  opacity: 0.6;
  /* Adjust the opacity as desired */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  /* Place it behind the content */
}

.content {
  position: relative;
  z-index: 1;
  /* Place it above the background */
}

header {
  text-align: center;
  padding: 10px 0;
}



header h1 {
  font-size: 60px;
}

header s1 {
  font-size: 20px;
  font-weight: bold;
}

.search-container {
  text-align: center;
  margin-top: -30px;
}

.search-container input[type="text"] {
  padding: 12px;
  border-radius:...

JavaScript

function searchProduct() {
  // Get the input element by its id
  const searchInput = document.getElementById("searchInput");

  // Retrieve the user's input from the input element
  const userInput = searchInput.value.toLowerCase(); // Convert input to lowercase for case-insensitive comparison

  // Get all product cards (assuming they have a class "main-product-card")
  const productCards = document.querySelectorAll(".product-grid");

  // Loop through all product cards
  for (let card of productCards) {
    // Check if the product card's text content contains the user's input
    if (card.textContent.toLowerCase().includes(userInput)) {
      card.style.display = "block"; // Show the product card
    } else {
      card.style.display = "none"; // Hide the product card
    }
  }

  // Log the user's input to the console
  console.log("User searched for:", userInput);
}


function addToCart(productName, price) {
  console.log("User added product to cart: " + productName + " - $" + price);
}

function showProductCard(cardId, buttonId) {
  var productCard1 = document.getElementById("product-card-1");
  var productCard2 = document.getElementById("product-card-2");
  var productCard3 = document.getElementById("product-card-3");

  productCard1.style.display = "none";
  productCard2.style.display = "none";
  productCard3.style.display = "none";

  var selectedCard = document.getElementById(cardId);
  selectedCard.style.display = "block";

  // Reset the color of all buttons
  document.getElementById("formulaMatch").classList.remove("clicked-formulaMatch");
  document.getElementById("lowestPrice").classList.remove("clicked-lowestPrice");
  document.getElementById("highestRated").classList.remove("clicked-highestRated");

  // Set the color for the clicked button
  document.getElementById(buttonId).classList.add("clicked-" + buttonId);

  console.log("User compared:", buttonId);
}