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);