text: let times = ['6:00am', '7:00am', '8:00am', '9:00am', '10:00am', '11:00am', '12:00pm', '1:00pm', '2:00pm', '3:00pm', '4:00pm', '5:00pm', '6:00pm', '7:00pm'];
  
  let cities = [];
  
  let articleElem = null;
  let tableElem = null;
  
  
  function CityData(minCustomers, maxCustomers, avgCookiesPerCustomer, title) {
    this.minCustomers = minCustomers;
    this.maxCustomers = maxCustomers;
    this.avgCookiesPerCustomer = avgCookiesPerCustomer;
    this.title = title;
    this.simulatedCustomersPerHour = [];
    this.simulatedCookiesSoldPerHour = [];
    this.generateSimulatedCookiesSoldPerHour();
    cities.push(this);
  }
  
  CityData.prototype.generateSimulatedCustomersPerHour = function () {
    this.simulatedCustomersPerHour = []; //reset array
    for (let i = 0; i < times.length; i++) {
      this.simulatedCustomersPerHour.push(Math.floor(Math.random() * (this.maxCustomers - this.minCustomers + 1) + this.minCustomers));
    }
  };
  
  CityData.prototype.generateSimulatedCookiesSoldPerHour = function () {
    this.generateSimulatedCustomersPerHour();
    this.simulatedCookiesSoldPerHour = []; //reset array
    for (let j = 0; j < this.simulatedCustomersPerHour.length; j++) {
      this.simulatedCookiesSoldPerHour.push(Math.round(
        this.simulatedCustomersPerHour[j] * this.avgCookiesPerCustomer));
    }
  };
  
  CityData.prototype.render = function (table) {
    //Creates and appends a new row of simulated data to the given table.
    //First, creates a new row and adds it to the table:
    const newRow = document.createElement('tr');
    table.appendChild(newRow);
  
    //Adds a heading inside the row with the city name:
    const cityHeading = document.createElement('th');
    cityHeading.textContent = this.title;
    newRow.appendChild(cityHeading);
  
    const dailyTotalCell = document.createElement('td');
    let runningDailyTotal = 0;
  
    //Populates row cells with simulated cookies sold data
    for (let i = 0; i < times.length; i++) {
      const tableCellData = document.createElement('td');
      tableCellData.textContent = this.simulatedCookiesSoldPerHour[i];
  
      runningDailyTotal += this.simulatedCookiesSoldPerHour[i];
      dailyTotalCell.textContent = runningDailyTotal;
      newRow.appendChild(tableCellData);
      newRow.appendChild(dailyTotalCell);
    }
  };
  
  let seattle = new CityData(23, 65, 6.3, 'Seattle');
  let tokyo = new CityData(3, 24, 1.2, 'Tokyo');
  let dubai = new CityData(11, 38, 3.7, 'Dubai');
  let paris = new CityData(20, 38, 2.3, 'Paris');
  let lima = new CityData(2, 16, 4.6, 'Lima');
  
  let citiesHolder = document.getElementById('allCitiesHolder');
  
  renderTable();
  
  
  function renderTable() {
    citiesHolder.removeChild(citiesHolder.childNodes[0]); //removes existing table so we dont draw duplicates
    //create article:
    articleElem = document.createElement('article');
    citiesHolder.appendChild(articleElem);
    // Create table:
    tableElem = document.createElement('table');
    articleElem.appendChild(tableElem);
  
    //Add headers (our list of times)
    addHeadersToTable(tableElem);
  
    //Populates cells by calling each city's render()
    for (let i = 0; i < cities.length; i++) {
      cities[i].render(tableElem);
    }
    //Adds footers (column totals)
    addFootersToTable(tableElem);
  }
  
  function addHeadersToTable(table) {
    //Adds a row consisting of our timeslot labels at the top of the table.
    const tableHeadersElem = document.createElement('thead');
    table.appendChild(tableHeadersElem);
  
    //Adds a single blank heading, so there's room to put the city name
    const blankHeader = document.createElement('th');
    blankHeader.textContent = '';
    tableHeadersElem.appendChild(blankHeader);
  
    //Loops through list of times to populate headings
    for (let i = 0; i < times.length; i++) {
      const tableHeader = document.createElement('th');
      tableHeader.textContent = times[i];
      tableHeadersElem.appendChild(tableHeader);
    }
  
    //Adds final Daily Location Total header
    const dailyLocationTotalHeader = document.createElement('th');
    dailyLocationTotalHeader.textContent = 'Daily Location Total';
    tableHeadersElem.appendChild(dailyLocationTotalHeader);
  }
  
  
  function addFootersToTable(table) {
    //Adds a row consisting of our sales totals to the bottom of the table.
    const tableFootersElem = document.createElement('thead');
    table.appendChild(tableFootersElem);
  
    //Adds a the "Totals" label
    const totalsLabel = document.createElement('th');
    totalsLabel.textContent = 'Totals';
    tableFootersElem.appendChild(totalsLabel);
  
    let dailyTotalsSum = 0;
  
    //Loops through list of times to populate totals
    for (let i = 0; i < times.length; i++) {
      let hourlyTotal = 0;
      for (let j = 0; j < cities.length; j++) {
        hourlyTotal += cities[j].simulatedCookiesSoldPerHour[i];
        dailyTotalsSum += cities[j].simulatedCookiesSoldPerHour[i];
      }
      const tableFooter = document.createElement('th');
      tableFooter.textContent = hourlyTotal;
      tableFootersElem.appendChild(tableFooter);
    }
  
    //Adds the final Daily Locations Total sum
    const dailyTotalsFooter = document.createElement('th');
    dailyTotalsFooter.textContent = dailyTotalsSum;
    tableFootersElem.appendChild(dailyTotalsFooter);
  }
  
  const cityForm = document.getElementById('add-city');
  
  cityForm.addEventListener('submit', handleSubmit);
  
  function handleSubmit(event) {
    event.preventDefault();
  
    let title = event.target.title.value;
    let maxCust = Number(event.target.maxCust.value);
    let minCust = Number(event.target.minCust.value);
    let avgSale = Number(event.target.avgSale.value);
  
    let newCity = new CityData(minCust, maxCust, avgSale, title);
  
    newCity.generateSimulatedCookiesSoldPerHour();
    console.log(newCity);
    renderTable();
  }
  