how can I make a html and css component by javascript?

Question

I want to summarize my HTML code and making a component by Javascript. My Html code contains a list of the picture that I put them in <li> tags. every picture has a special link, and a number into a <div> tag.how can I make a pattern for generating them by javascript?

Also, I want to sort these pics by that numbers, according to, highest to lowest, and I don't know how to do that. Totally, Is it true to summarize HTML code in this way?

<ul class="product-list">
  <li class="product-item">
    <a id="producItem1" href="page2.htm">
      <img class="clothes" src="dress1.jpg">
    </a>
    <div class="price-holder">
      <p id="price1">250,000</p>
    </div>
  </li>
  <li class="product-item">
    <a id="producItem2">
      <img class="clothes" src="coat1.jpg">
    </a>
    <div class="price-holder">
      <p id="price2">350,000</p>
    </div>
  </li>
  <li class="product-item">
    <a id="producItem3">
      <img class="clothes" src="shirt1.jpg">
    </a>
    <div class="price-holder">
      <p id="price3">150,000</p>
    </div>
  </li>
  <li class="product-item">
    <a id="producItem4">
      <img class="clothes" src="skirt1.jpg">
    </a>
    <div class="price-holder">
      <p id="price4">200,000</p>
    </div>
  </li>
</ul>

In order to help, we need to better understand your dataset, Is this coming from a server? will you be using ajax? Is there any server side rendering that could be doing this instead? — John Pavek
– John Pavek, Commented Jan 18, 2020 at 20:07

Rkv88 - Kanyan · Accepted Answer · 2020-01-22 15:35:33Z

use this if you want to create list from javascript data you can use objects but i used arrays because you said no server involved so you will generate the data of image names and prices manually

$(document).ready(function(){

imgz=['dress1.jpg', 'coat1.jpg', 'shirt1.jpg', 'skirt1.jpg','dress2.jpg'];
prices=[100000, 200000, 150000, 250000, 300000];
linkz=['page1.htm','page2.htm','page3.htm','page4.htm','page5.htm'];
//linkz=[];imgz.forEach((v,i)=>{linkz[i]='page'+(i+1)+'.htm';});
  imgz.map((z,i)=> $('body').append(`
  <li class="product-item">
    <a id="producItem${i+1}" href='${linkz[i]}'>
      <img class="clothes" src="${imgz[i]}">
    </a>
    <div class="price-holder">
      <p id="price${i+1}">${prices[i]}</p>
    </div>
  </li>`));
      
      });

<html><head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js">
</script></head>

<body><ul class="product-list"></ul></body></html>

and if you want to create the links data automatically use this
linkz=[];imgz.forEach((v,i)=>{linkz[i]='page'+(i+1)+'.htm';});
instead of linkz=['page1.htm','page2.htm','page3.htm','page4.htm','page5.htm'];

Collectives™ on Stack Overflow

how can I make a html and css component by javascript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related