Tri d'annonces

by Simon Hi

HTML

<div class="selecteur-de-tri">
  <span>Trier</span>
  <select onchange="trier()" id="prix-superficie">
    <option value="Default">Default</option>
    <option value="PriceLowToHigh">Prix du plus bas au plus haut</option>
    <option value="PriceHighToLow">Prix du plus haut au plus bas</option>
    <option value="SuperficieLowToHigh">Superficie du plus bas au plus haut</option>
    <option value="SuperficieHighToLow">Superficie du plus haut au plus bas</option>
  </select>
</div>
<div class="liste-des-annonces">
  <div class="annonce">
    <div class="slider">
      <img class="active" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Warwick_Castle_May_2016.jpg/320px-Warwick_Castle_May_2016.jpg">
    </div>
    <div class="informations">
      <a class="maquette" href="/principales/single.php?id=32">
        <p class='title'>Titre1</p>
        <p class='price'><span class='mru'>Prix : </span><span class='valeur'>210</span></p>
        <p class='superficie'>
          <i class='fas fa-chart-area'></i>
          <span class='valeur'>250</span> m2</p>
        <p class='date'> <i class='fa fa-calendar'></i> 2022-01-28</p>
        <p class='city'> <i class='fa fa-map-marker' style='font-size:15px'></i>VilleA</p>
      </a>
    </div>
  </div>
  <div class="annonce">
    <div class="slider">
      <img class="active" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Broadway_Tower_2012.jpg/320px-Broadway_Tower_2012.jpg">
    </div>
    <div class="informations">
      <a class="maquette" href="/principales/single.php?id=32">
        <p class='title'>Titre2</p>
        <p class='price'><span class='mru'>Prix : </span><span class='valeur'>21</span></p>
        <p class='superficie'> <i class='fas fa-chart-area'></i> <span class='valeur'>200</span> m2</p>
        <p class='date'> <i class='fa fa-calendar'></i> 2022-01-29</p>
        <p class='city'> <i class='fa fa-map-marker' style='font-size:15px'></i>VilleB</p>
      </a>
    </div>
  </div>
...

CSS

body>div {
  margin: 1em;
}

.annonce img {
  width: 240px;
  height: 170px;
}

JavaScript

function compare(a, b, className, sens) {
  let valueA, valueB;
  valueA = sens * parseFloat(a.querySelector('.' + className + ' .valeur').innerHTML);
  valueB = sens * parseFloat(b.querySelector('.' + className + ' .valeur').innerHTML);
  if (valueA < valueB) return -1;
  if (valueB < valueA) return 1;
  return 0;
}

function triDonnees(className, sens) {
  let nodes = document.querySelectorAll(".annonce");
  let elements = Array.from(nodes);
  let list = nodes[0].parentNode;
  elements.sort((a, b) => compare(a, b, className, sens));
  list.innerHTML = "";
  elements.forEach(e => list.appendChild(e));
}

function trier() {
  let tri = document.getElementById("prix-superficie");
  if (tri.value == "PriceLowToHigh") {
    triDonnees("price", 1);
  } else if (tri.value == "PriceHighToLow") {
    triDonnees("price", -1);
  } else if (tri.value == "SuperficieHighToLow") {
    triDonnees("superficie", -1);
  } else if (tri.value == "SuperficieLowToHigh") {
    triDonnees("superficie", 1);
  }
}