Improve the JavaScript syntax in the listing.html page about cc-resource-archive HOT 3 OPEN

function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}
// from LOC(Line of Code) 69
var topic = getUrlVars()["topic"];
var language = getUrlVars()["language"];
var medium = getUrlVars()["medium"];

const getQueryParams = () => {
  const params = new URLSearchParams(window.location.search);
  const queryParams = {};
  for (const [key, value] of params) {
    queryParams[key] = value;
  }
  return queryParams;
};

const { topic, language, medium } = getQueryParams();

const getQueryParams = () => {
  const urlParams = new URLSearchParams(window.location.search);
  const params = Object.fromEntries(urlParams.entries());
  return params;
};

const { topic, language, medium } = getQueryParams();

if (!topic && !medium && !language) {
  document.write("<style>.thumbnailbox { display: block; }</style>");
} else {
  let style = "";
  if (topic) style += `.${topic},`;
  if (medium) style += `.${medium},`;
  if (language) style += `.${language},`;
  style = style.slice(0, -1); // Remove last comma
  style += " { display: block; }";
  document.write(`<style>${style}</style>`);
}

let navTopicClass = topic ? ".resourcenavtopicknown" : ".resourcenavtopicunknown";
let navMediumClass = medium ? ".resourcenavmediumknown" : ".resourcenavmediumunknown";
let navLanguageClass = language ? ".resourcenavlanguageknown" : ".resourcenavlanguageunknown";
document.write(`<style>${navTopicClass}, ${navMediumClass}, ${navLanguageClass} { display: block; }</style>`);

const params = new URLSearchParams(window.location.search);
const selectors = ['topic', 'language', 'medium'].map(param => params.get(param)).filter(Boolean).join(', ');

document.write(`<style>${selectors ? `.${selectors} { display: block; }` : '.thumbnailbox { display: block; }'}</style>`);
document.write(`<style>.resourcenavtopic${topic ? 'known' : 'unknown'}, .resourcenavmedium${medium ? 'known' : 'unknown'}, .resourcenavlanguage${language ? 'known' : 'unknown'} { display: block; }</style>`);

// Get URL parameters using URLSearchParams
const params = new URLSearchParams(window.location.search);
// Get values for the topic, language, and medium parameters
const topic = params.get('topic');
const language = params.get('language');
const medium = params.get('medium');
// Combine non-empty parameters into a comma-separated string
const selectors = [topic, language, medium].filter(Boolean).join(', ');

// Construct the first style string based on the selectors string
const style1 = selectors ? `.${selectors} { display: block; }` : '.thumbnailbox { display: block; }';
// Construct the second style string based on the presence of topic, medium, and language
const style2 = `.resourcenavtopic${topic ? 'known' : 'unknown'}, .resourcenavmedium${medium ? 'known' : 'unknown'}, .resourcenavlanguage${language ? 'known' : 'unknown'} { display: block; }`;

// Write the style strings to the document using document.write()
document.write(`<style>${style1}</style>`);
document.write(`<style>${style2}</style>`);