Randomizing cat photos in a grid
Today I’ve added some randomization to set a random image as the featured image and added the functionality of switching out the photos whenever you click on one. I’m excited to get to work setting up the timer to rotate them in and out of the featured spot.
View the code:
HTML and JS
<div class="code-block">
<div class="photo-grid">
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=1" alt="Cute kitten" >
<figcaption>adorable</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=2" alt="Cute kittens" >
<figcaption>cute as a button</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=3" alt="Cute kitten in snow" >
<figcaption>kitten playing in snow</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=4" alt="Cute kitten by door" >
<figcaption>letting itself in</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=5" alt="Cute kitten in a hand" >
<figcaption>adorable kitten in hand</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=1" alt="Cute kitten" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=2" alt="Cute kittens" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=3" alt="Cute kitten in snow" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=4" alt="Cute kitten by door" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=5" alt="Cute kitten in a hand" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=1" alt="Cute kitten" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=2" alt="Cute kittens" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=3" alt="Cute kitten in snow" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=4" alt="Cute kitten by door" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=5" alt="Cute kitten in a hand" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=7" alt="Cute kitten with cute face" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=1" alt="Cute kitten" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=2" alt="Cute kittens" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=3" alt="Cute kitten in snow" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=8" alt="Cute kitten in a hand" >
<figcaption>look at the cat(s)</figcaption>
</figure>
</div>
</div>
<script>
// ---------
// Variables
// ---------
let gridPhotos = [];
/* Functions */
function randomNum(minnum, maxnum) {
min = Math.ceil(minnum);
max = Math.floor(maxnum);
return Math.floor(Math.random() * (maxnum - minnum) + minnum);
}
// ---------
// Events
// ---------
window.onload = function () {
let gridPhotos = document.querySelectorAll('.grid-photo');
console.log(gridPhotos)
function setPhoto() {
for (let i = 0; i < gridPhotos.length; i++) {
if(gridPhotos[i].getAttribute('class') === "grid-photo featured") {
console.log('identified');
gridPhotos[i].classList = "grid-photo";
}
}
this.classList = "grid-photo featured";
}
for (let i = 0; i < gridPhotos.length; i++) {
gridPhotos[i].setAttribute('id',`grid-photo-${[i]}`);
document.querySelector(`#grid-photo-${[i]}`).addEventListener('click', setPhoto);
}
gridPhotos[randomNum(0, gridPhotos.length)].classList = "grid-photo featured";
}
</script>CSS
@supports (display: grid) {
.photo-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
max-width: 800px;
max-height: 800px;
gap: 1rem;
margin: 1rem auto;
overflow: hidden;
}
.photo-grid > * {
box-shadow: inset 0 0 1px black;
}
.photo-grid figure {
margin: 0;
padding: 0;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
place-items: center;
transition: all .125s ease-out;
}
.photo-grid figure > img {
width: 100%;
height: auto;
grid-column: 1 / 2;
grid-row: 1 / 2;
transition: transform .25s ease-out, clip-path .25s ease-out;
}
.photo-grid figure > figcaption {
grid-column: 1 / 2;
grid-row: 1 / 2;
padding: .5rem;
align-self: flex-end;
color: transparent;
transition: color 1s ease-out;
text-align: center;
}
.photo-grid figure:hover > figcaption {
color: black;
}
.featured {
grid-column: 2 / span 3;
grid-row: 2 / span 3;
}
}