CODEWITHSUNDEEP
javascriptjqueryhtmlcsscomponents
nooshin
nooshin

Reputation: 23

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

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>

Upvotes: 1

Views: 106

Answers (1)

Rkv88 - Kanyan
Rkv88 - Kanyan

Reputation: 1332

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'];

Upvotes: 1

Related Questions