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!