text: /* global Product, Cart */
  
  'use strict';
  
  // Set up an empty cart for use on this page.
  const cart = new Cart([]);
  
  // On screen load, we call this method to put all of the busmall options
  // (the things in the Product.allProducts array) into the drop down list.
  function populateForm() {
  
    //TODO: Add an <option> tag inside the form's select for each product
    const selectElement = document.getElementById('items');
    for (let i in Product.allProducts) {
      let optionEl = document.createElement('option');
      optionEl.textContent=Product.allProducts[i].name;
      selectElement.appendChild(optionEl);
  
      }
  
  }
  
  // When someone submits the form, we need to add the selected item to the cart
  // object, save the whole thing back to local storage and update the screen
  // so that it shows the # of items in the cart and a quick preview of the cart itself.
  function handleSubmit(event) {
    event.preventDefault();
    
  
    // TODO: Prevent the page from reloading
  
    // Do all the things ...
    addSelectedItemToCart();
    cart.saveToLocalStorage();
    updateCounter();
    updateCartPreview();
  
  }
  
  // TODO: Add the selected item and quantity to the cart
  function addSelectedItemToCart(event) {
    let chosenItem = document.getElementById('items');
    let item = chosenItem.value;
    // console.log(items);
    // window.items=items;
    // console.log(items2);
  
    let chosenQuantity = document.getElementById('quantity')
    
    let quantity = chosenQuantity.value;
    // console.log(quantity);
    // window.quantity2=quantity;
    cart.addItem(item, quantity);
  
    // TODO: suss out the item picked from the select list
    // TODO: get the quantity
    // TODO: using those, add one item to the Cart
  }
  let count = 0
  // TODO: Update the cart count in the header nav with the number of items in the Cart
  function updateCounter() {
    count++
    let counter=document.getElementById('itemCount');
    counter.textContent= cart.items.length;
  }
  
  // TODO: As you add items into the cart, show them (item & quantity) in the cart preview div
  function updateCartPreview() {
    let divEl = document.getElementById('cartContents');
    console.log(divEl)
    let ulEl = document.createElement('ul');
    divEl.appendChild(ulEl);
    let liEl = document.createElement('li');
    let last_element = cart.items[cart.items.length - 1]
    liEl.textContent=`the item is ${last_element.product} and the quantity is ${last_element.quantity}.`;
    ulEl.appendChild(liEl);
    // TODO: Get the item and quantity from the form
    // TODO: Add a new element to the cartContents div with that information
  }
  
  // Set up the "submit" event listener on the form.
  // This is the trigger for the app. When a user "submits" the form, it will
  // Call that handleSubmit method above and kick off the whole process
  const catalogForm = document.getElementById('catalog');
  catalogForm.addEventListener('submit', handleSubmit);
  
  // Before anything else of value can happen, we need to fill in the select
  // drop down list in the form.
  populateForm();
  