Untitled
unknown
plain_text
a year ago
18 kB
8
Indexable
let products =
[
{
"id": 1,
"title": "Multi-Purpose Blender",
"price": 49.99,
"description": "A versatile kitchen blender with 5 speed settings and a robust glass jar.",
"category": "Kitchen Appliances",
"image": "",
"rating": 4.5
},
{
"id": 2,
"title": "Stylish Desk Lamp",
"price": 29.99,
"description": "A sleek and modern desk lamp perfect for any office or study area.",
"category": "Home Decor",
"image": "",
"rating": 4.8
},
{
"id": 3,
"title": "Leather Office Chair",
"price": 189.99,
"description": "Ergonomic office chair with adjustable height and recline functions.",
"category": "Home Decor",
"image": "",
"rating": 4.3
},
{
"id": 4,
"title": "Bluetooth Speaker",
"price": 59.99,
"description": "Portable Bluetooth speaker with excellent sound quality and a durable exterior.",
"category": "Electronics",
"image": "",
"rating": 4.7
},
{
"id": 5,
"title": "Electric Toothbrush",
"price": 39.99,
"description": "Advanced electric toothbrush with multiple brushing modes and a timer.",
"category": "Personal Care",
"image": "",
"rating": 4.4
},
{
"id": 6,
"title": "Thermal Coffee Maker",
"price": 99.99,
"description": "12-cup coffee maker with a thermal carafe to keep coffee hot for hours.",
"category": "Kitchen Appliances",
"image": "",
"rating": 4.6
},
{
"id": 7,
"title": "Wireless Gaming Mouse",
"price": 29.99,
"description": "High precision wireless mouse with customizable buttons for gaming.",
"category": "Electronics",
"image": "",
"rating": 4.2
},
{
"id": 8,
"title": "High-Definition Monitor",
"price": 249.99,
"description": "27-inch high-definition monitor ideal for gaming and professional use.",
"category": "Electronics",
"image": "",
"rating": 4.9
},
{
"id": 9,
"title": "Yoga Mat",
"price": 19.99,
"description": "Eco-friendly yoga mat with superior grip and cushion.",
"category": "Fitness Equipment",
"image": "",
"rating": 4.1
},
{
"id": 10,
"title": "Running Shoes",
"price": 79.99,
"description": "Lightweight and durable running shoes designed for long-distance trails.",
"category": "Fitness Equipment",
"image": "",
"rating": 4.0
},
{
"id": 11,
"title": "Smart Watch",
"price": 199.99,
"description": "Fitness and health tracking smart watch with customizable watch faces.",
"category": "Electronics",
"image": "",
"rating": 4.6
},
{
"id": 12,
"title": "Stainless Steel Water Bottle",
"price": 24.99,
"description": "Insulated stainless steel water bottle that keeps liquids cold or hot for hours.",
"category": "Fitness Equipment",
"image": "",
"rating": 4.8
},
{
"id": 13,
"title": "Camping Tent",
"price": 149.99,
"description": "Spacious 4-person tent perfect for family camping trips.",
"category": "Fitness Equipment",
"image": "",
"rating": 4.3
},
{
"id": 14,
"title": "E-reader",
"price": 129.99,
"description": "Lightweight e-reader with a paper-like display and weeks-long battery life.",
"category": "Electronics",
"image": "",
"rating": 4.5
},
{
"id": 15,
"title": "Mechanical Keyboard",
"price": 69.99,
"description": "Responsive mechanical keyboard with customizable backlit keys.",
"category": "Electronics",
"image": "",
"rating": 4.7
},
{
"id": 16,
"title": "Gourmet Baking Set",
"price": 49.99,
"description": "Complete baking set with nonstick pans and silicone utensils.",
"category": "Kitchen Appliances",
"image": "",
"rating": 4.6
},
{
"id": 17,
"title": "Organic Facial Moisturizer",
"price": 29.99,
"description": "Hydrating organic moisturizer suitable for all skin types.",
"category": "Personal Care",
"image": "",
"rating": 4.4
},
{
"id": 18,
"title": "Digital Camera",
"price": 399.99,
"description": "Compact digital camera with high-resolution photos and video capabilities.",
"category": "Electronics",
"image": "",
"rating": 4.8
},
{
"id": 19,
"title": "Classic Board Games Set",
"price": 34.99,
"description": "Collection of classic board games including chess, checkers, and backgammon.",
"category": "Home Decor",
"image": "",
"rating": 4.2
},
{
"id": 20,
"title": "Electric Kettle",
"price": 29.99,
"description": "Fast boiling electric kettle with auto-shutoff and temperature control.",
"category": "Kitchen Appliances",
"image": "",
"rating": 4.1
},
{
"id": 21,
"title": "Exercise Bike",
"price": 299.99,
"description": "Stable and quiet exercise bike with adjustable resistance levels.",
"category": "Fitness Equipment",
"image": "",
"rating": 4.3
},
{
"id": 22,
"title": "Luxury Bath Towels",
"price": 39.99,
"description": "Set of ultra-soft and absorbent bath towels.",
"category": "Home Decor",
"image": "",
"rating": 4.6
},
{
"id": 23,
"title": "Hiking Backpack",
"price": 79.99,
"description": "Durable hiking backpack with ample storage and hydration compatibility.",
"category": "Fitness Equipment",
"image": "",
"rating": 4.7
},
{
"id": 24,
"title": "Wireless Earbuds",
"price": 99.99,
"description": "True wireless earbuds with active noise cancellation and long battery life.",
"category": "Electronics",
"image": "",
"rating": 4.9
},
{
"id": 25,
"title": "Silicone Cooking Utensils",
"price": 24.99,
"description": "Set of heat-resistant silicone cooking utensils.",
"category": "Kitchen Appliances",
"image": "",
"rating": 4.4
},
{
"id": 26,
"title": "Sunscreen Lotion",
"price": 14.99,
"description": "Broad-spectrum sunscreen lotion with SPF 50+ protection.",
"category": "Personal Care",
"image": "",
"rating": 4.3
},
{
"id": 27,
"title": "Herbal Tea Assortment",
"price": 19.99,
"description": "Variety pack of organic herbal teas.",
"category": "Kitchen Appliances",
"image": "",
"rating": 4.1
},
{
"id": 28,
"title": "Adjustable Dumbbells",
"price": 199.99,
"description": "Set of adjustable dumbbells for a versatile home workout.",
"category": "Fitness Equipment",
"image": "",
"rating": 4.8
},
{
"id": 29,
"title": "Scented Candles",
"price": 29.99,
"description": "Set of three scented candles with calming fragrances.",
"category": "Home Decor",
"image": "",
"rating": 4.2
},
{
"id": 30,
"title": "Facial Cleansing Brush",
"price": 49.99,
"description": "Electric facial cleansing brush for deep cleansing and exfoliation.",
"category": "Personal Care",
"image": "",
"rating": 4.7
}
];
// Display products on page load
displayProductCards(products);
createFilterDropdown(products);
createSortDropdown(products);
// Check if the user is logged in
const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
toggleUserActions(isLoggedIn);
// Sign Up functionality
document.getElementById('signupBtn').addEventListener('click', () => {
const username = prompt('Enter your username:');
if (username) {
localStorage.setItem('username', username);
localStorage.setItem('isLoggedIn', 'true');
toggleUserActions(true);
}
});
// Login functionality
document.getElementById('loginBtn').addEventListener('click', () => {
const username = prompt('Enter your username:');
if (username) {
const storedUsername = localStorage.getItem('username');
if (username === storedUsername) {
localStorage.setItem('isLoggedIn', 'true');
toggleUserActions(true);
} else {
alert('Invalid username. Please try again.');
}
}
});
// Logout functionality
document.getElementById('logoutBtn').addEventListener('click', () => {
localStorage.removeItem('username');
localStorage.setItem('isLoggedIn', 'false');
toggleUserActions(false);
});
// Function to toggle user actions visibility
function toggleUserActions(isLoggedIn) {
const userActions = document.getElementById('userActions');
if (isLoggedIn) {
document.getElementById('signupBtn').style.display = 'none';
document.getElementById('loginBtn').style.display = 'none';
document.getElementById('logoutBtn').style.display = 'inline-block';
} else {
document.getElementById('signupBtn').style.display = 'inline-block';
document.getElementById('loginBtn').style.display = 'inline-block';
document.getElementById('logoutBtn').style.display = 'none';
}
}
// Function to display product cards
function displayProductCards(products) {
const productContainer = document.getElementById('productContainer');
productContainer.innerHTML = '';
products.forEach(product => {
const card = document.createElement('div');
card.classList.add('card');
card.innerHTML = `
<img src="${product.image}" alt="${product.title}">
<div class="card-body">
<h3>${product.title}</h3>
<p>${product.description}</p>
<p>Price: $${product.price}</p>
<p>Rating: ${product.rating}</p>
<button class="reviewBtn" data-id="${product.id}">View Reviews</button>
<div class="rating" data-id="${product.id}">
<span class="star" data-value="1">★</span>
<span class="star" data-value="2">★</span>
<span class="star" data-value="3">★</span>
<span class="star" data-value="4">★</span>
<span class="star" data-value="5">★</span>
</div>
</div>
`;
productContainer.appendChild(card);
});
// Add event listeners to review buttons
const reviewBtns = document.querySelectorAll('.reviewBtn');
reviewBtns.forEach(btn => {
btn.addEventListener('click', () => {
const productId = parseInt(btn.dataset.id);
displayProductPage(productId);
});
});
// Add event listeners to ratings
const ratingStars = document.querySelectorAll('.rating .star');
ratingStars.forEach(star => {
star.addEventListener('click', () => {
const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
if (isLoggedIn) {
const productId = parseInt(star.parentNode.dataset.id);
const ratingValue = parseInt(star.dataset.value);
addReviewPrompt(productId, ratingValue);
} else {
alert('You need to be logged in to add a review.');
}
});
});
}
// Function to display product details
function displayProductDetails(product) {
const productDetails = document.getElementById('productDetails');
productDetails.innerHTML = `
<h2>${product.title}</h2>
<p><strong>Price:</strong> $${product.price}</p>
<p><strong>Description:</strong> ${product.description}</p>
<p><strong>Category:</strong> ${product.category}</p>
<p><strong>Rating:</strong> ${product.rating}</p>
<button id="addReviewBtn">Add Review</button>
<div id="reviewContainer"></div>
<button id="backToProductsBtn">Back to Products</button>
`;
// Add event listener to add review button
document.getElementById('addReviewBtn').addEventListener('click', () => {
const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
if (isLoggedIn) {
const productId = parseInt(localStorage.getItem('currentProductId'));
addReviewPrompt(productId, 0);
} else {
alert('You need to be logged in to add a review.');
}
});
// Add event listener to back to products button
document.getElementById('backToProductsBtn').addEventListener('click', () => {
document.getElementById('productPage').classList.add('hidden');
document.getElementById('productContainer').classList.remove('hidden');
});
}
// Function to prompt user for review content
function addReviewPrompt(productId, ratingValue) {
const name = prompt('Enter your name:');
const content = prompt('Enter your review:');
if (name && content) {
const review = {
name: name,
content: content,
rating: ratingValue
};
addReview(productId, review);
} else {
alert('Please enter your name and review content.');
}
}
// Function to add a review
function addReview(productId, review) {
const productIndex = products.findIndex(product => product.id === productId);
if (productIndex !== -1) {
if (!products[productIndex].reviews) {
products[productIndex].reviews = [];
}
products[productIndex].reviews.push(review);
localStorage.setItem('products', JSON.stringify(products));
displayReviews(products[productIndex].reviews);
}
}
// Function to display user reviews
function displayReviews(reviews) {
const reviewContainer = document.getElementById('reviewContainer');
reviewContainer.innerHTML = '';
reviews.forEach(review => {
const reviewElement = document.createElement('div');
reviewElement.classList.add('review');
reviewElement.innerHTML = `
<h3>${review.name}</h3>
<p>${review.content}</p>
<p>Rating: ${review.rating}</p>
`;
reviewContainer.appendChild(reviewElement);
});
}
// Function to create filter dropdown
function createFilterDropdown(products) {
const categories = Array.from(new Set(products.map(product => product.category)));
const filterDropdown = document.getElementById('filterDropdown');
categories.forEach(category => {
const option = document.createElement('option');
option.textContent = category;
option.value = category;
filterDropdown.appendChild(option);
});
filterDropdown.addEventListener('change', () => {
const selectedCategory = filterDropdown.value;
const filteredProducts = products.filter(product => product.category === selectedCategory);
displayProductCards(filteredProducts);
});
}
// Function to create sort dropdown
function createSortDropdown(products) {
const sortDropdown = document.getElementById('sortDropdown');
sortDropdown.addEventListener('change', () => {
const sortBy = sortDropdown.value;
let sortedProducts;
if (sortBy === 'price-low-high') {
sortedProducts = products.slice().sort((a, b) => a.price - b.price);
} else if (sortBy === 'price-high-low') {
sortedProducts = products.slice().sort((a, b) => b.price - a.price);
} else if (sortBy === 'rating-high-low') {
sortedProducts = products.slice().sort((a, b) => b.rating - a.rating);
}
displayProductCards(sortedProducts);
});
}
// Function to display product page
function displayProductPage(productId) {
const product = products.find(product => product.id === productId);
if (product) {
localStorage.setItem('currentProductId', productId);
displayProductDetails(product);
displayReviews(product.reviews);
document.getElementById('productPage').classList.remove('hidden');
document.getElementById('productContainer').classList.add('hidden');
}
}Editor is loading...
Leave a Comment