Untitled

##html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>The Pie Shop</title>
<link type="text/css" rel="stylesheet" href="store.css" />
<script type="text/javascript" src="store.js"></script>
</head>
	<body>
		<h1 class= "title">The Pie Shop</h1>
		<img class = "shoppingcart" src = "Images/shoppingcart.png">
		<p class = "tItems">Total Items:</p>
		<p class = "tCost">Total Cost:</p>
			<div class="navbar">
				<div>
					<div class="navbardiv" id= "active">
						<a href= "store.html">
								<p>Products</p>
							</a>
				</div>

				<div class="navbardiv">
				<a href="locAndHour.html">
						<p>Location and Hours</p>
					</a>
				</div>
	'
				<div class="navbardiv">
				<a href="AbUs.html">
						<p>About Us</p>
					</a>
				</div>
				</div>
			</div>
		<h2 class = "activePie">Apple Pie</h2>
		<div class = "mainImage">
		<img src = "Images/applepie.jpg" id= "mainImg"/>
		</div>

			<div class="mainImgText">
				<p id = "mainImgText">Choose a Pie!</p>
			</div>
			<div class = "CartAndPrice">
				<p id = "Price">Cost:</p>
				<button id= "CartButton" onclick = "addToCart()">Add to Cart</button>
			</div>


<!-- 			<img class = "images" id = "apple" src = "Images/applepie.jpg"> -->
<!-- 			<img class = "images" id = "banana" src = "Images/bananapie.jpg"> -->
<!-- 			<img class = "images" id = "lemon" src = "Images/lemonpie.jpg"> -->
<!-- 			<img class = "images" id = "peach" src = "Images/peachpie.jpg"> -->
<!-- 			<img class = "images" id = "pumpkin" src = "Images/pumpkinpie.jpeg"> -->
<!-- 			<img class = "images" id = "rasberry" src = "Images/rasberrypi.jpg"> -->
		<div class = "bottomImages">
			<img onclick="imageFlipper('apple', 0)" id="apple" src="Images/applepie.jpg" />
			<img onclick="imageFlipper('banana', 1)" id="banana" src="Images/bananapie.jpg" />
			<img onclick="imageFlipper('lemon', 2)" id="lemon" src="Images/lemonpie.jpg" />
			<img onclick="imageFlipper('peach', 3)" id="peach" src="Images/peachpie.jpg" />
			<img onclick="imageFlipper('pumpkin', 4)" id="pumpkin" src="Images/pumpkinpie.jpg" />
			<img onclick="imageFlipper('rasberry', 5)" id="rasberry" src="Images/rasberrypi.jpg" />
		</div>
	</body>
</html>


## js

var caps=[
	"Apple Pie, $20",
	"Banana Pie, $20",
	"Lemon Pie, $20",
	"Peach Pie, $20",
	"Pumpkin Pie, $20",
	"Rasberry Pi, $50"
]

function imageFlipper(anId, x){
	var theSRC = document.getElementById(anId).src;
	document.getElementById("mainImg").src = theSRC;
	updateCap(x)
	document.getElementById("Price").innerHTML = "Cost: $" + displayCost[x];
	document.getElementById("Price").value = displayCost[x];
}

function updateCap(x){
	var element = document.getElementById("mainImgText");
	element.innerHTML = caps[x];
}

var displayCost = [
    20,
    20,
    20,
    20,
    20,
    50
]
function addToCart(anId, x){
	var displayCost = document.getElementById("CartButton");
	Math.floor(Math.add("Price"))
}


##css

.navbardiv{
	display: inline-block;
	padding: 10px;
	font-family: monospace;
	font-size: 18px;
	font-weight: bolder;
	font-color: black;
	text-decoration: none;
}

.title{
	text-align: center;
}

.activePie{
	text-align: center;
}
.mainImage{
	text-align: center;
	border-radius: 25%;
}
#mainImg{
	border-radius: 25% 10%;
	width: 400px;
	height: 350px;
	padding-bottom: 10px;
}

.mainImgText{
	border: 1px solid black;
	text-align: center;
	margin-left: 300px;
	margin-right: 300px;
	padding-top: 10px;
	font-size: 25px;
}

.bottomImgTitle{
	display: inline-block;
	width: 900px;
	text-align: center;

}
.bottomImgs{
	display: inline-block;
	text-align: center;
	width: 900px;
	height: 150px;
	margin-left: 215px;
	padding-top: 10px;
}

.images{
	width: 125px;
	height: 125px;
	display: inline-block;
	border-radius: 25% 10%;

}

#apple{
	width: 125px;
	height: 125px;
	display: inline-block;
}
#banana{
	width: 125px;
	height: 125px;
	display: inline-block;
}
#lemon{
	width: 125px;
	height: 125px;
	display: inline-block;
}
#peach{
	width: 125px;
	height: 125px;
	display: inline-block;
}
#pumpkin{
	width: 125px;
	height: 125px;
	display: inline-block;
}
#rasberry{
	width: 125px;
	height: 125px;
	display: inline-block;
}

.shoppingcart{
	float: right;
	width: 50px;
	height: 50px;
	margin-top: -50px;
}

.bottomImages{
	display: inline-block;
	width: 900px;
	text-align: center;
	margin-left: 215px;
	padding-top: 10px;
}

#Price{
	text-align: center;
}

#CartButton{
	button-align: center;
}

.tItems{
	float: right;
}

.tCost{
	float: right;
}