Steps for organizing a list based on the number of clicks

Question

Steps for organizing a list based on the number of clicks

I've created an HTML list with images of political party logos. Each logo is a grid item that can be clicked on. I want to sort the list based on the number of clicks each logo receives, essentially ranking them by popularity. However, I'm not sure how to write the JavaScript code to accomplish this task as I have limited experience with JavaScript.

If anyone has expertise in JavaScript and can provide guidance or assistance in creating the sorting functionality, it would be greatly appreciated. I've attempted a few approaches myself, but so far none have been successful.

javascript html css

Answer 1

Answer №1

Want to organize a list using CSS? Here's how you can do it 🤣 :

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

.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="adjustOrder">
    <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>

Answer 2

Want to organize a list using CSS? Here's how you can do it 🤣 :

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

.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="adjustOrder">
    <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>

Answer 3

Answer №2

As pointed out by @Barmer;, one way to achieve your goal is by utilizing the data-clicks attribute. I have made some adjustments to your code. Here's an example:

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>

Answer 4

As pointed out by @Barmer;, one way to achieve your goal is by utilizing the data-clicks attribute. I have made some adjustments to your code. Here's an example:

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>

Steps for organizing a list based on the number of clicks

Answer №1

Answer №2

Similar questions

Incorporating a closing screen into a game built with Canvas and jQuery

Guide on submitting a form using a custom AJAX function based on the id or class parameter

Adding a text field on top of a div based on the dropdown value selection

What is the best way to display all divs once more after all filter-checkboxes have been unchecked?

After updating the INNERHTML, the NAV tag content is no longer functional

Altering the input type of a cloned element in Internet Explorer results in the loss of the value

Determining the height of a different element using only CSS, Stylus, or Nib

Unexpected response received from ajax call when supplying data to flot.js

Confirming delete with jQuery and AJAX

There is no record of the property's history

Error: The module you are trying to import from the package is not found. Please check the package path and make sure that

What's preventing me from utilizing Leaflet Map on Next.js despite attempting Dynamic Import?

performing asynchronous iteration with HTTP PUT requests

Response from Socket.io: What is the best way for the server to respond to all clients after receiving input from multiple clients?

I'm having an issue with my Bootstrap tabs - they seem to be unresponsive when clicked

I encountered a "Bad Request" error when trying to login through my nodejs server, and I'm unsure of the reason behind this issue. As a beginner in nodejs, I'm still learning the ins and

retrieve the list of css stylesheets connected to a webpage

What is the best way to transfer a PHP string to JavaScript/JQuery for use in a function?

Ensuring continuity of session in WebRTC audio calls post page refresh

Django static files reference