elliotkim916/Cat Carousel HTML

## Cat Carousel HTML
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>cat carousel drill</title>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
      <main role="main">
        <h1>Image Carousel</h1>
        <div class="hero">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat1.jpg" alt="An orange-eyed grey cat stretches toward the camera."/>
        </div>
        <div class="thumbnails">
          <a class="thumbnail" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat1.jpg" alt="An orange-eyed grey cat stretches toward the camera."/></a>
          <a class="thumbnail" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat2.jpg" alt="Closeup of a blue-eyed, grey cat with markings."/></a>
          <a class="thumbnail" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat3.jpg" alt="An orange cat licks its paw."/></a>
          <a class="thumbnail" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat4.jpg" alt="A content brown cat lounges with eyes closed."/></a>
        </div>
      </main>
      <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
      <script src="index.js"></script>
    </body>
</html>

## Cat Carousel Javascript
function thumbnailImage() {
  $('.thumbnails').on('click', '.thumbnail', function(event){
    const imgSrc = $(event.currentTarget).find('img').attr('src');
    const imgAlt = $(event.currentTarget).find('img').attr('src');

    $('.hero img').attr('src', imgSrc).attr('alt', imgAlt);
  });
}

$(thumbnailImage());

## Fizzbuzz HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>fizzbuzz drill</title>
    <link href="index.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <main>
      <h1>Fizz Buzz</h1>
      <section>
        <p>In this game, you enter a positive number, and I count from 0 to that number, subbing in "fizz" if it's divisible by 3, "buzz" if it's divisible by 5, and "fizzbuzz" if it's divisible by both</p>
        <form id="number-chooser" action="www.somewhere.com">
          <label for="number-choice">Choose a positive number</label>
          <input id="number-choice" name="number-choice" type="number" required />
          <input type="submit" />
        </form>
      </section>
      <section>
        <h2>Results</h2>
        <div class="js-results"></div>
      </section>
    </main>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="index.js"></script>
  </body>
</html>

## Fizzbuzz Javascript
function fizzbuzzAgain() {
  $('#number-chooser').submit(function(event) {
    event.preventDefault();
    $('.js-results').empty();
    let userNumber = $(event.currentTarget).find('#number-choice').val();
    let results = [];

    for (let i=1; i<=userNumber; i++) {
      if (i % 15 === 0) {
        results.push($('<div class="fizz-buzz-item fizzbuzz"><span>fizzbuzz</span></div>'));
      } else if (i % 5 === 0) {
        results.push($('<div class="fizz-buzz-item buzz"><span>buzz</span></div>'));
      } else if (i % 3 === 0) {
        results.push($('<div class="fizz-buzz-item fizz"><span>fizz</span></div>'));
      } else {
        results.push($(`<div class="fizz-buzz-item"><span>${i}</span></div>`));
      }
    }
    $('.js-results').append(results);
  });
}

$(fizzbuzzAgain());
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>cat carousel drill</title>
	<link rel="stylesheet" href="index.css">
	</head>
	<body>
	<main role="main">
	<h1>Image Carousel</h1>
	<div class="hero">
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat1.jpg" alt="An orange-eyed grey cat stretches toward the camera."/>
	</div>
	<div class="thumbnails">
	<a class="thumbnail" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat1.jpg" alt="An orange-eyed grey cat stretches toward the camera."/></a>
	<a class="thumbnail" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat2.jpg" alt="Closeup of a blue-eyed, grey cat with markings."/></a>
	<a class="thumbnail" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat3.jpg" alt="An orange cat licks its paw."/></a>
	<a class="thumbnail" href="#"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-65/cat4.jpg" alt="A content brown cat lounges with eyes closed."/></a>
	</div>
	</main>
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<script src="index.js"></script>
	</body>
	</html>
	function thumbnailImage() {
	$('.thumbnails').on('click', '.thumbnail', function(event){
	const imgSrc = $(event.currentTarget).find('img').attr('src');
	const imgAlt = $(event.currentTarget).find('img').attr('src');

	$('.hero img').attr('src', imgSrc).attr('alt', imgAlt);
	});
	}

	$(thumbnailImage());
	function fizzbuzzAgain() {
	$('#number-chooser').submit(function(event) {
	event.preventDefault();
	$('.js-results').empty();
	let userNumber = $(event.currentTarget).find('#number-choice').val();
	let results = [];

	for (let i=1; i<=userNumber; i++) {
	if (i % 15 === 0) {
	results.push($('<div class="fizz-buzz-item fizzbuzz"><span>fizzbuzz</span></div>'));
	} else if (i % 5 === 0) {
	results.push($('<div class="fizz-buzz-item buzz"><span>buzz</span></div>'));
	} else if (i % 3 === 0) {
	results.push($('<div class="fizz-buzz-item fizz"><span>fizz</span></div>'));
	} else {
	results.push($(`<div class="fizz-buzz-item"><span>${i}</span></div>`));
	}
	}
	$('.js-results').append(results);
	});
	}

	$(fizzbuzzAgain());