Randomizing cat photos in a grid


by Jeremy Caudle
code

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.

Cute kitten
adorable
Cute kittens
cute as a button
Cute kitten in snow
kitten playing in snow
Cute kitten by door
letting itself in
Cute kitten in a hand
adorable kitten in hand
Cute kitten
look at the cat(s)
Cute kittens
look at the cat(s)
Cute kitten in snow
look at the cat(s)
Cute kitten by door
look at the cat(s)
Cute kitten in a hand
look at the cat(s)
Cute kitten
look at the cat(s)
Cute kittens
look at the cat(s)
Cute kitten in snow
look at the cat(s)
Cute kitten by door
look at the cat(s)
Cute kitten in a hand
look at the cat(s)
Cute kitten with cute face
look at the cat(s)
Cute kitten
look at the cat(s)
Cute kittens
look at the cat(s)
Cute kitten in snow
look at the cat(s)
Cute kitten in a hand
look at the cat(s)

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;
                }
            }