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

What is the method for calling a function in a JavaScript file?

Stylish Material Design Icons

The edit functionality in jqGrid does not function properly if custom search parameters are designated

Chrome on IOS: Experiencing screen freezing while scrolling

The navigation menu that usually appears on mobile devices is surfacing on desktop screens instead - update: images now

Tips for setting a Bootstrap 3 dropdown menu to automatically open when located within a collapsed navbar

Problem with fetching Grails

Creating a Vue.js component that integrates a Bl.ocks.org graph

What causes the jQuery mouseenter events to be activated in a random sequence?

Tips for improving the styling of a django form with mixed elements

Is it possible to assign a specific value to a row within a table?

Deliver data in batches of ten when the endpoint is accessed

What is the method for utilizing the onmouseover function to emphasize a specific part of an SVG graphic?

Sending form array information using jQuery AJAX

A guide on transforming a JSON object representing an HTML element into a live HTML element for display on a webpage using C#, JavaScript, or jQuery

ng-grid defines different cellClass based on the value of the field

Error: JQuery's on() function is not defined

CSS: Handling Background Images Responsively

Sending a Variable and List to a Controller using Ajax

Issue with Express.js: "opencv" module not found within a Docker container