batuhan-basoglu/Sam-s-Mart-Website
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

sorting left to do

Browse source
This commit is contained in:
ruchi 2021-02-04 19:41:09 -05:00
parent 66526df3ea
commit b34e4f2824
7 changed files with 172 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.vscode/settings.json vendored Normal file
View file

@ -0,0 +1 @@
123,125

BIN
images/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 446 KiB

22
index.html
View file

@ -7,6 +7,14 @@
<body> <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 --> <!-- Tab links, each one with an onclick event associated with it -->
<div class="tab"> <div class="tab">
<button class="tablinks" onclick="openInfo(event, 'Client')">Client</button> <button class="tablinks" onclick="openInfo(event, 'Client')">Client</button>
@ -21,9 +29,14 @@
Choose a Category: Choose a Category:
<select id="dietSelect" name="dietSelect" onchange="populateListProductChoices(this.id, 'displayProduct')"> <select id="dietSelect" name="dietSelect" onchange="populateListProductChoices(this.id, 'displayProduct')">
<option value=""></option> <option value=""></option>
<option value="Vegetarian">Vegetarian</option> <option value="Vegetarian">Vegetarian</option>
<option value="GlutenFree">GlutenFree</option> <option value="GlutenFree">Gluten Free</option>
<option value="None">None</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> </select>
</div> </div>
@ -43,7 +56,12 @@
<div id="displayCart"></div> <div id="displayCart"></div>
</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/groceries.js"></script>
<script src="scripts/main.js"></script> <script src="scripts/main.js"></script>
</body> </body>

72
scripts/groceries.js
View file

@ -4,22 +4,74 @@
var products = [ var products = [
{ {
name: "brocoli", name: "broccoli",
vegetarian: true, vegetarian: true,
glutenFree: true, glutenFree: true,
organic: true,
price: 1.99 price: 1.99
}, },
{ {
name: "bread", name: "bread",
vegetarian: true, vegetarian: true,
glutenFree: false, glutenFree: false,
organic: false,
price: 2.35 price: 2.35
}, },
{ {
name: "salmon", name: "salmon",
vegetarian: false, vegetarian: false,
glutenFree: true, glutenFree: true,
organic: false,
price: 10.00 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)){ else if ((restriction == "GlutenFree") && (prods[i].glutenFree == true)){
product_names.push(prods[i].name); 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"){ else if (restriction == "None"){
product_names.push(prods[i].name); product_names.push(prods[i].name);
} }
@ -54,3 +115,12 @@ function getTotalPrice(chosenProducts) {
} }
return totalPrice; 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;
}
}
}

11
scripts/main.js
View file

@ -35,7 +35,7 @@ function populateListProductChoices(slct1, slct2) {
s2.innerHTML = ""; s2.innerHTML = "";
// obtain a reduced list of products based on restrictions // 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: // for each item in the array, create a checkbox element, each containing information such as:
// <input type="checkbox" name="product" value="Bread"> // <input type="checkbox" name="product" value="Bread">
@ -55,6 +55,11 @@ function populateListProductChoices(slct1, slct2) {
var label = document.createElement('label') var label = document.createElement('label')
label.htmlFor = productName; label.htmlFor = productName;
label.appendChild(document.createTextNode(productName)); label.appendChild(document.createTextNode(productName));
//get price of an item
var itemPrice = getItemPrice(productName);
label.appendChild(document.createTextNode(" $" + itemPrice));
s2.appendChild(label); s2.appendChild(label);
// create a breakline node and add in HTML DOM // create a breakline node and add in HTML DOM
@ -80,7 +85,7 @@ function selectedItems(){
para.appendChild(document.createElement("br")); para.appendChild(document.createElement("br"));
for (i = 0; i < ele.length; i++) { for (i = 0; i < ele.length; i++) {
if (ele[i].checked) { 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")); para.appendChild(document.createElement("br"));
chosenProducts.push(ele[i].value); chosenProducts.push(ele[i].value);
} }
@ -88,7 +93,7 @@ function selectedItems(){
// add paragraph and total price // add paragraph and total price
c.appendChild(para); c.appendChild(para);
c.appendChild(document.createTextNode("Total Price is " + getTotalPrice(chosenProducts))); c.appendChild(document.createTextNode("Total Price is $" + getTotalPrice(chosenProducts)));
} }

41
styles/style.css
View file

@ -34,4 +34,45 @@
padding: 6px 12px; padding: 6px 12px;
border: 1px solid #ccc; border: 1px solid #ccc;
border-top: none; 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
View 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.