Event listeners drills

Event Listeners drills.js

1.) Cat Carousel

//step 1: make sure accessibility features transfer over to elements in new function
//.attr() - Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element. Syntax is .attr(attribute name, value) or .attr(attribute name, function)

function thumbnailClicks() {
  $('.thumbnail').on('click', function(event) {
    const imgSrc = $(this).find('img').attr('src');
    const imgAlt = $(this).find('img').attr('alt'); //trying to find elements named 'img' and then obtain their attribute value of 'alt' or 'src'? 
    
//step 2: make thumbnails have same capability to become large main image. That is what is going on below?
   
    $('.hero img').attr('src', imgSrc).attr('alt', imgAlt);
 });
}


$(thumbnailClicks);



2.) Return of Fizzbuzz


function fizzBuzz(countTo) {
 const result = [];
  for (let i = 1; i<=countTo; i++) {
    if (i % 15 === 0) {
      result.push("fizzbuzz");
    } else if (i % 5 === 0) {
      result.push("buzz");
    } else if (i % 3 === 0) {
      result.push("fizz");
    } else {
      result.push(i);
   }
}
  return result;

}

$('#number-chooser').submit(function (event) {
  event.preventDefault()
  const inputNumber = $('#number-choice').val(); 
  const fizzBuzzArray = fizzBuzz(inputNumber);
  console.log(fizzBuzzArray);
  
  for (let i = 0; i < fizzBuzzArray.length; i++) {
    $('.js-results').append(`<div class="fizz-buzz-item ${fizzBuzzArray[i]}">
  <span>${fizzBuzzArray[i]}</span>
</div>`)
  }
});