/index.css

## index.css
* {
  box-sizing: border-box;
  font-family: sans-serif
}

main {
  max-width: 960px;
  margin: 0 auto;
  min-width: 250px;
  padding: 30px;
}

p {
  max-width: 500px;
}

.fizz-buzz-item {
  display: block;
  float: left;
  width: 80px;
  height: 80px;
  text-align: center;
  border: 1px solid grey;
  margin-right: 5px;
  margin-bottom: 5px;
}

.fizz-buzz-item span {
  vertical-align: middle;
  line-height: 80px;
}

.fizz, .fizzbuzz {
  border: 4px solid green;
}

.buzz, .fizzbuzz {
  background-color: #D5F5E3;
}

## index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>fizzbuzz drill</title>
        <script
          src="https://code.jquery.com/jquery-3.2.1.min.js"
          integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
          crossorigin="anonymous"></script>
        <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="index.js"></script>
    </body>
</html>

## index.js

function fizzBuzz(num){
   var fbArray = [];
  /*FizzBuzz - Intermediate - using if statements only*/
  for (var counter =1; counter <=num; counter++){
    //set the default value first
    var msg = counter;

    //over-write the default values as we go through the logic

    if (counter %5 ===0){
      msg = "Buzz";
    }
    if (counter % 3===0){
      msg = "Fizz";
    }
    if (counter % 15 ===0 ){
      msg = "FizzBuzz";
    }
    fbArray.push(msg);
   //console.log(msg);
  // console.log(fbArray);
  // $(".js-results").append(fbArray);
  }
  var fizzBuzzArray = fbArray;
  fizzBuzzArray.forEach(function(item){
    var printItem =$(
      '<div class= "fizz-buzz-item"><span>' + item + '</span><div>'
    );
    $(".js-results").append(printItem);
  });
    console.log(fbArray);
  return fbArray;
}


$('#number-chooser').submit(function(event) {
  // this stops the default form submission behavior
  event.preventDefault();
  //in case there is already a result
  $(".js-results").empty();
  var userInput = $('#number-choice').val();
 // fizzBuzz(userInput);

  fizzBuzz(userInput).forEach(function(item){
    var printItem =$(
      '<div class= "fizz-buzz-item"><span>' + item + '</span><div>'
    );
    $(".js-results").append(printItem);
  });
 // $(".js-results").append(userInput);
  //$(".js-results").text(userInput);
});
	* {
	box-sizing: border-box;
	font-family: sans-serif
	}

	main {
	max-width: 960px;
	margin: 0 auto;
	min-width: 250px;
	padding: 30px;
	}

	p {
	max-width: 500px;
	}

	.fizz-buzz-item {
	display: block;
	float: left;
	width: 80px;
	height: 80px;
	text-align: center;
	border: 1px solid grey;
	margin-right: 5px;
	margin-bottom: 5px;
	}

	.fizz-buzz-item span {
	vertical-align: middle;
	line-height: 80px;
	}

	.fizz, .fizzbuzz {
	border: 4px solid green;
	}

	.buzz, .fizzbuzz {
	background-color: #D5F5E3;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>fizzbuzz drill</title>
	<script
	src="https://code.jquery.com/jquery-3.2.1.min.js"
	integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
	crossorigin="anonymous"></script>
	<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="index.js"></script>
	</body>
	</html>

	function fizzBuzz(num){
	var fbArray = [];
	/FizzBuzz - Intermediate - using if statements only/
	for (var counter =1; counter <=num; counter++){
	//set the default value first
	var msg = counter;

	//over-write the default values as we go through the logic

	if (counter %5 ===0){
	msg = "Buzz";
	}
	if (counter % 3===0){
	msg = "Fizz";
	}
	if (counter % 15 ===0 ){
	msg = "FizzBuzz";
	}
	fbArray.push(msg);
	//console.log(msg);
	// console.log(fbArray);
	// $(".js-results").append(fbArray);
	}
	var fizzBuzzArray = fbArray;
	fizzBuzzArray.forEach(function(item){
	var printItem =$(
	'<div class= "fizz-buzz-item"><span>' + item + '</span><div>'
	);
	$(".js-results").append(printItem);
	});
	console.log(fbArray);
	return fbArray;
	}


	$('#number-chooser').submit(function(event) {
	// this stops the default form submission behavior
	event.preventDefault();
	//in case there is already a result
	$(".js-results").empty();
	var userInput = $('#number-choice').val();
	// fizzBuzz(userInput);

	fizzBuzz(userInput).forEach(function(item){
	var printItem =$(
	'<div class= "fizz-buzz-item"><span>' + item + '</span><div>'
	);
	$(".js-results").append(printItem);
	});
	// $(".js-results").append(userInput);
	//$(".js-results").text(userInput);
	});