2021-02-11 01:27:58 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<!--This style sheet is taken from https://www.w3schools.com/howto/howto_js_tabs.asp -->
|
|
|
|
|
<link href="styles/style.css" rel="stylesheet" type="text/css" />
|
2021-02-18 03:33:47 +00:00
|
|
|
<!-- Load an icon library -->
|
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
2021-02-11 01:27:58 +00:00
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
2021-02-18 03:33:47 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="navbar">
|
|
|
|
|
|
2021-02-11 01:27:58 +00:00
|
|
|
<div class="company-name">
|
2021-02-18 03:33:47 +00:00
|
|
|
<h1 >Sam's Mart</h1>
|
|
|
|
|
</div>
|
|
|
|
|
<a onclick="openInfo(event, 'Cart')" class ="icon"><i class="fa fa-shopping-cart"></i> Cart</a>
|
|
|
|
|
<a onclick="openInfo(event, 'Products')" class ="icon"><i class="fa fa-list-ul icon"></i> Product</a>
|
|
|
|
|
<a onclick="openInfo(event, 'Client')" class ="icon"><i class="fa fa-fw fa-user icon"></i> Client</a>
|
2021-02-11 01:27:58 +00:00
|
|
|
</div>
|
|
|
|
|
|
2021-02-18 03:33:47 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2021-02-11 01:27:58 +00:00
|
|
|
<!-- Tab links, each one with an onclick event associated with it -->
|
|
|
|
|
<div class="tab">
|
2021-02-18 03:33:47 +00:00
|
|
|
<button class="tablinks" id="client" onclick="openInfo(event, 'Client')">
|
2021-02-11 01:27:58 +00:00
|
|
|
Client
|
|
|
|
|
</button>
|
2021-02-18 03:33:47 +00:00
|
|
|
<button class="tablinks" id="products" onclick="openInfo(event, 'Products')">
|
2021-02-11 01:27:58 +00:00
|
|
|
Products
|
|
|
|
|
</button>
|
2021-02-18 03:33:47 +00:00
|
|
|
<button class="tablinks" id="cart" onclick="openInfo(event, 'Cart')">Cart</button>
|
2021-02-11 01:27:58 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Tab content -->
|
|
|
|
|
<div id="Client" class="tabcontent">
|
|
|
|
|
<h3>Client Information</h3>
|
2021-02-14 16:05:49 +00:00
|
|
|
<p>Hello, welcome to our grocery store. <br>
|
2021-02-17 03:34:08 +00:00
|
|
|
We are here to help you choose the perfect groceries.</p>
|
2021-02-14 16:05:49 +00:00
|
|
|
<i><strong>Please Choose a Category:</strong></i>
|
2021-02-17 03:34:08 +00:00
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
<label for="category-foods1"> Vegetarian</label>
|
|
|
|
|
<input type="checkbox" id ="Vegetarian" value="Vegetarian" onchange="populateListProductChoices(this.id, 'displayProduct')">
|
|
|
|
|
<br>
|
|
|
|
|
<label for="category-foods1"> Gluten-Free</label>
|
|
|
|
|
<input type="checkbox" id="GlutenFree" value="GlutenFree" onchange="populateListProductChoices(this.id, 'displayProduct')">
|
|
|
|
|
<br>
|
|
|
|
|
<label for="category-foods1"> Organic</label>
|
|
|
|
|
<input type="checkbox" id="Organic" value="Organic" onchange="populateListProductChoices(this.id, 'displayProduct')">
|
|
|
|
|
<br>
|
|
|
|
|
<label for="category-foods1"> Non-Organic</label>
|
|
|
|
|
<input type="checkbox" id="Non-Organic" value="Non-Organic" onchange="populateListProductChoices(this.id, 'displayProduct')">
|
|
|
|
|
<br>
|
|
|
|
|
<label for="category-foods1"> None</label>
|
|
|
|
|
<input type="checkbox" id="None" value="None" onchange="populateListProductChoices(this.id, 'displayProduct')">
|
2021-02-11 01:27:58 +00:00
|
|
|
<br>
|
2021-02-17 03:34:08 +00:00
|
|
|
|
2021-02-14 16:05:49 +00:00
|
|
|
<i><strong>Please Choose a Characteristic:</strong></i>
|
2021-02-11 01:27:58 +00:00
|
|
|
<select class="sumo" name="characterSelect">
|
|
|
|
|
<option value=""></option>
|
|
|
|
|
<option value="Diabetic">Diabetic</option>
|
|
|
|
|
<option value="LactoseIntolerant">Lactose intolerant</option>
|
|
|
|
|
</select>
|
|
|
|
|
|
|
|
|
|
<div class="footer">
|
2021-02-17 20:18:57 +00:00
|
|
|
<p class="copyright">
|
|
|
|
|
Website created by Ruchira, Sam, Batuhan, and Kene
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
2021-02-11 01:27:58 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="Products" class="tabcontent">
|
2021-02-14 16:05:49 +00:00
|
|
|
<h3>Your Products</h3>
|
2021-02-17 20:18:57 +00:00
|
|
|
<p>
|
|
|
|
|
The products according to the categories and characteristics you have
|
|
|
|
|
chosen will appear here.
|
|
|
|
|
</p>
|
|
|
|
|
<i style="font-size: 20px;">
|
|
|
|
|
<strong>Please Choose the Items you are going to buy:</strong>
|
|
|
|
|
</i>
|
|
|
|
|
<br />
|
|
|
|
|
<i><strong>Please Choose a filter:</strong></i>
|
|
|
|
|
<select
|
|
|
|
|
id="filterProduct"
|
|
|
|
|
name="filterProduct"
|
|
|
|
|
class="filter-section"
|
|
|
|
|
onchange="filterProducts(this.id, 'displayProduct')"
|
|
|
|
|
>
|
|
|
|
|
<option value=""></option>
|
|
|
|
|
<option value="Fruits">Fruits</option>
|
|
|
|
|
<option value="Vegetables">Vegetables</option>
|
|
|
|
|
<option value="Pantry">Pantry</option>
|
|
|
|
|
<option value="Dairy">Dairy</option>
|
|
|
|
|
<option value="Bakery">Bakery</option>
|
|
|
|
|
<option value="Meat&Seafood">Meat&Seafood</option>
|
|
|
|
|
</select>
|
2021-02-11 01:27:58 +00:00
|
|
|
<div id="displayProduct"></div>
|
|
|
|
|
<button
|
|
|
|
|
id="addCart"
|
|
|
|
|
type="button"
|
|
|
|
|
class="block"
|
|
|
|
|
onclick="selectedItems()"
|
|
|
|
|
>
|
2021-02-15 00:08:01 +00:00
|
|
|
Click Here to Add Selected Items
|
2021-02-11 01:27:58 +00:00
|
|
|
</button>
|
2021-02-17 20:18:57 +00:00
|
|
|
<div class="footer">
|
|
|
|
|
<p class="copyright">
|
|
|
|
|
Website created by Ruchira, Sam, Batuhan, and Kene
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
2021-02-11 01:27:58 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="Cart" class="tabcontent">
|
2021-02-14 16:05:49 +00:00
|
|
|
<h3>Shopping Cart</h3>
|
|
|
|
|
<p>The items you have added to your list will appear here.</p>
|
2021-02-17 03:34:08 +00:00
|
|
|
<div id="displayCart">
|
|
|
|
|
|
|
|
|
|
</div>
|
2021-02-11 01:27:58 +00:00
|
|
|
|
|
|
|
|
<div class="footer">
|
2021-02-17 20:18:57 +00:00
|
|
|
<p class="copyright">
|
|
|
|
|
Website created by Ruchira, Sam, Batuhan, and Kene
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
2021-02-11 01:27:58 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script src="scripts/groceries.js"></script>
|
|
|
|
|
|
|
|
|
|
<script src="scripts/main.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
