index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Cannon Ball Simulator</title>
		<link rel="stylesheet" type="text/css" href="style.css">
		<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
		
	</head>
	<body>
		<!-- <h1>Meme Cannon Simulator</h1> -->
		<div id="canvas">
			<svg id="cannon">
				<circle cx="50" cy="50" r="20" fill="black" />
			</svg>
			<input type="text" name="velocity" id="velocityInput" placeholder="Velocity is m/s">
			<input type="text" name="angle" id="angleInput" placeholder="Angle in Degrees">
			<input type="text" name="angle" id="ballRadius" placeholder="Cannonball Size">
			<button id="start-btn" class="myButton">Start Simulation</button>
			<button id="reset-btn" class="myButton">Reset</button>
			<script type="text/javascript" src="main.js"></script>
		</div>
		
		
	</body>
</html>