Working with toggles, cat photos, and classList
I’ve had a bit of success implementing a button that toggles the automatic switching of images, and I’ve added the ability to click on a photo to feature it. Just five days left until I hit 100 days straight of these types of posts. I’m going to try and take a bit more time to sort out what I do for the remaining five days.
View the code:
HTML and JS
<div class="code-block">
<div class="photo-grid">
<figure class="grid-photo featured">
<img class="loading-indicator no-js" src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 2" stroke="currentColor" stroke-dasharray="1,0.5"><path d="M1,1 5,1" /></svg>' data-src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 2" stroke="currentColor" stroke-dasharray="1,0.5"><path d="M1,1 5,1" /></svg>' alt="Cute kitten" >
<noscript>
<img src="https://placekitten.com/600/600?image=1" alt="Cute kittens" >
</noscript>
<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=6" alt="Cute kitten" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=7" alt="Cute kittens" >
<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 snow" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=9" 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=10" 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=11" 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=4" 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=6" 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=8" 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=10" 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=2" alt="Cute kitten" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=1" alt="Cute kittens" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=7" 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>
<button id="switch-controls">Turn ON automatic switching of images</button>
</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 () {
const slideshowButton = document.getElementById('switch-controls');
let gridPhotos = document.querySelectorAll('.grid-photo');
let updateState = false;
console.log(gridPhotos)
function initialPhoto() {
const initialFigure = document.getElementById(`grid-photo-${randomNum(1, gridPhotos.length)}`);
const figFeatured = document.querySelector('.featured');
figFeatured.innerHTML = initialFigure.innerHTML;
const imgFeatured = document.querySelector('.featured img');
imgFeatured.setAttribute('style','animation: featured 1s backwards;')
}
function updatePhoto() {
if(updateState){
const newFeaturedFigure = document.getElementById(`grid-photo-${randomNum(1, gridPhotos.length)}`);
const figFeatured = document.querySelector('.featured');
figFeatured.innerHTML = newFeaturedFigure.innerHTML;
const imgFeatured = document.querySelector('.featured img');
imgFeatured.setAttribute('style','animation: featured 1s backwards;')
}
}
for (let i = 0; i < gridPhotos.length; i++) {
gridPhotos[i].setAttribute('id',`grid-photo-${[i]}`);
document.querySelector(`#grid-photo-${[i]}`).addEventListener('click', setPhoto);
}
function setPhoto() {
let prevSelectedFigure = document.querySelector('.chosen-photo');
if(prevSelectedFigure) {
console.log('Change selection');
prevSelectedFigure.classList.remove('chosen-photo');
console.log('Did it work?' + prevSelectedFigure.outerHTML);
}
let selectedFigure = this;
console.log(selectedFigure);
let selectedFigureClasses = selectedFigure.classList;
selectedFigure.classList.add('selected-feature');
console.log(selectedFigureClasses);
selectedFigureImg = document.querySelector('.selected-feature img');
selectedFigureImg.classList.add('chosen-photo');
console.log(selectedFigureImg);
const newFeaturedFigure = this;
const figFeatured = document.querySelector('.featured');
figFeatured.innerHTML = newFeaturedFigure.innerHTML;
const imgFeatured = document.querySelector('.featured img');
imgFeatured.setAttribute('style','animation: featured 1s backwards;')
updateState = false;
}
function updateButton() {
if(updateState) {
updateState = false;
slideshowButton.textContent = "Turn ON automatic switching of images.";
} else {
updateState = true;
slideshowButton.textContent = "Turn OFF automatic switching of images.";
}
}
let featured = '';
initialPhoto();
window.setInterval(updatePhoto, 5*1000);
slideshowButton.addEventListener('click', updateButton);
}
</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;
grid-gap: 1rem;
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;
}
@keyframes featured {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes flash {
to {
opacity: 0;
}
}
.loading-indicator {
animation: flash 0.75s linear infinite;
}
.featured {
animation-name: featured;
animation-duration: .5s;
animation-iteration-count: 1;
animation-timing-function: ease-out;
grid-column: 2 / span 3;
grid-row: 2 / span 3;
}
.chosen-photo {
opacity: .75;
}
button {display: block; margin: 1rem auto; padding: 1rem;}
}