I am working on a page that showcases items from an array list, each with an image capped at 120px. I am looking for a way to have the image pop up in the center of the screen with a larger size without relying on plugins. Although there are plugins available for this purpose, I prefer to achieve it through coding.
Here is the structure of my code:
<div id="animallist"></div>
Incorporated JavaScript:
const animals = [{
name: "Cat",
useful: "no",
image: "https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png"
},
{
name: "Dog",
useful: "yes",
image: "https://post.medicalnewstoday.com/wp-content/uploads/sites/3/2020/02/322868_1100-1100x628.jpg"
},
{
name: "Fish",
useful: "no",
image: "https://cdn0.wideopenpets.com/wp-content/uploads/2019/10/Fish-Names-770x405.png"
}
]
animals.forEach(addLink);
function addLink(animal, i) {
const div = document.createElement('div');
const animalList = document.createElement('h2');
const image = document.createElement('img');
image.id = "image";
animalList.innerHTML = animal.name + " " +"-"+"useful?" + " "+ animal.useful;
animalList.style.cssText = "text-align:center;"
image.src = animal.image;
div.appendChild(image);
div.appendChild(animalList);
div.dataset.animalName = animal.name;
animallist.appendChild(div);
}