Sam-s-Mart-Website-Alternative/scripts/main.js

// This function is called when any of the tab is clicked
// It is adapted from https://www.w3schools.com/howto/howto_js_tabs.asp

function openInfo(evt, tabName) {
  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName('tabcontent')
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = 'none'
  }

  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName('tablinks')
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(' active', '')
  }

  // Show the current tab, and add an "active" class to the button that opened the tab
  document.getElementById(tabName).style.display = 'block'
  evt.currentTarget.className += ' active'
}

// generate a checkbox list from a list of products
// it makes each product name as the label for the checkbos

function populateListProductChoices(slct1, slct2) {
  var s1 = document.getElementById(slct1)
  var s2 = document.getElementById(slct2)

  // s2 represents the <div> in the Products tab, which shows the product list, so we first set it empty
  s2.innerHTML = ''
  s2.appendChild(document.createElement('br'))
  s2.appendChild(document.createElement('br'))

  // obtain a reduced list of products based on restrictions
  var optionArray = restrictListProducts(products, s1.value)

  // for each item in the array, create a checkbox element, each containing information such as:
  // <input type="checkbox" name="product" value="Bread">
  // <label for="Bread">Bread/label><br>

  for (i = 0; i < optionArray.length; i++) {
    var productName = optionArray[i]
    // create the checkbox and add in HTML DOM
    var checkbox = document.createElement('input')
    checkbox.type = 'checkbox'
    checkbox.name = 'product'
    checkbox.value = productName
    s2.appendChild(checkbox)

    // create a label for the checkbox, and also add in HTML DOM
    var label = document.createElement('label')
    label.htmlFor = productName
    var itemPrice = getItemPrice(productName)
    label.appendChild(document.createTextNode(productName + ' $' + itemPrice))

    // //get price of an item
    // var itemPrice = getItemPrice(productName);
    // label.appendChild(document.createTextNode(" $" + itemPrice));

    s2.appendChild(label)

    // create a breakline node and add in HTML DOM
    s2.appendChild(document.createElement('br'))

    //create <img src="">
    var prodImg = document.createElement('img')
    prodImg.src = getProductImg(productName)
    // prodImg = document.getElementById("displayProduct");
    // console.log("trial", prodImg.src);
    s2.appendChild(prodImg)

    //use this to space the images
    s2.appendChild(document.createElement('br'))
    s2.appendChild(document.createElement('br'))
  }
}

// This function is called when the "Add selected items to cart" button in clicked
// The purpose is to build the HTML to be displayed (a Paragraph)
// We build a paragraph to contain the list of selected items, and the total price

function selectedItems() {
  var ele = document.getElementsByName('product')
  var chosenProducts = []

  var c = document.getElementById('displayCart')
  c.innerHTML = ''

  // build list of selected item
  var para = document.createElement('P')
  para.innerHTML = 'You have selected : '
  para.appendChild(document.createElement('br'))
  para.appendChild(document.createElement('br'))

  for (i = 0; i < ele.length; i++) {
    if (ele[i].checked) {
      para.appendChild(
        document.createTextNode(
          ele[i].value + '     $' + getItemPrice(ele[i].value),
        ),
      )
      para.appendChild(document.createElement('br'))
      //adding the image
      console.log(getProductImg(ele[i].value))
      var cartImg = para.appendChild(document.createElement('img'))
      cartImg.src = getProductImg(ele[i].value)
      // para.appendChild(cartImg);
      para.appendChild(document.createElement('br'))
      chosenProducts.push(ele[i].value)
    }
  }

  // add paragraph and total price
  c.appendChild(para)
  c.appendChild(
    document.createTextNode('Total Price is $' + getTotalPrice(chosenProducts)),
  )
}

function filterProducts(sel1, sel2) {
  var s1 = document.getElementById(sel1)
  var s2 = document.getElementById(sel2)

  // s2 represents the <div> in the Products tab, which shows the product list, so we first set it empty
  s2.innerHTML = ''
  s2.appendChild(document.createElement('br'))
  s2.appendChild(document.createElement('br'))

  // obtain a reduced list of products based on restrictions
  var optionArray = filterProduct(products, s1.value);

  // for each item in the array, create a checkbox element, each containing information such as:
  // <input type="checkbox" name="product" value="Bread">
  // <label for="Bread">Bread/label><br>

  for (i = 0; i < optionArray.length; i++) {
    var productName = optionArray[i]
    // create the checkbox and add in HTML DOM
    var checkbox = document.createElement('input')
    checkbox.type = 'checkbox'
    checkbox.name = 'product'
    checkbox.value = productName
    s2.appendChild(checkbox)

    // create a label for the checkbox, and also add in HTML DOM
    var label = document.createElement('label')
    label.htmlFor = productName
    var itemPrice = getItemPrice(productName)
    label.appendChild(document.createTextNode(productName + ' $' + itemPrice))

    // //get price of an item
    // var itemPrice = getItemPrice(productName);
    // label.appendChild(document.createTextNode(" $" + itemPrice));

    s2.appendChild(label)

    // create a breakline node and add in HTML DOM
    s2.appendChild(document.createElement('br'))

    //create <img src="">
    var prodImg = document.createElement('img')
    prodImg.src = getProductImg(productName)
    // prodImg = document.getElementById("displayProduct");
    // console.log("trial", prodImg.src);
    s2.appendChild(prodImg)

    //use this to space the images
    s2.appendChild(document.createElement('br'))
    s2.appendChild(document.createElement('br'))
  }
}