const allTag = (rootElement) => {
  let tags = [],
    counts = {};

  const explore = (element) => {
    for (const child of element.children) {
      tags.push(child.nodeName);
      explore(child);
    }
  };

  explore(rootElement);

  const getWordCnt = (arr) => {
    return arr.reduce((acc, tag) => {
      acc[tag] = (acc[tag] || 0) + 1;
      return acc;
    }, {});
  };

  counts = getWordCnt(tags);

  const sortCounts = (obj) => {
    let sortedEntries = Object.entries(obj).sort((a, b) => b[1] - a[1]);
    // return Object.fromEntries(sortedEntries);
    return sortedEntries
  };

  return sortCounts(counts);
};

const tagCounts = allTag(document.body);
const sortedKeys = tagCounts.map((entry) => entry[0].toLowerCase());
console.log(sortedKeys);

// Create a table for displaying results
const createTable = (data) => {
  let table = document.createElement("table");
  table.style.border = "1px solid black";
  table.style.borderCollapse = "collapse";
  table.style.width = "50%";

  let headerRow = table.insertRow();
  let tagHeader = headerRow.insertCell(0);
  let countHeader = headerRow.insertCell(1);

  tagHeader.textContent = "Tag Name";
  countHeader.textContent = "Count";

  tagHeader.style.border = countHeader.style.border = "1px solid black";
  tagHeader.style.padding = countHeader.style.padding = "5px";
  tagHeader.style.fontWeight = "bold";
  countHeader.style.fontWeight = "bold";

  for (let [tag, count] of (data)) {
    let row = table.insertRow();
    let tagCell = row.insertCell(0);
    let countCell = row.insertCell(1);

    tagCell.textContent = tag;
    countCell.textContent = count;

    tagCell.style.border = countCell.style.border = "1px solid black";
    tagCell.style.padding = countCell.style.padding = "5px";
  }

  document.body.appendChild(table);
};

// Display the table
createTable(tagCounts);

help

const tags = [

  "section",
  "article",
  "h1",
  "h2",
  "p",
  "article",
  "p",
  "p",
  "span",
  "span",
  "span",
];

//find unique tags
const uniqueTags = [...new Set(tags)];
console.log("Unique Tags using Set:", uniqueTags);

//find unique tags whitout Set
const uniqueTagsWithoutSet = tags.filter(
  (tag, index) => tags.indexOf(tag) === index
);
console.log("Unique Tags without Set:", uniqueTagsWithoutSet);

//find unique tags using reduce
const uniqueTagsUsingReduce = tags.reduce((acc, tag) => {
  if (!acc.includes(tag)) {
    acc.push(tag);
  }
  return acc;
}, []);
console.log("Unique Tags using reduce:", uniqueTagsUsingReduce);

// find occurrences of each tag using reduce
const tagOccurrences = tags.reduce((acc, tag) => {
  acc[tag] = (acc[tag] || 0) + 1;
  return acc;
}, {});
console.log("Tag Occurrences using reduce:", tagOccurrences);

// find the most frequent tag using reduce

const mostFrequentTag = Object.entries(tagOccurrences).reduce(
  (max, current) => (current[1] > max[1] ? current : max),
  ["", 0]
);
console.log("Most Frequent Tag using reduce:", mostFrequentTag);

const listOfRandomTags = ["section", "footer"];

// Check if all tags in listOfRandomTags are present in uniqueTagsUsingReduce
const allTagsPresent = listOfRandomTags.every((tag) =>
  uniqueTagsUsingReduce.includes(tag)
);
console.log("All tags present in uniqueTagsUsingReduce:", allTagsPresent);

// Check if any tag in listOfRandomTags is present in uniqueTagsUsingReduce
const anyTagPresent = listOfRandomTags.some((tag) =>
  uniqueTagsUsingReduce.includes(tag)
);

console.log("Any tag present in uniqueTagsUsingReduce:", anyTagPresent);

// groupe tagOccurrences by two values sup of occurences = 2 and less than or equal to 2

const groupedTagOccurrences = Object.entries(tagOccurrences).reduce(
  (acc, [tag, count]) => {
    if (count > 2) {
      acc.moreThanTwo.push({ tag, count });
    } else {
      acc.twoOrLess.push({ tag, count });
    }
    return acc;
  },
  { moreThanTwo: [], twoOrLess: [] }
);
console.log("Grouped Tag Occurrences:", groupedTagOccurrences);

🌶️Donnez l'équivalent de la méthode closest. La méthode closest() traverse l'élément courant et ses parents (en direction de la racine) jusqu'à trouver un nœud qui correspond aux sélecteurs exprimés par la chaîne de caractères passée en argument. Elle renverra l'élément ou l'ancêtre le plus proche qui correspond. Si aucun élément ne correspond, la méthode renvoie null.

Vous devez utilisez element.matches(selector). La méthode matches() renvoie true lorsque l'élément peut être sélectionné par le sélecteur défini par la chaîne passée en paramètre ; sinon, elle renvoie false.

🍕On dispose d'une BD (un tableau de pizzas) et d'une carte (Map). Chaque élément de la carte (Map) associe un emoji représentant un ingrédient à son prix.

pizzas = [{ name:"queen", toppings: ["🐷","🍄","🍅","🧀"], crust:"yeasted|flatbread" }, … ] prices = new Map([ 🍅", 1], …]

1) Donnez le code pour afficher un tableau.

Utilisez