Html - How to sort a list by the amount of clicks

pepijnlatour
October 24, 2023
164 views
1 vote
2 Answers

I have the following list in html

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  align-self: center;
  justify-self: center;
  width: 80vw;
  margin: auto;
}

.grid-item {
  align-self: center;
  justify-self: center;
  font-size: 1vw;
  text-align: center;
  height: 10vw;
  width: 10vw;
  margin-top: 1vw;
  filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.25));
}

#bbb {
  background-image: url(Assets/PartijAfbeeldingen/BBB.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#plus {
  background-image: url(Assets/PartijAfbeeldingen/50PLUS.png);
  background-size: 100% 100%;
  background-position-y: 10px;
  background-repeat: no-repeat;
}

#bvnl {
  background-image: url(Assets/PartijAfbeeldingen/BVNL.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#cda {
  background-image: url(Assets/PartijAfbeeldingen/Cda.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#christenunie {
  background-image: url(Assets/PartijAfbeeldingen/ChristenUnie.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#d66 {
  background-image: url(Assets/PartijAfbeeldingen/D66.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#denk {
  background-image: url(Assets/PartijAfbeeldingen/Denk.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#fvd {
  background-image: url(Assets/PartijAfbeeldingen/FVD.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#ja21 {
  background-image: url(Assets/PartijAfbeeldingen/JA21.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#nsc {
  background-image: url(Assets/PartijAfbeeldingen/nsc.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#pvda {
  background-image: url(Assets/PartijAfbeeldingen/PVDAGROENLINKS.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#pvdd {
  background-image: url(Assets/PartijAfbeeldingen/PVDD.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#pvv {
  background-image: url(Assets/PartijAfbeeldingen/PVV.jpeg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#sgp {
  background-image: url(Assets/PartijAfbeeldingen/SGP.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#sp {
  background-image: url(Assets/PartijAfbeeldingen/SP.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#vvd {
  background-image: url(Assets/PartijAfbeeldingen/VVD.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#volt {
  background-image: url(Assets/PartijAfbeeldingen/Volt.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#vvd {
  background-image: url(Assets/PartijAfbeeldingen/VVD.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

<ul id="Partijensort" class="grid-container">
    <li onclick="incrementClicks(this)" class="grid-item" id="plus">50plus</li>
    <li onclick="incrementClicks(this)" class="grid-item" id="bbb">bbb </li>
    <li onclick="incrementClicks(this)" class="grid-item" id="bvnl">bvnl</li>
    <li onclick="incrementClicks(this)" class="grid-item" id="cda">cda</li>
    <li onclick="incrementClicks(this)" class="grid-item" id="pvv">PVV</li>
    <li onclick="incrementClicks(this)" class="grid-item" id="christenunie">christenunie</li>
    <li onclick="incrementClicks(this)" class="grid-item" id="d66">D66</li>
    <li onclick="incrementClicks(this)" class="grid-item" id="denk">Denk</li>
    <li onclick="incrementClicks(this)" class="grid-item" id="fvd">FVD</li>
    <li onclick="incrementClicks(this)" class="grid-item" id="ja21">JA21</li>
    <li onclick="incrementClicks(this)" class="grid-item" id="nsc">NSC</li>
    <li onclick="incrementClicks(this)" class="grid-item" id="pvda">PVDAGROENLINKS</li>
    <li onclick="incrementClicks(this)" class="grid-item" id="pvdd">PVDD</li>
    <li onclick="incrementClicks(this)" class="grid-item" id="sgp">SGP</li>
    <li onclick="incrementClicks(this)" class="grid-item" id="sp">SP</li>
    <li onclick="incrementClicks(this)" class="grid-item" id="volt">Volt</li>
    <li onclick="incrementClicks(this)" class="grid-item" id="vvd">VVD</li>
</ul>

now i don’t know how to make a JavaScript to sort the list based on the amount of clicks. so on popularity? is there any one who can help
i don’t really have experience with JavaScript.

i tried somethings but they didn’t work.

Answers

As mentioned by @Barmer; you can implement your requirement using data-clicks attribute. I have removed some of the lines from your code. Something like:

const listItems = document.querySelectorAll('.grid-item');
const list = document.getElementById('Partijensort');

list.addEventListener('click', function(e) {
    if (e.target.classList.contains('grid-item')) {
        let clicks = event.target.getAttribute('data-clicks') ?? 0;
        event.target.setAttribute('data-clicks', ++clicks);
        sortListItems();
    }
});

function sortListItems() {
  const listItemsArr = Array.from(listItems);
  listItemsArr.sort(function(a, b) {
    const clicksA = a.getAttribute('data-clicks') ?? 0;
    const clicksB = b.getAttribute('data-clicks') ?? 0;
    return clicksB - clicksA;
  });
  listItemsArr.forEach(function(listItem) {
    list.appendChild(listItem);
  });
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  align-self: center;
  justify-self: center;
  width: 80vw;
  margin: auto;
}

.grid-item {
  align-self: center;
  justify-self: center;
  font-size: 1em;
  text-align: center;
  height: 10vw;
  width: 10vw;
  margin-top: 1vw;
  filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.25));
}

<ul id="Partijensort" class="grid-container">
  <li data-clicks="0" class="grid-item" id="plus">50plus</li>
  <li data-clicks="0" class="grid-item" id="bbb">bbb </li>
  <li data-clicks="0" class="grid-item" id="bvnl">bvnl</li>
  <li data-clicks="0" class="grid-item" id="cda">cda</li>
  <li data-clicks="0" class="grid-item" id="pvv">PVV</li>
</ul>

Here’s how you can sort a list with CSS 🤣 :

function orderChild(event) {
  let li = event.target.closest('.order-me')
  if (li) li.style.order -= 1;
}
document.querySelector('.grid-container').onclick = orderChild

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  align-self: center;
  justify-self: center;
  margin: auto;
}

.grid-item {
  align-self: center;
  justify-self: center;
  text-align: center;
}

.grid-item::after{
  content: 'style="' attr(style) '"';
  display: block;
}

<ul class="grid-container" onclick="orderChild">
    <li class="grid-item order-me">50plus</li>
    <li class="grid-item order-me">bbb </li>
    <li class="grid-item order-me">bvnl</li>
    <li class="grid-item order-me">cda</li>
    <li class="grid-item order-me">PVV</li>
    <li class="grid-item order-me">christenunie</li>
    <li class="grid-item order-me">D66</li>
    <li class="grid-item order-me">Denk</li>
    <li class="grid-item order-me">FVD</li>
    <li class="grid-item order-me">JA21</li>
    <li class="grid-item order-me">NSC</li>
    <li class="grid-item order-me">PVDAGROENLINKS</li>
    <li class="grid-item order-me">PVDD</li>
    <li class="grid-item order-me">SGP</li>
    <li class="grid-item order-me">SP</li>
    <li class="grid-item order-me">Volt</li>
    <li class="grid-item order-me">VVD</li>
</ul>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to sort a list by the amount of clicks

Answers