Device Sync
This commit is contained in:
@@ -1,184 +1,184 @@
|
||||
// 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();
|
||||
renderFeedback();
|
||||
Reference in New Issue
Block a user