bootstrap rows with cols
Sun Sep 01 2024 06:30:52 GMT+0000 (Coordinated Universal Time)
Saved by @davidmchale
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;



Comments