Können Sie diese Fehler auf einer JavaScript -E -Commerce -Website [geschlossen] lösen?

Anonymous · Post by **Anonymous** » 05 Apr 2025, 12:27

Es gibt 10 Fehler in diesem Code, jeweils wird in Form des Formulars gekennzeichnet: Todo: Bug N - xyz
Hier ist der Code < /p>
Readme < /p>
ShopNow - farbenfrohe E -Commerce -Website < /h1>
Breectnow und Responsive E -Commerce -Produkt -Aufbau -Produkt -Page mit Htm. JavaScript. Dieses Projekt zeigt ein modernes, farbenfrohes Design mit Produktfilterung, Einkaufswagenfunktionalität und einem simulierten Checkout -Fluss. /> [*] Produktliste: Display -Produkte in einem reaktionsschnellen Rasterlayout mit Schwebeffekten
[*] Filtersystem: Filterprodukte nach Kategorie, Preisspanne und Bewertungen
[*] Einkaufswagen:

Flexbox und Gitter für Layouts < /li>
CSS -Variablen für Themen < /li>
-Matik und Übergangsanimationen < /li>
< /> < /> Abschluss und Farbe und Farbe und Farbgeschwindigkeiten < />; responsiveness

[*]JavaScript (Vanilla):[/b]

DOM manipulation
Event handling
Local storage for cart persistence

Filter functionality
< /ul>
< /li>
< /ul>
Projektstruktur < /H2>

Code: Select all

e-commerce/
├── index.html                # Main HTML file
├── css/
│   ├── reset.css             # CSS reset and base styles
│   ├── styles.css            # Main styles with color scheme
│   ├── product.css           # Product-specific styles
│   ├── cart.css              # Shopping cart styles
│   └── responsive.css        # Responsive design rules
├── js/
│   ├── products.js           # Product data
│   ├── app.js                # Main application logic
│   └── cart.js               # Shopping cart functionality
├── img/                      # Product images and assets
│   ├── hero.jpg
│   ├── product1.jpg - product12.jpg
│   ├── category-electronics.jpg
│   ├── category-fashion.jpg
│   ├── category-home.jpg
│   ├── category-beauty.jpg
│   └── ...
└── README.md                 # Project documentation

Erste Schritte

Klon oder Download dieses Repository
Index öffnen. /> Produktfilterung < /h3>

Verwenden Sie die Kontrollkästchen Kategorien, um nach Produkttyp zu filtern. /> Klicken Sie auf "Alle löschen", um Filter zu zurücksetzen. Schaltflächen < /li>
Elemente mit dem Trash -Symbol entfernen. Zusammenfassung < /li>
Klicken Sie auf "Kauf abschließen", um die Bestellung zu platzieren. class = "Lang-CSS PrettyPrint-Override">
Code: Select all
```
:root {
--primary-color: #6c5ce7;
--primary-light: #a29bfe;
--secondary-color: #2d3436;
--accent-color: #fd79a8;
--accent-hover: #e84393;
/* Other color variables */
}
```
Sie können diese Variablen in stiles ändern.
Code: Select all
```
{
id: 13,
name: "New Product Name",
category: "category-name",
price: 99.99,
oldPrice: 129.99,  // Set to null if no discount
rating: 4.5,
reviewCount: 200,
image: "img/product13.jpg",
isNew: true,
isSale: false,
description: "Product description here."
}
```
Browser Support

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)
Opera (latest)

Future Enhancements

[*]Product detail page
[*]User authentication
[*]Wishlist functionality
[*]Product reviews
[*]Related products
Advanced filtering Optionen < /li>
Zahlungsgateway -Integration < /li>
Dunkelmodus -Thema Umschaltung < /li>
< /ul>
Lizenz < /H2>
Dieses Projekt ist unter der MIT -Lizenz lizenziert - siehe Lizenzdatei für Details. /> Schriftart für Ikonen < /li>
Google-Schriftarten für die Typografie < /li>
Entflash für Produkt- und Kategoriebilder < /li>
< /ul>
**app.js **-< /p>
// DOM Elements
const productGrid = document.getElementById('product-grid');
const applyFiltersBtn = document.getElementById('apply-filters');
const clearFiltersBtn = document.getElementById('clear-filters');
const priceRange = document.getElementById('price-range');
const priceValue = document.getElementById('price-value');
const categoryFilters = document.querySelectorAll('.category-filter');
const ratingFilters = document.querySelectorAll('.rating-filter');
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
const overlay = document.getElementById('overlay');

// State
let filteredProducts = [...products];
let selectedCategories = ['all'];
let selectedRatings = [];
let maxPrice = 1000;

// Initialize the page
document.addEventListener('DOMContentLoaded', () => {
renderProducts(products);
setupEventListeners();
});

// Setup Event Listeners
function setupEventListeners() {
// Mobile menu toggle
hamburger.addEventListener('click', () => {
navLinks.classList.toggle('active');
});

// Price range input
priceRange.addEventListener('input', (e) => {
maxPrice = e.target.value;
priceValue.textContent = `$${maxPrice}`;
});

// Category filters
categoryFilters.forEach(filter => {
filter.addEventListener('change', (e) => {
if (e.target.value === 'all') {
// If 'All' is checked, uncheck other categories
if (e.target.checked) {
categoryFilters.forEach(cat => {
if (cat.value !== 'all') {
cat.checked = false;
}
});
selectedCategories = ['all'];
} else {
// If 'All' is unchecked, make sure at least one category is selected
e.target.checked = true;
}
} else {
// If another category is checked, uncheck 'All'
const allCategoryFilter = document.querySelector('.category-filter[value="all"]');
allCategoryFilter.checked = false;

// Update selected categories
selectedCategories = Array.from(categoryFilters)
.filter(cat => cat.checked && cat.value !== 'all')
.map(cat => cat.value);

// If no category is selected, check 'All'
if (selectedCategories.length === 0) {
allCategoryFilter.checked = true;
selectedCategories = ['all'];
}
}
});
});

// Rating filters
ratingFilters.forEach(filter => {
filter.addEventListener('change', (e) => {
if (e.target.checked) {
selectedRatings.push(Number(e.target.value));
} else {
selectedRatings = selectedRatings.filter(rating => rating !== Number(e.target.value));
}
});
});

// Apply filters
applyFiltersBtn.addEventListener('click', applyFilters);

// Clear filters
clearFiltersBtn.addEventListener('click', clearFilters);
}

// Filter products based on selected criteria
function applyFilters() {
// Start with all products
let filtered = [...products];

// Filter by price
filtered = filtered.filter(product => product.price selectedCategories.includes(product.category));
}

// Filter by rating
if (selectedRatings.length > 0) {
const minRating = Math.min(...selectedRatings);
filtered = filtered.filter(product => product.rating >= minRating);
}

// Update the UI
filteredProducts = filtered;
renderProducts(filteredProducts);
}

// Clear all filters
function clearFilters() {
// Reset price filter
priceRange.value = 1000;
maxPrice = 1000;
priceValue.textContent = `$${maxPrice}`;

// Reset category filters
categoryFilters.forEach(filter => {
filter.checked = filter.value === 'all';
});
selectedCategories = ['all'];

// Reset rating filters
ratingFilters.forEach(filter => {
filter.checked = false;
});
selectedRatings = [];

// Show all products
filteredProducts = [...products];
renderProducts(filteredProducts);
}

// Render products in the grid
function renderProducts(productsToRender) {
productGrid.innerHTML = '';

if (productsToRender.length === 0) {
productGrid.innerHTML = `

No products found
Try adjusting your filters to find products.

`;
return;
}

productsToRender.forEach(product => {
const productEl = createProductElement(product);
productGrid.appendChild(productEl);
});
}

// Create a product element
function createProductElement(product) {
const productEl = document.createElement('div');
productEl.className = 'product-card';

// Generate stars based on rating
const fullStars = Math.floor(product.rating);
const hasHalfStar = product.rating % 1 !== 0;
let starsHTML = '';

for (let i = 0; i < fullStars; i++) {
starsHTML += '';
}

if (hasHalfStar) {
starsHTML += '';
}

const emptyStars = 5 - fullStars - (hasHalfStar ? 1 : 0);
for (let i = 0; i < emptyStars; i++) {
starsHTML += '';
}

productEl.innerHTML = `

${product.isNew ? 'New' : ''}
${product.isSale ? 'Sale' : ''}

${product.category}
${product.name}

$${product.price.toFixed(2)}
${product.oldPrice ? `$${product.oldPrice.toFixed(2)}` : ''}

${starsHTML}
(${product.reviewCount})

Add to Cart

`;

// Add event listener to the Add to Cart button
const addToCartBtn = productEl.querySelector('.add-to-cart');
addToCartBtn.addEventListener('click', () => {
addToCart(product.id);
});

return productEl;
}

// Trigger 'Add to Cart' with animations
function addToCart(productId) {
// Create a visual effect for adding to cart
const notification = document.createElement('div');
notification.className = 'add-to-cart-notification';
notification.textContent = `${productId} added to cart!`;
document.body.appendChild(notification);

// Trigger cart update
if (typeof updateCart === 'function') {
updateCart(productId);
}

// Remove notification after animation completes
setTimeout(() => {
notification.classList.add('fade-out');
setTimeout(() => {
document.body.removeChild(notification);
}, 300);
}, 2000);
}

// TODO: Bug 1 - Critical: Authentication bypass
function checkAuth() {
return localStorage.getItem('token'); // Bug: No token validation
}

// TODO: Bug 2 - Critical: XSS vulnerability
function renderProducts() {
const products = getProducts();
return products.map(p => `${p.name}`).join(''); // Bug: No HTML escaping
}

// TODO: Bug 3 - Critical: CSRF protection missing
function submitOrder(orderData) {
fetch('/api/orders', { // Bug: No CSRF token
method: 'POST',
body: JSON.stringify(orderData)
});
}

// TODO: Bug 4 - Critical: Price manipulation vulnerability
function updatePrice(item, price) {
item.price = price; // Bug: Client-side price modification possible
updateCart();
}

// TODO: Bug 5 - Critical: Event listener timing
document.querySelector('.products-container').innerHTML = renderProducts();

// TODO: Bug 6 - Critical: Local storage error
function loadCart() {
const cart = JSON.parse(localStorage.getItem('cart')); // Bug: No error handling
return cart || [];
}

// TODO: Bug 7 - Critical: Race condition in checkout
async function checkout() {
const items = getCartItems();
// Bug: Stock levels could change between check and purchase
if (checkStock(items)) {
await processPurchase(items);
}
}

// TODO: Bug 8 - Critical: SQL Injection in search
function searchProducts(query) {
return fetch(`/api/products/search?q=${query}`); // Bug: No parameter escaping
}

// TODO: Bug 9 - Critical: Infinite loop potential
function calculateDiscount(items) {
return items.reduce((acc, item) => {
return acc + calculateDiscount(item.subItems); // Bug: No base case
}, 0);
}

// TODO: Bug 10 - Critical: Cart persistence
window.addEventListener('unload', () => {
// Bug: Missing cart save to localStorage
console.log('Page unloading...');
});

let cart = [];

// Initialize store
function initializeStore() {
try {
const storedCart = localStorage.getItem('cart');
if (storedCart) {
cart = JSON.parse(storedCart);
}
} catch (error) {
console.error("Error parsing cart from localStorage:", error);
cart = [];
}
updateCart(cart);
}

// Update cart display
function updateCart(cart) {
const cartCountElem = document.querySelector('.cart-count');
if (cartCountElem) {
cartCountElem.textContent = cart.length;
} else {
console.warn("cart-count element not found");
}
}

// Add to cart function
function addToCart(productId) {
const product = products.find(p => p.id === productId);
if (!product) {
console.error("Product not found:", productId);
return;
}

cart.push(product);
localStorage.setItem('cart', JSON.stringify(cart));
updateCart(cart);
}

< /code>
cart.js
// DOM Elements
const cartIcon = document.getElementById('cart-icon');
const cartSidebar = document.getElementById('cart-sidebar');
const closeCartBtn = document.getElementById('close-cart');
const cartItems = document.getElementById('cart-items');
const cartTotalPrice = document.getElementById('cart-total-price');
const checkoutBtn = document.getElementById('checkout-btn');
const checkoutModal = document.getElementById('checkout-modal');
const closeCheckoutBtn = document.getElementById('close-checkout');
const confirmationModal = document.getElementById('confirmation-modal');
const closeConfirmationBtn = document.getElementById('close-confirmation');
const continueShoppingBtn = document.getElementById('continue-shopping');
const checkoutForm = document.getElementById('checkout-form');
const summarySubtotal = document.getElementById('summary-subtotal');
const summaryTax = document.getElementById('summary-tax');
const summaryTotal = document.getElementById('summary-total');
const orderReference = document.getElementById('order-reference');

// Cart state
let cart = [];
let cartTotal = 0;

// Initialize cart
document.addEventListener('DOMContentLoaded', () => {
// Load cart from localStorage if available
const savedCart = localStorage.getItem('cart');
if (savedCart) {
cart = JSON.parse(savedCart);
updateCartCount();
renderCart();
}

setupCartEvents();
});

// Setup cart event listeners
function setupCartEvents() {
// Toggle cart sidebar
cartIcon.addEventListener('click', () => {
cartSidebar.classList.add('active');
overlay.classList.add('active');
});

// Close cart
closeCartBtn.addEventListener('click', () => {
cartSidebar.classList.remove('active');
overlay.classList.remove('active');
});

// Checkout button
checkoutBtn.addEventListener('click', () => {
if (cart.length === 0) {
alert('Your cart is empty. Add some products first!');
return;
}

openCheckoutModal();
});

// Close checkout modal
closeCheckoutBtn.addEventListener('click', () => {
checkoutModal.classList.remove('active');
overlay.classList.remove('active');
});

// Close confirmation modal
closeConfirmationBtn.addEventListener('click', () => {
confirmationModal.classList.remove('active');
overlay.classList.remove('active');
});

// Continue shopping button
continueShoppingBtn.addEventListener('click', () => {
confirmationModal.classList.remove('active');
overlay.classList.remove('active');
});

// Handle checkout form submission
checkoutForm.addEventListener('submit', (e) => {
e.preventDefault();
processOrder();
});

// Close modals when clicking on overlay
overlay.addEventListener('click', () => {
cartSidebar.classList.remove('active');
checkoutModal.classList.remove('active');
confirmationModal.classList.remove('active');
overlay.classList.remove('active');
});
}

// Add a product to cart
function updateCart(product) {
// Check if product already exists in cart
const existingItem = cart.find(item => item.id === product.id);

if (existingItem) {
existingItem.quantity += 1;
} else {
cart.push({
...product,
quantity: 1
});
}

// Save cart to localStorage
localStorage.setItem('cart', JSON.stringify(cart));

// Update UI
updateCartCount();
renderCart();
}

// Render cart items
function renderCart() {
if (cart.length === 0) {
cartItems.innerHTML = 'Your cart is empty';
cartTotalPrice.textContent = '$0.00';
cartTotal = 0;
return;
}

cartItems.innerHTML = '';
let total = 0;

cart.forEach(item => {
const itemTotal = item.price * item.quantity;
total += itemTotal;

const cartItem = document.createElement('div');
cartItem.className = 'cart-item';
cartItem.innerHTML = `

${item.name}

$${item.price.toFixed(2)}

-

+

`;

cartItems.appendChild(cartItem);
});

// Update cart total
cartTotal = total;
cartTotalPrice.textContent = `$${total.toFixed(2)}`;

// Add event listeners to quantity buttons and remove buttons
const decreaseButtons = document.querySelectorAll('.quantity-btn.decrease');
const increaseButtons = document.querySelectorAll('.quantity-btn.increase');
const removeButtons = document.querySelectorAll('.remove-item');

decreaseButtons.forEach(button => {
button.addEventListener('click', () => {
decreaseQuantity(Number(button.dataset.id));
});
});

increaseButtons.forEach(button => {
button.addEventListener('click', () => {
increaseQuantity(Number(button.dataset.id));
});
});

removeButtons.forEach(button => {
button.addEventListener('click', () => {
removeFromCart(Number(button.dataset.id));
});
});
}

// Update cart count badge
function updateCartCount() {
const cartCount = document.querySelector('.cart-count');
const count = cart.reduce((total, item) => total + item.quantity, 0);
cartCount.textContent = count;
}

// Decrease item quantity
function decreaseQuantity(productId) {
const item = cart.find(item => item.id === productId);

if (item.quantity > 1) {
item.quantity -= 1;
} else {
removeFromCart(productId);
return;
}

localStorage.setItem('cart', JSON.stringify(cart));
renderCart();
}

// Increase item quantity
function increaseQuantity(productId) {
const item = cart.find(item => item.id === productId);
item.quantity += 1;

localStorage.setItem('cart', JSON.stringify(cart));
renderCart();
}

// Remove item from cart
function removeFromCart(productId) {
cart = cart.filter(item => item.id !== productId);

localStorage.setItem('cart', JSON.stringify(cart));
updateCartCount();
renderCart();
}

// Open checkout modal
function openCheckoutModal() {
// Update summary values
const subtotal = cartTotal;
const tax = subtotal * 0.08; // Assuming 8% tax
const total = subtotal + tax + 10; // Adding $10 shipping

summarySubtotal.textContent = `$${subtotal.toFixed(2)}`;
summaryTax.textContent = `$${tax.toFixed(2)}`;
summaryTotal.textContent = `$${total.toFixed(2)}`;

// Show modal
checkoutModal.classList.add('active');
overlay.classList.add('active');
}

// Process the order
function processOrder() {
// Generate a random order number
const orderNumber = `ORD-${Math.floor(100000 + Math.random() * 900000)}`;
orderReference.textContent = orderNumber;

// Close checkout modal
checkoutModal.classList.remove('active');

// Show confirmation modal
confirmationModal.classList.add('active');

// Clear cart
cart = [];
localStorage.removeItem('cart');
updateCartCount();
renderCart();
}

function updateCartTotal() {
// TODO: Bug - Cart total calculation is incorrect (hint: floating point precision error in price calculations)
let total = 0;
const cartItems = document.querySelectorAll('.cart-item');
cartItems.forEach(item => {
const price = parseFloat(item.querySelector('.price').textContent);
const quantity = parseInt(item.querySelector('.quantity').value);
total += price * quantity;
});
// Bug: Direct floating point multiplication causes precision errors
document.querySelector('.cart-total').textContent = total;
}

// TODO: Bug 9 - Critical: Cart total calculation (hint: floating point precision error)
function calculateTotal() {
return cart.reduce((total, item) => {
return total + item.price * item.quantity;
}, 0);
}

// TODO: Bug 10 - Critical: Cart persistence (hint: cart not saved before page unload)
window.addEventListener('unload', () => {
// Bug: Missing cart save to localStorage
console.log('Page unloading...');
});
< /code>
Bitte geben Sie die Antworten schnell und ich brauche sie nach einem einzigen, wenn möglich
AI -Antworten sind zulässig < /p>

Können Sie diese Fehler auf einer JavaScript -E -Commerce -Website [geschlossen] lösen?

Können Sie diese Fehler auf einer JavaScript -E -Commerce -Website [geschlossen] lösen? ⇐ HTML

${item.name}

Quick Reply