complet Product Catalog project
This commit is contained in:
Deepak Kumar
@@ -1,21 +1,90 @@
|
||||
|
||||
|
||||
# Product Catalog
|
||||
|
||||
## Description
|
||||
|
||||
A brief description of the product catalog project.
|
||||
The Product Catalog project is a web application designed to showcase and manage a collection of products. It provides users with an interface to browse, search, and view detailed information about each product, enhancing their shopping or informational experience.
|
||||
|
||||
## Features
|
||||
|
||||
- Feature 1
|
||||
- Feature 2
|
||||
- Feature 3
|
||||
- **Product Listing**: Display a grid or list of products with basic information such as name, price, and image.
|
||||
- **Product Details**: Clicking on a product shows comprehensive details including description, specifications, and reviews.
|
||||
- **Search and Filter**: Enable users to search for products by name, category, or other attributes. Allow filtering by price range or availability.
|
||||
- **Responsive Design**: Ensure the catalog is accessible and usable across various devices and screen sizes.
|
||||
|
||||
## Technologies Used
|
||||
|
||||
- JavaScript
|
||||
- HTML
|
||||
- CSS
|
||||
- **JavaScript**: Implements dynamic functionalities like filtering, sorting, and AJAX requests for fetching product data.
|
||||
- **HTML**: Provides the structure of the web pages, including product lists, details, and search forms.
|
||||
- **CSS**: Styles the application to ensure a visually appealing and user-friendly interface.
|
||||
|
||||
## Setup
|
||||
|
||||
Instructions to set up and run the project.
|
||||
To set up and run the Product Catalog project locally, follow these steps:
|
||||
|
||||
1. **Clone the Repository**:
|
||||
```bash
|
||||
git clone <repository_url>
|
||||
cd product-catalog
|
||||
```
|
||||
|
||||
2. **Open Project Directory**:
|
||||
```bash
|
||||
cd product-catalog
|
||||
```
|
||||
|
||||
3. **Run the Project**:
|
||||
- Open `index.html` in your preferred web browser.
|
||||
- For dynamic features or server-side functionalities, consider using a local server. If using Node.js, install `http-server`:
|
||||
```bash
|
||||
npm install -g http-server
|
||||
http-server
|
||||
```
|
||||
Access the project at `http://localhost:8080` (or another port shown).
|
||||
|
||||
4. **Customize and Extend**:
|
||||
- Modify product data (`products.json` or a database) to include more products and details.
|
||||
- Enhance UI/UX by updating CSS styles or adding interactive features.
|
||||
|
||||
## Contributing
|
||||
|
||||
You can contribute to the Product Catalog project to improve its features or fix issues. Here’s how to get involved:
|
||||
|
||||
1. **Fork the Repository**:
|
||||
Click the "Fork" button on GitHub to create your copy of the project.
|
||||
|
||||
2. **Clone Your Fork**:
|
||||
```bash
|
||||
git clone https://github.com/your-username/product-catalog.git
|
||||
cd product-catalog
|
||||
```
|
||||
|
||||
3. **Create a New Branch**:
|
||||
```bash
|
||||
git checkout -b feature-name
|
||||
```
|
||||
|
||||
4. **Implement Your Changes**:
|
||||
Make enhancements, add features, or fix bugs in the project.
|
||||
|
||||
5. **Commit Your Changes**:
|
||||
```bash
|
||||
git commit -m "Add new feature: feature description"
|
||||
```
|
||||
|
||||
6. **Push to Your Fork**:
|
||||
```bash
|
||||
git push origin feature-name
|
||||
```
|
||||
|
||||
7. **Create a Pull Request**:
|
||||
Submit a pull request to merge your changes into the main branch of the original repository.
|
||||
|
||||
## Get in Touch
|
||||
|
||||
If you have any questions or need further assistance, feel free to open an issue on GitHub or contact us directly. Your contributions and feedback are highly appreciated!
|
||||
|
||||
---
|
||||
|
||||
Thank you for your interest in the Product Catalog project. Together, we can build a more robust and feature-rich application. Happy coding!
|
||||
17
E commerce Projects/1-product_catalog/index.html
Normal file
17
E commerce Projects/1-product_catalog/index.html
Normal file
@@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Product Catalog</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Product Catalog</h1>
|
||||
<input type="text" id="searchInput" placeholder="Search products...">
|
||||
<div id="productList" class="product-list"></div>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
42
E commerce Projects/1-product_catalog/script.js
Normal file
42
E commerce Projects/1-product_catalog/script.js
Normal file
@@ -0,0 +1,42 @@
|
||||
const products = [
|
||||
{ id: 1, name: 'Product 1', price: 19.99, category: 'Category A', image: 'product1.jpg' },
|
||||
{ id: 2, name: 'Product 2', price: 29.99, category: 'Category B', image: 'product2.jpg' },
|
||||
{ id: 3, name: 'Product 3', price: 39.99, category: 'Category A', image: 'product3.jpg' },
|
||||
{ id: 4, name: 'Product 4', price: 49.99, category: 'Category C', image: 'product4.jpg' },
|
||||
{ id: 5, name: 'Product 5', price: 59.99, category: 'Category B', image: 'product5.jpg' }
|
||||
];
|
||||
|
||||
const productList = document.getElementById('productList');
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
|
||||
// Function to display products based on search input
|
||||
function displayProducts(products) {
|
||||
productList.innerHTML = ''; // Clear previous product list
|
||||
|
||||
products.forEach(product => {
|
||||
const productElement = document.createElement('div');
|
||||
productElement.classList.add('product');
|
||||
productElement.innerHTML = `
|
||||
<img src="images/${product.image}" alt="${product.name}" class="product-image">
|
||||
<div class="product-details">
|
||||
<h3>${product.name}</h3>
|
||||
<p>Price: $${product.price}</p>
|
||||
<p>Category: ${product.category}</p>
|
||||
</div>
|
||||
`;
|
||||
productList.appendChild(productElement);
|
||||
});
|
||||
}
|
||||
|
||||
// Initial display of all products
|
||||
displayProducts(products);
|
||||
|
||||
// Event listener for search input
|
||||
searchInput.addEventListener('input', () => {
|
||||
const searchTerm = searchInput.value.trim().toLowerCase();
|
||||
const filteredProducts = products.filter(product =>
|
||||
product.name.toLowerCase().includes(searchTerm) ||
|
||||
product.category.toLowerCase().includes(searchTerm)
|
||||
);
|
||||
displayProducts(filteredProducts);
|
||||
});
|
||||
70
E commerce Projects/1-product_catalog/styles.css
Normal file
70
E commerce Projects/1-product_catalog/styles.css
Normal file
@@ -0,0 +1,70 @@
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background-color: #f4f4f4;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 20px auto;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 16px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.product-list {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.product {
|
||||
padding: 16px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
background-color: #fff;
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.product:hover {
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.product h3 {
|
||||
margin-top: 0;
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.product p {
|
||||
margin: 8px 0;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.product-list {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user