Дан объект
let Fields = {
cat: {
title: "Кот",
img:"img/cat.jpg"
},
book: {
title: "Книга",
img:"img/book.jpg"
},
car: {
title: "Машина",
img: "img/car.jpg",
}
}
Никак не могу понять, как же сформировать ячейки n x n, да при том еще и рандомно выводить в них информацию из объекта, ведь там всего лишь три свойства.
function generateField(object, section, max) {
//let n = randomInteger(3, max);
let n = max;
section.style.cssText = `
grid-template-columns:repeat(${n},1fr);
grid-template-rows:repeat(${n},1fr);`
;
for (let i = 0; i < max * max; i++) {
for (let item in object) {
let block = document.createElement("div");
let title = document.createElement("h2");
title.innerText = object[item].title;
let pic = document.createElement("img");
pic.setAttribute("src", object[item].img);
// В наш блок div добавили заголовок и картинку
block.append(title, pic);
// Добавили уже в самый верхний блок grid всё его содержимое
//section.appendChild(block);
}
// section.appendChild(block)[i];
}
// section.дочерние_элементы[рандомный_индекс]
}
function randomInteger(min, max) {
// случайное число от min до (max+1)
let rand = min + Math.random() * (max + 1 - min);
return Math.floor(rand);
}
let section = document.querySelector(".GameField");
generateField(Fields, section, 5);
Чтоб много не выводить квадратиков я указал пока конкретное число.
В html все просто, пустой div с классом GameField
В Css
.GameField {
display: grid;
grid-gap: 15px;
grid-auto-flow: dense;
}
Помогите определиться как же нужно эту задачку решить?
