How to put my images in a container

Right now I have this code that’s displaying images from my API, but I want to add some CSS to make it look better.

An example of how it looks now:


<script>
const twinimgLimit = 145;
const twinimgNumber = Math.floor(Math.random() * twinimgLimit);
var twinurl = "https://media.publit.io/file/Twintails/" + twinimgNumber + ".jpg"
document.getElementById("img").innerHTML = `<img src=${twinurl} >`
</script>

It’s all over the place lol.

An example of how it should look:

The CSS from the one of how it should look is:

<div class="w3-container w3-card-4 w3-center w3-purple">
    <br>
    <img src="https://cdn.nekos.life/neko/neko_128.png" alt="neko" class="w3-image w3-card-4" onclick="document.getElementById('modal01').style.display='block'">
    <br>
    <br>
</div>

Instead of the “https://cdn.nekos.life/neko/neko_128.png” I want to put my twinurl so that it gets random images from my API insead of the nekos.life one. All the images would also be in a container so they aren’t all over the place (It’s fine if you can’t do the container part).

Thanks!

Ok, so I updated the code and here you go, this might solve your problem;

Note: Place HTML on top of JS
Javascript:

const twinimgLimit = 145;
const twinimgNumber = Math.floor(Math.random() * twinimgLimit);
var twinurl = "https://media.publit.io/file/Twintails/" + twinimgNumber + ".jpg"
document.getElementById("img").innerHTML = `<img src=${twinurl} alt="neko" class="w3-image w3-card-4" onclick="document.getElementById('modal01').style.display='block'">`

HTML:

<div class="w3-container w3-card-4 w3-center w3-purple">
    <br>
<div id="img"></div>
    <br>
    <br>
</div>
2 Likes