Add closet data and handlebars to closetitems!

closet_data.js

var topsData = [
  {
    "item": "V-Neck Sweater",
    "color": "Black",
    "season": "Spring, Summer, Fall, Winter",
    "occasion": "Everyday",
    "image": "images/blackvnecksweater_tops.jpg"
  },
  {
    "item": "Chambray Shirt",
    "color": "Blue",
    "season": "Spring, Summer, Fall, Winter",
    "occasion": "Everyday",
    "image": "images/chambraybuttondown_tops.jpg"
  },
  {
    "item": "Sweater",
    "color": "Coral",
    "season": "Spring, Summer, Fall, Winter",
    "occasion": "Everyday, Special Occasion, Work",
    "image": "images/coralsweater_tops.jpg"
  },
  {
    "item": "Embellished top",
    "color": "White",
    "season": "Spring, Summer, Fall, Winter",
    "occasion": "Special Occasion, Work",
    "image": "images/embellishedvneck_tops.jpg"
  },
  {
    "item": "Gingham Shirt",
    "color": "Purple",
    "season": "Spring, Summer, Fall, Winter",
    "occasion": "Work, Everyday",
    "image": "images/ginghamshirt_tops.jpg"
  },
  {
    "item": "Short Sleeve Shirt",
    "color": "Navy",
    "season": "Spring, Summer, Fall, Winter",
    "occasion": "Work, Everyday",
    "image": "images/navyshortsleeve_tops.jpg"
  },
  {
    "item": "Cardigan",
    "color": "Pink",
    "season": "Spring, Summer, Fall, Winter",
    "occasion": "Work, Everyday",
    "image": "images/pinkcardigan_tops.jpg"
  },
  {
    "item": "Tee",
    "color": "White",
    "season": "Spring, Summer, Fall, Winter",
    "occasion": "Work, Everyday",
    "image": "images/whitetee_tops.jpg"
  },
  {
    "item": "Tank",
    "color": "White",
    "season": "Spring, Summer, Fall, Winter",
    "occasion": "Work, Everyday",
    "image": "images/whitetank_tops.jpg"
  },
  {
    "item": "Striped Tee",
    "color": "Navy, White",
    "season": "Spring, Summer, Fall, Winter",
    "occasion": "Work, Everyday, Special Occasion",
    "image": "images/stripedtee_tops.jpg"
  },
  {
    "item": "Trench Coat",
    "color": "Khaki",
    "season": "Spring, Fall, Winter",
    "occasion": "Work, Everyday",
    "image": "images/trenchcoat_tops.jpg"
  },
  {
    "item": "Workout Top",
    "color": "Navy",
    "season": "Spring, Summer, Fall, Winter",
    "occasion": "Workout",
    "image": "images/workout_tops.jpg"
  },
];

var bottomsData = [
  {
    "item": "Leggings",
    "color": "Black",
    "season": "Spring, Summer, Fall, Winter",
    "occasion": "Everyday",
    "image": "images/blackleggings_pants.jpg"
  },
  {
    "item": "Wide Leg Pants",
    "color": "Blue",
    "season": "Spring, Summer, Fall, Winter",
    "occasion": "Special Occasion, Work",
    "image": "images/bluewideleg_pants.jpg"
  },
  {
    "item": "Camo Chino Pants",
    "color": "Multi",
    "season": "Spring, Summer, Fall, Winter",
    "occasion": "Everyday, Work",
    "image": "images/camochino_pants.jpg"
  },
  {
    "item": "Chinos",
    "color": "Khaki",
    "season": "Spring, Summer, Fall, Winter",
    "occasion": "Everyday, Work",
    "image": "images/chinos_pants.jpg"
  },
  {
    "item": "Denim skirt",
    "color": "Navy",
    "season": "Spring, Summer, Fall, Winter",
    "occasion": "Everyday, Work",
    "image": "images/denim_skirt.jpg"
  },
  {
    "item": "Jeans",
    "color": "Navy",
    "season": "Spring, Summer, Fall, Winter",
    "occasion": "Work, Everyday, Special Occasion",
    "image": "images/jeans_pants.jpg"
  },
  {
    "item": "Pencil Skirt",
    "color": "Navy",
    "season": "Spring, Summer, Fall, Winter",
    "occasion": "Work, Special Occasion",
    "image": "images/pencilskirt_bottoms.jpg"
  },
  {
    "item": "Shorts",
    "color": "Olive",
    "season": "Spring, Summer, Fall, Winter",
    "occasion": "Everyday",
    "image": "images/oliveshorts_bottoms.jpg"
  },
  {
    "item": "Pencil Skirt",
    "color": "Green",
    "season": "Spring, Summer, Fall, Winter",
    "occasion": "Work, Special Occasion",
    "image": "images/oliveshorts_bottoms.jpg"
  },
  {
    "item": "Silk Pants",
    "color": "Black",
    "season": "Spring, Summer, Fall, Winter",
    "occasion": "Special Occasion",
    "image": "images/silkpants_bottoms.jpg"
  },
  {
    "item": "Tulle Skirt",
    "color": "Pink",
    "season": "Spring, Summer, Fall, Winter",
    "occasion": "Special Occasion",
    "image": "images/tulle_skirt.jpg"
  },
  {
    "item": "Workout Pants",
    "color": "Navy",
    "season": "Spring, Summer, Fall, Winter",
    "occasion": "Workout",
    "image": "images/workout_pants.jpg"
  },
];

var accessoriesData = [
  {
    "item": "Bracelet",
    "color": "Gold",
    "season": "Spring, Summer, Fall, Winter",
    "occasion": "Everyday",
    "image": "images/bracelet_accessories.jpg"
  },
  {
    "item": "Hoops",
    "color": "Gold",
    "season": "Spring, Summer, Fall, Winter",
    "occasion": "Everyday",
    "image": "images/goldhoops_accessories.jpg"
  },
  {
    "item": "Pendant",
    "color": "Gold",
    "season": "Spring, Summer, Fall, Winter",
    "occasion": "Everyday",
    "image": "images/goldpendant_accessories.jpg"
  },
  {
    "item": "Solitaire",
    "color": "Metallic",
    "season": "Spring, Summer, Fall, Winter",
    "occasion": "Everyday, Work, Special Occasion",
    "image": "images/solitaire_accessories.jpg"
  },
  {
    "item": "D’Orsay Flats",
    "color": "Grey",
    "season": "Spring, Summer, Fall, Winter",
    "occasion": "Everyday, Work, Special Occasion",
    "image": "images/flats_accessories.jpg"
  },
  {
    "item": "Les Chemeau",
    "color": "Green",
    "season": "Spring, Fall, Winter",
    "occasion": "Everyday, Work",
    "image": "images/leschemeau_accessories.jpg"
  },
  {
    "item": "Slingbacks",
    "color": "Navy",
    "season": "Spring, Summer, Fall, Winter",
    "occasion": "Special Occasion",
    "image": "images/slingbacks_accessories.jpg"
  },
  {
    "item": "Sneakers",
    "color": "White, Gold",
    "season": "Spring, Summer, Fall, Winter",
    "occasion": "Everyday, Workout",
    "image": "images/sneakers_accessories.jpg"
  },
  {
    "item": "Sunglasses",
    "color": "Gold, Green",
    "season": "Spring, Summer, Fall, Winter",
    "occasion": "Everyday",
    "image": "images/sunglasses_accessories.jpg"
  },
  {
    "item": "Clutch",
    "color": "Gold",
    "season": "Spring, Summer, Fall, Winter",
    "occasion": "Special Occasion",
    "image": "images/goldclutch_accessories.jpeg"
  },
  {
    "item": "Crossbody",
    "color": "White, Navy",
    "season": "Spring, Summer, Fall",
    "occasion": "Everyday",
    "image": "images/seabag_accessories.jpg"
  },
  {
    "item": "Tote",
    "color": "Brown",
    "season": "Spring, Summer, Fall, Winter",
    "occasion": "Everyday, Special Occasion",
    "image": "images/tote_accessories.jpg"
  }
];

closetitems.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.js"></script>
	<script src="closet_data.js"></script>
	<script>

	// closet data added 3 new variables full of closet data
	// topsData, bottomsData, and accessoriesData, each is an array of objects
	// containing the item data.  We can access them by looping the array or
	// referencing using position data `topsData[0]`, etc
	console.log(topsData);
	console.log(topsData[0]);

	// define the HTML for displaying an item as a template (this is what you've hard-coded above)
	// the values are using handlebar syntax: http://handlebarsjs.com/expressions.html
	// note:  the `\` tells js to continue the string on the next line
	var itemHtml = "<div class='col-md-2'> \
		<div class='card' style='width: 14rem;'> \
			<img class='card-img-top img-fluid' src='{{image}}' alt='{{name}}'> \
			<div class='card-body'> \
				<h4 class='card-title'>{{name}}</h4> \
			</div> \
		</div> \
	</div>";

	// compile the html above into a handlebars template
	var itemTemplate = Handlebars.compile(itemHtml);

	// lets add the first top to the bottom of the site's "body"
	$('body').append(itemTemplate(topsData[0]))

</script>