bootstrap rows with cols

import people from "./data.js";


(function () {
  "use strict";

  let colCount = 0;
  let html = "";
  const container = document.querySelector(".container");

  function htmlList({ img, name, job, text }) {
    return `<div class="col-sm-4"><div class="card"><h3>${name}</h3></div></div>`;
  }

  function peopleLayout() {
    if (people.length) {
      html += `<div class="row">`;
      people.forEach((person, index) => {
        colCount++;
        html += htmlList(person);

        if (colCount % 3 === 0) {
          html += `</div>`; // closing the row if there are more than 3 cols
          colCount = 0;

          if (index < people.length - 1) {
            //opening a new row if index is less that the people array
            html += '<div class="row">';
          }
        }
      });

      // add to the DOM
      if (container) {
        container.innerHTML = html;
      }
    }
  }

  const init = () => {
    peopleLayout();
  };

  window.addEventListener("DOMContentLoaded", init);
})();





/** data (people) */
const people = [
  {
    img: "https://res.cloudinary.com/diqqf3eq2/image/upload/c_scale,w_200/v1595959121/person-1_aufeoq.jpg",
    name: "peter doe",
    job: "product manager",
    text: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quoeius recusandae officia voluptas sint deserunt dicta nihil nam omnis? `,
  },
  {
    img: "https://res.cloudinary.com/diqqf3eq2/image/upload/c_scale,w_200/v1595959131/person-2_ipcjws.jpg",
    name: "susan doe",
    job: "developer",
    text: `D dolor sit amet consectetur adipisicing elit. Quidem quoeius recusandae officia voluptas sint deserunt dicta nihil nam omnis?
    D dolor sit amet consectetur adipisicing elit. Quidem quoeius recusandae officia voluptas sint deserunt dicta nihil nam omnis?`,
  },
  {
    img: "https://res.cloudinary.com/diqqf3eq2/image/upload/c_scale,w_200/v1595959131/person-3_rxtqvi.jpg",
    name: "emma doe",
    job: "designer",
    text: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quoeius recusandae officia voluptas sint deserunt dicta nihil nam omnis?`,
  },
  {
    img: "https://res.cloudinary.com/diqqf3eq2/image/upload/c_scale,w_200/v1595959131/person-2_ipcjws.jpg",
    name: "susan doe",
    job: "developer",
    text: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quoeius recusandae officia voluptas sint deserunt dicta nihil nam omnis?`,
  },
  {
    img: "https://res.cloudinary.com/diqqf3eq2/image/upload/c_scale,w_200/v1595959131/person-3_rxtqvi.jpg",
    name: "emma doe",
    job: "designer",
    text: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quoeius recusandae officia voluptas sint deserunt dicta nihil nam omnis?`,
  },
  {
    img: "https://res.cloudinary.com/diqqf3eq2/image/upload/c_scale,w_200/v1595959131/person-2_ipcjws.jpg",
    name: "susan doe",
    job: "developer",
    text: `D dolor sit amet consectetur adipisicing elit. Quidem quoeius recusandae officia voluptas sint deserunt dicta nihil nam omnis?
    D dolor sit amet consectetur adipisicing elit. Quidem quoeius recusandae officia voluptas sint deserunt dicta nihil nam omnis?`,
  },
];

export default people;