370 lines
12 KiB
JavaScript
370 lines
12 KiB
JavaScript
<<<<<<< HEAD
|
|
// Object called flowers that contains 3 flower objects with their information
|
|
const flowers = {
|
|
"rose": {
|
|
name: "Rose",
|
|
price: 2.5,
|
|
category: "Romance",
|
|
stock: 20,
|
|
description: "The classic red rose for that someone special."
|
|
},
|
|
"tulip": {
|
|
name: "Tulip",
|
|
price: 3.0,
|
|
category: "Springtime",
|
|
stock: 15,
|
|
description: "A perfect spring time flower for a bouquet."
|
|
},
|
|
"sunflower": {
|
|
name: "Sunflower",
|
|
price: 5.0,
|
|
category: "Exclusives",
|
|
stock: 10,
|
|
description: "Large iconic flower perfect for an Autumn garden."
|
|
}
|
|
};
|
|
|
|
let feedback = [
|
|
{flower: "Rose", rating: 5, content: "A beautiful bouqet delivered on time with care!"},
|
|
{flower: "Tulip", rating: 4, content: "Reminds me of Spring any time of year!"},
|
|
{flower: "Sunflower", rating: 5, content: "Sunflower was tall and healthy, so elegant!"}
|
|
];
|
|
|
|
// Function to add flower information (price, stock, description, category) to HTML catalog
|
|
function populateCatalog() {
|
|
Object.values(flowers).forEach(flower => {
|
|
const article = document.getElementById(`${flower.name.toLowerCase()}`)
|
|
if (article) {
|
|
const listItems = article.querySelectorAll("ul li");
|
|
listItems[0].textContent = `Price: $${flower.price.toFixed(2)}`;
|
|
listItems[1].textContent = `Category: ${flower.category}`;
|
|
listItems[2].textContent = `Stock: ${flower.stock}`;
|
|
listItems[3].textContent = `Description: ${flower.description}`;
|
|
}
|
|
});
|
|
}
|
|
|
|
// Function to update items inside cart, used by addToCart() and at initialization
|
|
function updateCartDisplay() {
|
|
const tbody = document.querySelector("#cart-table tbody");
|
|
tbody.innerHTML = "";
|
|
let subtotal = 0;
|
|
cart.forEach((item, idx) => {
|
|
const row = document.createElement("tr");
|
|
row.innerHTML = `
|
|
<td>${flowers[item.name].name}</td>
|
|
<td>$${item.price.toFixed(2)}</td>
|
|
<td>${item.quantity}</td>
|
|
<td>${(item.price * item.quantity).toFixed(2)}</td>
|
|
<td><button data-idx="${idx}" class="remove-button">Remove</button></td>
|
|
`
|
|
tbody.appendChild(row);
|
|
subtotal += item.price * item.quantity;
|
|
});
|
|
|
|
const tax = subtotal * 0.13;
|
|
const total = subtotal + tax;
|
|
|
|
document.getElementById("subtotal").textContent = subtotal.toFixed(2);
|
|
document.getElementById("tax").textContent = tax.toFixed(2);
|
|
document.getElementById("total").textContent = total.toFixed(2);
|
|
|
|
document.querySelectorAll(".remove-button").forEach(btn => {
|
|
btn.addEventListener("click", function() {
|
|
const idx = Number(btn.getAttribute("data-idx"));
|
|
const item = cart[idx];
|
|
flowers[item.name].stock += item.quantity;
|
|
cart.splice(idx,1);
|
|
updateCartDisplay();
|
|
populateCatalog();
|
|
})
|
|
})
|
|
}
|
|
|
|
// Function to handle getting the correct flower name and quantity to add to cart
|
|
function setupCartForms() {
|
|
document.querySelectorAll(".add-to-cart").forEach(form => {
|
|
form.addEventListener("submit", function(e) {
|
|
e.preventDefault();
|
|
const article = form.closest("article");
|
|
const flowerName = article.querySelector("h3").textContent;
|
|
const quantity = form.querySelector("input[name='quantity']").value;
|
|
addToCart(flowerName, quantity);
|
|
form.reset();
|
|
});
|
|
});
|
|
}
|
|
|
|
// Start with empty cart
|
|
let cart = [];
|
|
|
|
// Funcion to add items to cart
|
|
function addToCart(flowerName, quantity) {
|
|
quantity = Number(quantity);
|
|
|
|
const key = flowerName.toLowerCase();
|
|
const flower = flowers[key];
|
|
|
|
if (!flower || quantity < 1 || quantity > flower.stock) {
|
|
alert("Too many or too few flowers added to cart, rejecting.");
|
|
return;
|
|
}
|
|
|
|
const existing = cart.find(item => item.name === flowerName);
|
|
if (existing) {
|
|
if (quantity > flower.stock) {
|
|
alert("Added quantity goes over stock limit, rejecting.");
|
|
return
|
|
}
|
|
existing.quantity += quantity;
|
|
} else {
|
|
cart.push({
|
|
name: key,
|
|
price: flower.price,
|
|
quantity: quantity
|
|
});
|
|
}
|
|
flower.stock -= quantity;
|
|
updateCartDisplay();
|
|
populateCatalog();
|
|
}
|
|
|
|
// Function to create feedback HTML elements from list
|
|
function renderFeedback() {
|
|
const feedbackList = document.getElementById("feedback-list");
|
|
feedbackList.innerHTML = "";
|
|
if (feedback.length === 0) {
|
|
feedbackList.innerHTML = "<p>No feedback yet. Be our first review?</p>";
|
|
return;
|
|
}
|
|
feedback.forEach(fb => {
|
|
const div = document.createElement("div");
|
|
div.className = "testimonial";
|
|
div.innerHTML = `
|
|
<strong>${fb.flower}</strong>
|
|
<span>(${fb.rating}★)</span>
|
|
<p>${fb.content}</p>
|
|
<hr>
|
|
`
|
|
feedbackList.appendChild(div);
|
|
})
|
|
}
|
|
|
|
// Event listener for checkout button to show checkout message and reset cart
|
|
document.getElementById("checkout-button").addEventListener("click", function() {
|
|
if (cart.length === 0) {
|
|
document.getElementById("checkout-message").textContent = "Your cart is empty!";
|
|
return;
|
|
}
|
|
const confirmed = confirm("Are you sure you want to finalize cart and check out?");
|
|
if (confirmed) {
|
|
document.getElementById("checkout-message").textContent = "Thank you for your order!";
|
|
cart = [];
|
|
updateCartDisplay();
|
|
populateCatalog();
|
|
}
|
|
});
|
|
|
|
document.getElementById("feedback-form").addEventListener("submit", function(e) {
|
|
e.preventDefault();
|
|
const form = e.target;
|
|
const flower = form.flower.value;
|
|
const rating = Number(form.rating.value);
|
|
const content = form.content.value.trim()
|
|
|
|
if (!flower || !rating || !content) return;
|
|
|
|
feedback.unshift({ flower, rating, content });
|
|
renderFeedback();
|
|
form.reset();
|
|
})
|
|
|
|
populateCatalog();
|
|
setupCartForms();
|
|
updateCartDisplay();
|
|
=======
|
|
// Object called flowers that contains 3 flower objects with their information
|
|
const flowers = {
|
|
"rose": {
|
|
name: "Rose",
|
|
price: 2.5,
|
|
category: "Romance",
|
|
stock: 20,
|
|
description: "The classic red rose for that someone special."
|
|
},
|
|
"tulip": {
|
|
name: "Tulip",
|
|
price: 3.0,
|
|
category: "Springtime",
|
|
stock: 15,
|
|
description: "A perfect spring time flower for a bouquet."
|
|
},
|
|
"sunflower": {
|
|
name: "Sunflower",
|
|
price: 5.0,
|
|
category: "Exclusives",
|
|
stock: 10,
|
|
description: "Large iconic flower perfect for an Autumn garden."
|
|
}
|
|
};
|
|
|
|
let feedback = [
|
|
{flower: "Rose", rating: 5, content: "A beautiful bouqet delivered on time with care!"},
|
|
{flower: "Tulip", rating: 4, content: "Reminds me of Spring any time of year!"},
|
|
{flower: "Sunflower", rating: 5, content: "Sunflower was tall and healthy, so elegant!"}
|
|
];
|
|
|
|
// Function to add flower information (price, stock, description, category) to HTML catalog
|
|
function populateCatalog() {
|
|
Object.values(flowers).forEach(flower => {
|
|
const article = document.getElementById(`${flower.name.toLowerCase()}`)
|
|
if (article) {
|
|
const listItems = article.querySelectorAll("ul li");
|
|
listItems[0].textContent = `Price: $${flower.price.toFixed(2)}`;
|
|
listItems[1].textContent = `Category: ${flower.category}`;
|
|
listItems[2].textContent = `Stock: ${flower.stock}`;
|
|
listItems[3].textContent = `Description: ${flower.description}`;
|
|
}
|
|
});
|
|
}
|
|
|
|
// Function to update items inside cart, used by addToCart() and at initialization
|
|
function updateCartDisplay() {
|
|
const tbody = document.querySelector("#cart-table tbody");
|
|
tbody.innerHTML = "";
|
|
let subtotal = 0;
|
|
cart.forEach((item, idx) => {
|
|
const row = document.createElement("tr");
|
|
row.innerHTML = `
|
|
<td>${flowers[item.name].name}</td>
|
|
<td>$${item.price.toFixed(2)}</td>
|
|
<td>${item.quantity}</td>
|
|
<td>${(item.price * item.quantity).toFixed(2)}</td>
|
|
<td><button data-idx="${idx}" class="remove-button">Remove</button></td>
|
|
`
|
|
tbody.appendChild(row);
|
|
subtotal += item.price * item.quantity;
|
|
});
|
|
|
|
const tax = subtotal * 0.13;
|
|
const total = subtotal + tax;
|
|
|
|
document.getElementById("subtotal").textContent = subtotal.toFixed(2);
|
|
document.getElementById("tax").textContent = tax.toFixed(2);
|
|
document.getElementById("total").textContent = total.toFixed(2);
|
|
|
|
document.querySelectorAll(".remove-button").forEach(btn => {
|
|
btn.addEventListener("click", function() {
|
|
const idx = Number(btn.getAttribute("data-idx"));
|
|
const item = cart[idx];
|
|
flowers[item.name].stock += item.quantity;
|
|
cart.splice(idx,1);
|
|
updateCartDisplay();
|
|
populateCatalog();
|
|
})
|
|
})
|
|
}
|
|
|
|
// Function to handle getting the correct flower name and quantity to add to cart
|
|
function setupCartForms() {
|
|
document.querySelectorAll(".add-to-cart").forEach(form => {
|
|
form.addEventListener("submit", function(e) {
|
|
e.preventDefault();
|
|
const article = form.closest("article");
|
|
const flowerName = article.querySelector("h3").textContent;
|
|
const quantity = form.querySelector("input[name='quantity']").value;
|
|
addToCart(flowerName, quantity);
|
|
form.reset();
|
|
});
|
|
});
|
|
}
|
|
|
|
// Start with empty cart
|
|
let cart = [];
|
|
|
|
// Funcion to add items to cart
|
|
function addToCart(flowerName, quantity) {
|
|
quantity = Number(quantity);
|
|
|
|
const key = flowerName.toLowerCase();
|
|
const flower = flowers[key];
|
|
|
|
if (!flower || quantity < 1 || quantity > flower.stock) {
|
|
alert("Too many or too few flowers added to cart, rejecting.");
|
|
return;
|
|
}
|
|
|
|
const existing = cart.find(item => item.name === flowerName);
|
|
if (existing) {
|
|
if (quantity > flower.stock) {
|
|
alert("Added quantity goes over stock limit, rejecting.");
|
|
return
|
|
}
|
|
existing.quantity += quantity;
|
|
} else {
|
|
cart.push({
|
|
name: key,
|
|
price: flower.price,
|
|
quantity: quantity
|
|
});
|
|
}
|
|
flower.stock -= quantity;
|
|
updateCartDisplay();
|
|
populateCatalog();
|
|
}
|
|
|
|
// Function to create feedback HTML elements from list
|
|
function renderFeedback() {
|
|
const feedbackList = document.getElementById("feedback-list");
|
|
feedbackList.innerHTML = "";
|
|
if (feedback.length === 0) {
|
|
feedbackList.innerHTML = "<p>No feedback yet. Be our first review?</p>";
|
|
return;
|
|
}
|
|
feedback.forEach(fb => {
|
|
const div = document.createElement("div");
|
|
div.className = "testimonial";
|
|
div.innerHTML = `
|
|
<strong>${fb.flower}</strong>
|
|
<span>(${fb.rating}★)</span>
|
|
<p>${fb.content}</p>
|
|
<hr>
|
|
`
|
|
feedbackList.appendChild(div);
|
|
})
|
|
}
|
|
|
|
// Event listener for checkout button to show checkout message and reset cart
|
|
document.getElementById("checkout-button").addEventListener("click", function() {
|
|
if (cart.length === 0) {
|
|
document.getElementById("checkout-message").textContent = "Your cart is empty!";
|
|
return;
|
|
}
|
|
const confirmed = confirm("Are you sure you want to finalize cart and check out?");
|
|
if (confirmed) {
|
|
document.getElementById("checkout-message").textContent = "Thank you for your order!";
|
|
cart = [];
|
|
updateCartDisplay();
|
|
populateCatalog();
|
|
}
|
|
});
|
|
|
|
document.getElementById("feedback-form").addEventListener("submit", function(e) {
|
|
e.preventDefault();
|
|
const form = e.target;
|
|
const flower = form.flower.value;
|
|
const rating = Number(form.rating.value);
|
|
const content = form.content.value.trim()
|
|
|
|
if (!flower || !rating || !content) return;
|
|
|
|
feedback.unshift({ flower, rating, content });
|
|
renderFeedback();
|
|
form.reset();
|
|
})
|
|
|
|
populateCatalog();
|
|
setupCartForms();
|
|
updateCartDisplay();
|
|
>>>>>>> a2ad5843006c62096be10203d3f91faa39f365fb
|
|
renderFeedback(); |