Hi Campers,
I am working on a page that lists a bunch of paintings and some info under each painting. I am using the function below to create the DOM elements from an array of objects.
I want the page to look like this:
https://snowdenwintermute.github.io/ellen-silverman/artworks.html
But instead it looks like:
https://snowdenwintermute.github.io/ellen-silverman/professorsInteriors.html
I am using the same CSS on this Gallery page as I am on my Artworks page. The only difference I see is that the Artworks page is manually written HTML and the Gallery page is generated from my JS.
What am I missing here?
let createPaintingElements = function(p){
// Object with all the paintings and info
var paintingList = document.getElementById("paintingList");
// Fragment to store the elements before "flushing"
var myDF = document.createDocumentFragment();
// Parent div in the fragment, all divs append to it
var galleryDiv = document.createElement("div");
galleryDiv.className += ("galleryDiv")
myDF.appendChild(galleryDiv);
// Loop through the paintings array of objects
for(pi of paintings){
//img src, class name
var img = document.createElement("img");
img.className += ("galleryPicImg")
img.src = pi.img;
galleryDiv.appendChild(img);
// Info text box at bottom of img
var infoDiv = document.createElement("div");
infoDiv.className = ("infoDiv");
galleryDiv.appendChild(infoDiv);
var title = document.createElement("div");
title.className = ("galleryPicTitle")
title.textContent = pi.title;
infoDiv.appendChild(title);
var size = document.createElement("div");
size.className = ("galleryPicSize")
size.textContent = pi.size;
infoDiv.appendChild(size);
var price = document.createElement("div");
price.className = ("galleryPicPrice")
price.textContent = pi.price;
infoDiv.appendChild(price);
}
paintingList.appendChild(myDF);
}
Full Code: