Click here to Skip to main content
15,904,823 members
Please Sign up or sign in to vote.
1.12/5 (5 votes)
See more:
# Create an E-Commerce product search page clone (Part 1): List

## Problem Statement

Given a list of products create a basic HTML page that can render the products as a list of cards. Iterate over the given list to render the item card inside of a parent component identified by `id="root"`.

Some basic CSS classes & JavaScript function declarations are provided as a starting point for this assignment. You would have to implement the following functions:

```
createProductCard
renderAllCards
```


## Implementation guidelines:

Try to start with the renderAllCards function and inside of it first find the element with `id="root"` using `document.querySelector`.

The `renderAllCards` function should take the list of items as an argument 

(**NOTE**: referring to the global variable inside this function might cause your submission to fail).

Once you’ve selected the root element and the list of items as a parameter, now it’s time to iterate through the list to create the individual cards. 

Call the `createProductCard` function to get back a DOM element which can be appended to the root element as a child.

The createProductCard function will accept a parameter of type object with the following structure:

```javascript
{
  "id": 1,
  "name": "PlayStation 5",
  "description": "....",
  "image": "....",
  "price": 400,
  "memory": "8 GB",
  "storage": "1 TB",
  "colors": ['black', 'white', 'blue']
}
```

You’re expected to return a DOM element i.e. the card component for the given payload.

- The card component should be a `div` element having `class=‘product’` and a data attribute called `data-item-id` containing the id of that product item.

The card component should have the following:

- An IMG element with src attribute containing the image URL and class name as `‘product__image’`

- One `H3` element with class `‘product__name’` containing the product name

- One P tag containing the product description with class `‘product__description’`

- One H4 tag containing the price with class `‘product__price’`

Use span tags for other product tags like memory, storage, colors (each). Given as a reference implementation.


## Data Source
A global variable called `window.productList`

```javascript
window.productList = [
  {
    id: 1,
    name: 'Playstation 5',
    image: '....',
    description: 'Next gen Console gaming',
    price: '400',
    memory: '8 GB',
    storage: '1 TB',
    color: ['black', 'white', 'blue'],
  },
  {
    id: 1,
    name: 'Playstation 4',
    image: '....',
    description: 'Previous gen Console gaming',
    price: '200',
    memory: '4 GB',
    storage: '1 TB',
    color: ['red', 'white', 'blue'],
  },
  {
    id: 1,
    name: 'iPhone 12',
    image: '....',
    description: 'Smartphone',
    price: '650',
    memory: '4 GB',
    storage: '256 GB',
    color: ['black', 'white', 'blue', 'red'],
  },
  ....
]
```

## Expected Output
Your submission should look like the following

![title](assets/expected_output.png)


What I have tried:

Clone code for this project by clicking this link[^]
Posted
Updated 12-Sep-22 23:20pm
v2
Comments
Richard MacCutchan 13-Sep-22 4:23am    
You forgot to aske a question. But if you are waiting for someone to write your homework I am afraid the wait will be very long.
Prakash Bhagora 13-Sep-22 5:16am    
how to get details like images,name,description etc.all stored in a data.js file and there is another file called index.js where some tips are given go and download all fils form my git hub repositery. thank you
Richard MacCutchan 13-Sep-22 5:55am    
Sorry, this is the Quick Answers forum. We are not here to do your work for you.
Dipsha Biswas 25-Jan-24 11:04am    
You have got the answer Prakash. But the problem is that this forum is too rude to accept my solution. So please don't ask the question here

1 solution

While we are more than willing to help those that are stuck, that doesn't mean that we are here to do it all for you! We can't do all the work, you are either getting paid for this, or it's part of your grades and it wouldn't be at all fair for us to do it all for you.

So we need you to do the work, and we will help you when you get stuck. That doesn't mean we will give you a step by step solution you can hand in!
Start by explaining where you are at the moment, and what the next step in the process is. Then tell us what you have tried to get that next step working, and what happened when you did.

If you are having problems getting started at all, then this may help: How to Write Code to Solve a Problem, A Beginner's Guide[^]
 
Share this answer
 
Comments
Dipsha Biswas 25-Jan-24 7:26am    
This is correct, but it will be injustice to those who can't afford to solve the problem by themselves. Lucky me that I have got the code! ~ actually the comments are the hints
Dipsha Biswas 25-Jan-24 11:02am    
Prakash, please don't post this petty questions like this., it's been a year and six months late, but... It's very wrong that I was involved to answer this problem. My words are misunderstood here, it's not a good place to discuss these things. I request you not to post such problems
OriginalGriff 25-Jan-24 11:32am    
Why are you telling me this, not him?
And given that he hasn't even logged in since November 2022 it's unlikely he's interested any more (he failed his course, maybe?)

I don't think your words were misunderstood here: it's just that giving (even poor quality) code solutions to homework causes problems for the student later. Software courses are structured so you start simple and get more complex - so if you copy'n'paste homework you never develop the skill to write code yourself. Which is a real problem in the final exam when you can't get someone else to write it for you ...
Dipsha Biswas 25-Jan-24 20:11pm    
It is a practice problem if you don't mind: this is not part of a course or test, there is no pass or fail criteria, but if you treat it as homework or assignment, you are correct. Actually simply copying and pasting code does not make sense here. I have already told the OP (Prakash), that you've got the answer.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900