Manipolare il DOM: Usare le Tab in Javascript

Che cosa realizzeremo in questo progetto ?

In questo progetto andremo a realizzare una semplice pagina web che mostra agli utenti di un centro sportivo i campi che è possibile affittare.

La peculiarità di questo progetto è la presenza di alcuni bottoni che permettono di filtrare i campi presenti in base alla categpria di sport a cui appartengono. Questi pulsanti verranno creati in maniera dinamica, e ne sarà presente uno per ogni sport che è possibile praticare all'interno del centro.

All'interno del progetto troverete un array di oggetti denominato "campi". Ogni oggetto rappresenterà un campo sportivo con tutte le sue caratteristiche e le informazioni che andremo a visualizzare.

Selezioniamo i nodi dal DOM

Come prima cosa andremo a selezionare i nodi dal DOM. Selezioneremo il contenitore della lista di campi, ed il contenitore in cui inietteremo i pulsanti dopo averli creati.

const listCenter = document.querySelector(".list-center");
const btnContainer = document.querySelector(".buttons");

Mostrare tutti gli elementi al primo caricamento

A questo punto aggiungiamo un addEventListener sull'oggetto globale window che aspetta l'evento DOMContentLoaded. Nella callback andremo ad invocare due funzioni che saranno diplayListItems e displayListButtons, che serviranno rispetttivamente a visualizzare i campi ed i bottoni.

window.addEventListener("DOMContentLoaded", function () {
  diplayListItems(campi);
  displayListButtons();
});

A questo punto andiamo a scrivere queste due funzioni.

Iniettare una struttura HTML tramite Javascript

Scriviamo la funzione displayListItems, e facciamo in modo che aspetti un argomento, che sarà poi l'array di oggetti contenente le informazioni sui campi. All'interno della funzione, prenderemo l'argomento e lo andremo a ciclare tramite il metodo map. Questo metodo ci permette di scrivere una callback che verrà applicata a tutti gli elementi presenti nell'array su cui si sta lavorando.

Noi in questo caso andremo a fare semplicemente il return fi una stringa che sarà la struttura HTML di ogni campo. La scriveremo andando ad utilizzare una template literal string, in quanto ci permette di passare all'interno della stringa delle variabili, utilizzando una speciale sintassi composta così: ${nomeVariabile}

Al termine di questa funzione andremo, tramite il metodo innerHTML ad iniettare la struttura appena scritta all'interno del nodo listcenter che abbiamo catturato precedentemente.

const diplayListItems = (listItems) => {
  let displayList = listItems.map(function (item) {
    return `<article class="list-item">
          <img src=${item.img} alt=${item.title} class="img" />
          <div class="item-info">
            <div class="info-header">
              <h4 class="name">${item.title}</h4>
              <h4 class="price">${item.price}€/ora</h4>
            </div>
            <p class="item-text">
              ${item.description}
            </p>
          </div>
        </article>`;
  });
  displayList = displayList.join("");
  listCenter.innerHTML = displayList;
}

Creare i bottoni dinamicamente

A questo punto ci siamo occupati della visualizzazione dei campi all'interno della pagina. Ora ci concentreremo sulla creazione dei bottoni che ci permetterenno di filtrare tra i campi sportivi in base alla loro categoria.

Per prima cosa dobbiamo capire quali sono tutte le categorie presenti nell'array campi. Per farlo creeremo un array utilizzando il metodo reduce sull'array campi. Questo metodo ci permette di ottenere un array che non presenta valori duplicati, contenente tutte le categorie possibili. Possiamo passare come secondo parametro l'array di partenza che verra riempito successivamente. In questo caso passiamo un array che presenta solo la stringa "all".

Successivamente creiamo la struttura HTML di ogni bottone ciclando sull'array appena ottenuto tramite il metodo map, assicutandoci che ogni bottone abbia la classe "filter-btn" e l'attributo data-id settatato sulla categoria del pulsante. Fatto cio andremo ad iniettare nel DOM il risultato appena ottenuto.

La prossima mossa è quella di selezionare dal dom tramite querySelectorAll tutti gli elementi che hanno la classe "filter-btn". Prendiamo la NodeList che ci viene restituita e andiamo ad aggiungere un addEventListener. Utiliziamo l' event object che ci permette di capire su quale bottone abbiamo premuto, ci permette di accedere all'attributo data-id e quindi di accedere alla categopria a cui il pulsante fa riferimento.

Avendo questo dato possiamo usare il metodo filter sull'array campi facendoci restituire solo i campi appartenenti alla categoria appena selezionata. Fatto ciò, possiamo invocare la funzione displayListItems passando come parametro l'array di oggetti ottenuto dopo il filter.

function displayListButtons() {
  const categories = campi.reduce(
     (values, item) => {
      if (!values.includes(item.category)) {
        values.push(item.category);
      }
      return values;
    },
    ["all"]
  );
  const categoryBtns = categories
    .map((category) => {
      return `<button type="button" class="filter-btn" data-id=${category}>
          ${category}
        </button>`;
    })
    .join("");

  btnContainer.innerHTML = categoryBtns;

  const filterBtns = btnContainer.querySelectorAll(".filter-btn");

  filterBtns.forEach((btn) => {
    btn.addEventListener("click", (e) => {
      const category = e.currentTarget.dataset.id;
      const listCategory = campi.filter((listItem) => {  
        if (listItem.category === category) {
          return listItem;
        }
      });

      if (category === "all") {
        diplayListItems(campi);
      } else {
        diplayListItems(listCategory);
      }
    });
  });
}