stungeye/index.css

## index.css
body {
  border: 1px solid grey;
  font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
  margin: 2rem auto;
  padding-bottom: 2rem;
  text-align: center;
  width: 500px;
}

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modules with Parcel</title>
    <link rel="stylesheet" href="index.css">
  </head>
  <body>
    <h1>Items in Bag of Holding</h1>

    <!-- Javascript will target this canvas element and display a chart. -->
    <canvas id="chart"></canvas>

    <!-- Load the Javascript at the end of the body tag so that DOM is ready when script runs. -->
    <script src="./index.js"></script>
  </body>
</html>

## index.js
// Import from the chart.js npm module.
import { Chart } from "chart.js";

// Get the context of the canvas element in our HTML file.
let ctx = document.querySelector("canvas").getContext("2d");

// Create a pie chart showing the contents of our bag of holding.
new Chart(ctx, {
  type: "pie",
  data: {
    labels: ["🏺 Amphora", "📜 Scrolls", "🗡️ Daggers"],
    datasets: [ { data: [12, 19, 3], backgroundColor: ["#ff6384", "#36a2eb", "#ffce56"] } ]
  }
});
	body {
	border: 1px solid grey;
	font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
	margin: 2rem auto;
	padding-bottom: 2rem;
	text-align: center;
	width: 500px;
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Modules with Parcel</title>
	<link rel="stylesheet" href="index.css">
	</head>
	<body>
	<h1>Items in Bag of Holding</h1>

	<!-- Javascript will target this canvas element and display a chart. -->
	<canvas id="chart"></canvas>

	<!-- Load the Javascript at the end of the body tag so that DOM is ready when script runs. -->
	<script src="./index.js"></script>
	</body>
	</html>
	// Import from the chart.js npm module.
	import { Chart } from "chart.js";

	// Get the context of the canvas element in our HTML file.
	let ctx = document.querySelector("canvas").getContext("2d");

	// Create a pie chart showing the contents of our bag of holding.
	new Chart(ctx, {
	type: "pie",
	data: {
	labels: ["🏺 Amphora", "📜 Scrolls", "🗡️ Daggers"],
	datasets: [ { data: [12, 19, 3], backgroundColor: ["#ff6384", "#36a2eb", "#ffce56"] } ]
	}
	});