Visualising margins for UX Debugging [8 of 8]

visualising-margins-for-ux-debugging_h.js

function getUrlParam(param, url) {
  let theUrl = url;
  if (!url) {
    theUrl = location.href;
  }
  const theParam = param.replace(/[[]/, '\\[').replace(/[\]]/, '\\]');
  const regexLogic = `[\\?&]${theParam}=([^&#]*)`;
  const regex = new RegExp(regexLogic);
  const results = regex.exec(theUrl);
  return results === null ? null : results[1];
}

function addWrapperClassIfUrlParam(wrapperClass, param) {
  const b = document.querySelector('body');
  // Only proceed if 'body' is found on the page
  if (b !== null) {
    if (getUrlParam(param)) {
      b.classList.add(wrapperClass);
    }
  }
}

document.addEventListener('DOMContentLoaded', () => {
  addWrapperClassIfUrlParam('show-helpers', 'helpers');
});