Untitled

 avatar
user_0174950
plain_text
2 months ago
13 kB
1
Indexable
Never
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
      }
    ]
  
  
    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>
            </div>
        `;
        productContainer.appendChild(card);
    });
}

// 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);
    });
}

Leave a Comment