sorting left to do
This commit is contained in:
ruchi
parent
66526df3ea
commit
b34e4f2824
7 changed files with 172 additions and 8 deletions
1
.vscode/settings.json
vendored
Normal file
1
.vscode/settings.json
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
123,125
|
||||
BIN
images/logo.png
Normal file
BIN
images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 446 KiB |
22
index.html
22
index.html
|
|
@ -7,6 +7,14 @@
|
|||
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<h1> Sam's Mart </h1>
|
||||
<a href="https://samsmartinc.com/">
|
||||
<img src="images/logo.png" alt="Facebook" class = "logo">
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Tab links, each one with an onclick event associated with it -->
|
||||
<div class="tab">
|
||||
<button class="tablinks" onclick="openInfo(event, 'Client')">Client</button>
|
||||
|
|
@ -21,9 +29,14 @@
|
|||
Choose a Category:
|
||||
<select id="dietSelect" name="dietSelect" onchange="populateListProductChoices(this.id, 'displayProduct')">
|
||||
<option value=""></option>
|
||||
|
||||
<option value="Vegetarian">Vegetarian</option>
|
||||
<option value="GlutenFree">GlutenFree</option>
|
||||
<option value="None">None</option>
|
||||
<option value="GlutenFree">Gluten Free</option>
|
||||
<option value="VegetarianANDGluten-Free">Vegetarian and Gluten-Free</option>
|
||||
<option value="Organic">Organic</option>
|
||||
<option value="Non-organic">Non-Organic</option>
|
||||
<option value="None">None</option>
|
||||
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
|
@ -43,7 +56,12 @@
|
|||
<div id="displayCart"></div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p class="copyright">Website created by Ruchira, Sam, Batuhan, and Kene</p>
|
||||
</div>
|
||||
|
||||
<script src="scripts/groceries.js"></script>
|
||||
|
||||
<script src="scripts/main.js"></script>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -4,22 +4,74 @@
|
|||
|
||||
var products = [
|
||||
{
|
||||
name: "brocoli",
|
||||
name: "broccoli",
|
||||
vegetarian: true,
|
||||
glutenFree: true,
|
||||
organic: true,
|
||||
price: 1.99
|
||||
},
|
||||
{
|
||||
name: "bread",
|
||||
vegetarian: true,
|
||||
glutenFree: false,
|
||||
organic: false,
|
||||
price: 2.35
|
||||
},
|
||||
{
|
||||
name: "salmon",
|
||||
vegetarian: false,
|
||||
glutenFree: true,
|
||||
organic: false,
|
||||
price: 10.00
|
||||
},
|
||||
{
|
||||
name: "carrot",
|
||||
vegetarian: true,
|
||||
glutenFree: true,
|
||||
organic: true,
|
||||
price: 2.63
|
||||
},
|
||||
{
|
||||
name: "chicken",
|
||||
vegetarian: false,
|
||||
glutenFree: true,
|
||||
organic: false,
|
||||
price: 6.87
|
||||
},
|
||||
{
|
||||
name: "cereal",
|
||||
vegetarian: false,
|
||||
glutenFree: false,
|
||||
organic: false,
|
||||
price: 2.97
|
||||
},
|
||||
{
|
||||
name: "cheese",
|
||||
vegetarian: false,
|
||||
glutenFree: false,
|
||||
organic: false,
|
||||
price: 5.14
|
||||
},
|
||||
{
|
||||
name: "white fish",
|
||||
vegetarian: false,
|
||||
glutenFree: true,
|
||||
organic: false,
|
||||
price: 13.50
|
||||
},
|
||||
{
|
||||
name: "honey",
|
||||
vegetarian: false,
|
||||
glutenFree: false,
|
||||
organic: true,
|
||||
price: 1.89
|
||||
},
|
||||
{
|
||||
name: "onion",
|
||||
vegetarian: true,
|
||||
glutenFree: true,
|
||||
organic: true,
|
||||
price: 2.22
|
||||
}
|
||||
];
|
||||
|
||||
|
|
@ -37,6 +89,15 @@ function restrictListProducts(prods, restriction) {
|
|||
else if ((restriction == "GlutenFree") && (prods[i].glutenFree == true)){
|
||||
product_names.push(prods[i].name);
|
||||
}
|
||||
else if ((restriction == "VegetarianANDGluten-Free") && (prods[i].glutenFree == true) && (prods[i].vegetarian == true)){
|
||||
product_names.push(prods[i].name);
|
||||
}
|
||||
else if ((restriction == "Organic") && (prods[i].organic == true)){
|
||||
product_names.push(prods[i].name);
|
||||
}
|
||||
else if ((restriction == "Non-Organic") && (prods[i].organic == false)){
|
||||
product_names.push(prods[i].name);
|
||||
}
|
||||
else if (restriction == "None"){
|
||||
product_names.push(prods[i].name);
|
||||
}
|
||||
|
|
@ -54,3 +115,12 @@ function getTotalPrice(chosenProducts) {
|
|||
}
|
||||
return totalPrice;
|
||||
}
|
||||
|
||||
function getItemPrice(chosenProduct){
|
||||
for (let i=0; i<products.length; i+=1) {
|
||||
if (chosenProduct.indexOf(products[i].name) > -1){
|
||||
return products[i].price;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ function populateListProductChoices(slct1, slct2) {
|
|||
s2.innerHTML = "";
|
||||
|
||||
// obtain a reduced list of products based on restrictions
|
||||
var optionArray = restrictListProducts(products, s1.value);
|
||||
var optionArray = restrictListProducts(products, s1.value);
|
||||
|
||||
// for each item in the array, create a checkbox element, each containing information such as:
|
||||
// <input type="checkbox" name="product" value="Bread">
|
||||
|
|
@ -55,6 +55,11 @@ function populateListProductChoices(slct1, slct2) {
|
|||
var label = document.createElement('label')
|
||||
label.htmlFor = productName;
|
||||
label.appendChild(document.createTextNode(productName));
|
||||
|
||||
//get price of an item
|
||||
var itemPrice = getItemPrice(productName);
|
||||
label.appendChild(document.createTextNode(" $" + itemPrice));
|
||||
|
||||
s2.appendChild(label);
|
||||
|
||||
// create a breakline node and add in HTML DOM
|
||||
|
|
@ -80,7 +85,7 @@ function selectedItems(){
|
|||
para.appendChild(document.createElement("br"));
|
||||
for (i = 0; i < ele.length; i++) {
|
||||
if (ele[i].checked) {
|
||||
para.appendChild(document.createTextNode(ele[i].value));
|
||||
para.appendChild(document.createTextNode(ele[i].value + " $" + getItemPrice(ele[i].value)));
|
||||
para.appendChild(document.createElement("br"));
|
||||
chosenProducts.push(ele[i].value);
|
||||
}
|
||||
|
|
@ -88,7 +93,7 @@ function selectedItems(){
|
|||
|
||||
// add paragraph and total price
|
||||
c.appendChild(para);
|
||||
c.appendChild(document.createTextNode("Total Price is " + getTotalPrice(chosenProducts)));
|
||||
c.appendChild(document.createTextNode("Total Price is $" + getTotalPrice(chosenProducts)));
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -34,4 +34,45 @@
|
|||
padding: 6px 12px;
|
||||
border: 1px solid #ccc;
|
||||
border-top: none;
|
||||
background-color: rgb(222, 224, 228);
|
||||
|
||||
}
|
||||
|
||||
/* title/header */
|
||||
h1{
|
||||
font-family: "Britannic Bold ", sans-serif;
|
||||
font-weight: bolder;
|
||||
font-size: 40px;
|
||||
color: #f7fcfc;
|
||||
vertical-align: middle;
|
||||
display: inline;
|
||||
margin-right: 15px;
|
||||
|
||||
}
|
||||
/*footer with signatures */
|
||||
.footer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: rgb(87, 139, 216);
|
||||
color: rgb(255, 255, 255);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo{
|
||||
width: 10%;
|
||||
height:auto;
|
||||
vertical-align: middle;
|
||||
margin-bottom: 10px;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #66BFBF;
|
||||
background-image: url("images/bg3.jpg");
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
29
todo.txt
Normal file
29
todo.txt
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
Your website should contain:
|
||||
• The name of the grocery store (this is not present in the code provided) ####### DONE
|
||||
• At least 10 possible products in the product list. ####### DONE
|
||||
• Navigation between two or three zones depending on your information pooling. ####### DONE
|
||||
• A personal data entry area ####### DONE
|
||||
o Each user may be vegetarian and/or allergic to gluten. (The code provided does not
|
||||
considers the OR... change it). ####### DONE
|
||||
o Each user can indicate a preference for organic or non-organic products. ####### DONE
|
||||
(This is not considered in the code provided, it needs to be added in the ####### DONE
|
||||
Options section, and add it as a variable in the list of products). ####### DONE
|
||||
• An area for the choice of items ####### DONE
|
||||
o Items should be priced. (to add to the code provided) ####### DONE
|
||||
o Items should be in sorted by price. (to add to the code provided)
|
||||
• An area to view the cart. ####### DONE
|
||||
o The contents of the cart and its total. ####### DONE
|
||||
• Your signature (Website designed by ...) at the bottom of the page. ####### DONE
|
||||
• The use of external CSS (separate file) to set styles for titles, divisions, your signature at the
|
||||
bottom of the site. Explore font changes, colors, alignment, etc., to make the site a little
|
||||
prettier. For this lab, your rating will be on the feature, so don't waste too much time here if
|
||||
you're just starting out.
|
||||
• Using JavaScript (separate files) to contain the script associated with the site.
|
||||
|
||||
|
||||
Additional possibilities (Optional)
|
||||
• Add user characteristics (e.g., diabetic, lactose intolerant)
|
||||
• Use photos to show which items to choose from
|
||||
• Change the size of the characters for Lucie.
|
||||
• Allow the addition of quantities.
|
||||
• Add any other HTML/CSS elements to improve site rendering.
|
||||
Loading…
Reference in a new issue