0

I have two divs, that will contain some information about different coffees, Each div will contain some text with span with different values from 1 to 10 to rate different aspects of a coffee like quality of coffee, internet velocity, comfort, etc.

So what I'm trying to achieve is, that once a button from filter container, for example the byQuality button is clicked, then the divs are organized based on the rank of CoffeeQuality span class from highest to lowest.

not sure how to solve the Javascript, actually stuck on html, can someone give me some guidance of where should I been watching? thanks

HTML

<div class="filterBar">
   <button class="byQuality" onclick="">COFFEE QUALITY</button>
   <button class="byWifi" onclick="">WIFI SIGNAL</button>
   <button class="byQuality" onclick="">CHAIR COMFORT</button>
</div>

<div class="coffeeWrapper" id="coffee1">
   <h3 class="coffeeTitle">Name of the Coffee</h3>
   <p>Coffee Quality:<span id="coffeeQuality">5</span></p>
   <p>Wifi Signal:<span id="coffeeWifi">8</span></p>
   <p>Chair Comfort:<span id="coffeeComfort">4</span></p>
</div>

<div class="coffeeWrapper" id="coffee2">
   <h3 class="coffeeTitle">Name of the Coffee</h3>
   <p>Coffee Quality:<span id="coffeeQuality">9</span></p>
   <p>Wifi Signal:<span id="coffeeWifi">2</span></p>
   <p>Chair Comfort:<span id="coffeeComfort">2</span></p>
</div>

Button By"Something" triggers the re-organization of divs by checking the related Span id and by order from highest rate to lowest?

Eury Kellhing
  • 3
  • 2
  • I think the best way to achieve that is not by directly showing the data in html, the best way is to save it in an array of objects and then print these in html after this you can do a function in which you do a sort depending on a field of the object and reprint the results of the object already sorted. sorting array object example: https://stackoverflow.com/questions/979256/sorting-an-array-of-javascript-objects – LMoreno10 Dec 06 '18 at 22:40
  • thanks a lot @LMoreno10 my only concern now is... SEO, by not exposing the data directly and retrieving it via array, I think it might influence on SEO results? since will be partially hidden content? – Eury Kellhing Dec 07 '18 at 07:42

0 Answers0