create dynamic image grid based on images count in html and typescript

Question

Hi team, i have a 5 images to display a grid based on below conditions using HTMl and Typescript   need to design a HTML page based on below conditions ,here i have attached zip file for reference   Basic Image 1,sample image 1  finally i need to show below format  basicimage.png  sampleimage.png     Basic Image 1,sample image 2 finally i need to show below format    basic image.pn sampleimg.png sampleimg.png   Basic Image 1,sample image 3 finally i need to show below format     basicimg.png sampleimg.png
sampleimg.png
sampleimg.png
based on images count need to generate image layout using typescript

Harsh Shah · Answer

Hi Siva,   Try the below code I hope it helps you...    HTML
Header Footer JS   fetch("https://dog.ceo/api/breeds/image/random/10")
.then((response) => response.json())
.then((data) => data.message)
.then((arrayOfLinks) => addPhoto(arrayOfLinks))
.catch((e) => console.log(e));
function addPhoto(links) {
let gallery= document.querySelector(".gallery");
for (let link of links) {
let image = document.createElement("img");
image.src = link;
gallery.appendChild(image);
} } CSS   * {
box-sizing: border-box;
margin: 0;
padding: 0;
} html,
body {
height: 100vh;
} body {
display: grid;
grid-template-rows: min-content auto min-content;
} body {
text-align: center;
} header,
footer {
background-color: #a7e3e3;
font-size: 1.5rem;
} header,
footer,
div {
padding: 10px;
} img {
height: 200px;
padding: 10px;
flex-grow: 1;
} .gallery {
background-color: #ffd966;
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: center;
}