Change kitty image with buttons

by Tyler Brown

HTML

<div id="container">
  <img id="kitty" />
  <div id="btns">
    <button id="btn-prev" class="btn">Previous Kitty</button>
    <button id="btn-rand" class="btn">Random Kitty</button>
    <button id="btn-next" class="btn">Next Kitty</button>
  </div>
</div>

CSS

#container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-direction: column;
  padding: 24px;
}

#btns {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.btn {
  padding: 12px 24px;
  background-color: #66CC99;
  border: 1px solid #339966;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  color: white;
  transition: all 300ms;
}
.btn:hover {
  background-color: #339966;
}

#kitty {
  width: 200px;
  height: 200px;
  display: block;
  border: 1px solid #CCC;
  object-fit: cover;
}

JavaScript

const getRand = (min, max) => {
  return Math.floor(Math.random() * ((max + 1) - min)) + min;
};

let catUrls = (() => {
  const total = Math.round(Math.random() * 1000);
  let count = 0;
  const arr = [];
  while (count < total) {
    arr.push(`https://placecats.com/${getRand(100,300)}/${getRand(100,300)}`);
    count += 1;
  }
  return arr;
})();
// [
//   'https://placecats.com/290/290',
//   'https://placecats.com/300/300',
//   'https://placecats.com/301/301',
//   'https://placecats.com/303/303',
//   'https://placecats.com/304/304',
//   'https://placecats.com/305/305',
//   'https://placecats.com/306/306',
//   'https://placecats.com/308/308',
// ];

let btnPrev = document.querySelector('#btn-prev');
let btnRand = document.querySelector('#btn-rand');
let btnNext = document.querySelector('#btn-next');
let mainImg = document.querySelector('#kitty');

let currentIndex = 0;

let setImg = (index) => {
  mainImg.src = catUrls[index];
};

let onClickPrev = () => {
  console.log('clicked previous');
};

let onClickNext = () => {
  console.log('clicked next');
  currentIndex = currentIndex + 1;
  console.log('currentIndex: ', currentIndex);
  if (currentIndex > (catUrls.length - 1)) {
    currentIndex = 0;
  }
  setImg(currentIndex);
};

let onClickRand = () => {
  console.log('clicked random');
};

btnPrev.addEventListener('click', onClickPrev);
btnRand.addEventListener('click', onClickRand);
btnNext.addEventListener('click', onClickNext);

setImg(currentIndex);
console.log(`hello, you have ${catUrls.length} kitty cats`);