HTML

<!-- SWAP VALUES ON CLICK --> 
<script>
  function setupSwitcher({
    /* Click Trigger Class */
    swapTrigger = "switcher",

    /* Essentials */
    swapText = "swap-text",
    swapDisplay = "swap-display",
    swapClass = "swap-class",
    swapUrl = "swap-url",

    /* Toggle and Add Attributes */
    swapToggleAttribute = "swap-toggle-attribute",
    swapAddAttribute = "swap-add-attribute",
    swapAddAttributeValue = "swap-add-attribute-value",

    /* Replace Attribute Value */
    swapAttributeTarget = "swap-attribute-target",
    swapTargetValue = "swap-target-value"

  } = {}) {
    const swapAll = () => {
      // SWAP TEXT
      document.querySelectorAll(`[${swapText}]`).forEach((swapDomElement) => {
        const nextValue = swapDomElement.getAttribute(swapText);
        const currentValue = swapDomElement.innerText;

        swapDomElement.innerText = nextValue;
        swapDomElement.setAttribute(swapText, currentValue);
      });

      // SWAP DISPLAY
      document.querySelectorAll(`[${swapDisplay}]`).forEach((swapDomElement) => {
        const nextValue = swapDomElement.getAttribute(swapDisplay);
        const currentValue = swapDomElement.style.display;

        swapDomElement.style.display = nextValue;
        swapDomElement.setAttribute(swapDisplay, currentValue);
      });

      // SWAP CLASS
      document.querySelectorAll(`[${swapClass}]`).forEach((swapDomElement) => {
        const nextValue = swapDomElement.getAttribute(swapClass);
        swapDomElement.classList.toggle(nextValue);
      });

      // SWAP URL
      document.querySelectorAll(`[${swapUrl}]`).forEach((swapDomElement) => {
        const nextValue = swapDomElement.getAttribute(swapUrl);
        const currentValue = swapDomElement.href;

        swapDomElement.href = nextValue;
        swapDomElement.setAttribute(swapUrl, currentValue);
      });

      // TOGGLE ATTRIBUTE
      document.querySelectorAll(`[${swapToggleAttribute}]`).forEach((swapDomElement) => {
        const toggleAttribute = swapDomElement.getAttribute(
          swapToggleAttribute
        );
        swapDomElement.toggleAttribute(toggleAttribute);
      });

      // ADD ATTRIBUTE
      document.querySelectorAll(`[${swapAddAttribute}]`).forEach((swapDomElement) => {
        const newAttribute = swapDomElement.getAttribute(swapAddAttribute);
        const newAttributeValue = swapDomElement.getAttribute(
          swapAddAttributeValue
        );

        if (swapDomElement.hasAttribute(newAttribute)) {
          swapDomElement.removeAttribute(newAttribute);
        } else {
          swapDomElement.setAttribute(newAttribute, newAttributeValue);
        }
      });

      // REPLACE ATTRIBUTE VALUE
      document.querySelectorAll(`[${swapAttributeTarget}]`).forEach((swapDomElement) => {
        const attributeTarget = swapDomElement.getAttribute(
          swapAttributeTarget
        );
        let attributeValue = swapDomElement.getAttribute(attributeTarget);
        let newValue = swapDomElement.getAttribute(swapTargetValue);

        swapDomElement.setAttribute(attributeTarget, newValue);
        swapDomElement.setAttribute(swapTargetValue, attributeValue);
      });
    };

    document.querySelectorAll(`.${swapTrigger}`).forEach((switcherDomElement) => {
      switcherDomElement.addEventListener("click", swapAll);
    });
  }

  setupSwitcher();
</script>

Quick Grab

Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.

Save to Favorites

Learn How to Use This

<!-- FIND, STYLE AND REPLACE MATCHING STRINGS --> 
<script>
const targetStrings = [
  {
  	selector: 'h2',
    targetString: 'String 1',
    replacementString: 'String 1 replacement',
    appendedClassName: 'class-name-here',
  },
  {
  	selector: 'p',
    targetString: 'String 2',
    replacementString: 'String 1 replacement',
    appendedClassName: 'class-name-here',
  },
]

function wrapAndReplaceMatches(selector, newClass, wordTarget, replacement) {
  const pattern = new RegExp(`\\b(${wordTarget})\\b`, 'gi');
  const hasClassAttr = newClass ? `class=${newClass}` : ''
  const wrapAndReplace = !replacement
  ? `<span ${hasClassAttr}>$1</span>`
  : `<span ${hasClassAttr}>${replacement}</span>`;
  Array.from(document.querySelectorAll(selector)).forEach((element) => {
		element.innerHTML = element.innerHTML.replace(pattern, wrapAndReplace);
	});
}

document.addEventListener('DOMContentLoaded', () => {
  targetStrings.forEach(({
  	selector,
    targetString,
    replacementString,
    appendedClassName
  }) => {
    wrapAndReplaceMatches(selector, appendedClassName, targetString, replacementString)
  })
});
</script>

Quick Grab

Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.

Save to Favorites

Learn How to Use This

<!-- HTML TABLE --> 
<style>
/* ----------------------------- TABLE STYLES ----------------------------- */
:root {
  /* TABLE COLORS */
  --table-header-font-color: #ffffff;
  --table-header-bg-color: teal;
  --table-header-border-color: #ffffff;
  
  --table-cell-font-color: #777777;
  --table-cell-border-color: #d2d2d2;
  
  --table-bg-color: #ffffff;
  --table-border-color: #ffffff; /* Most Likely won't be seen */
  
  /* TABLE DIMENSIONS */
  --table-header-padding-top-bottom: 12px; /* headers top & bottom padding */
  --table-header-padding-left-right: 10px; /* headers left & right padding */
  --table-heading-font-size: 18px;
  
  --table-cell-padding-top-bottom: 10px;  /* Cells top & bottom padding */
  --table-cell-padding-left-right: 10px;  /* Cells left & right padding */
  --table-cell-font-size: 14px;
  --table-cell-min-width: 200px;
  
  --table-margin-bottom: 48px;
}
/* ----------------------------- END OF TABLE STYLES ----------------------------- */



/* DON'T NEED TO WORRY ABOUT THESE BELOW!!! */
.table-wrap {
	overflow-x: scroll;
  width: 100%;
  margin-bottom: var(--table-margin-bottom);
}

table, th, td {
  border-collapse: collapse;
}

table {
	width: 100%;
  border: 1px solid var(--table-border-color);
  background-color: var(--table-bg-color);
}

th:last-child {
  border-left: 1px solid var(--table-header-bg-color);
  border-top: 1px solid var(--table-header-bg-color);
  border-right: 1px solid var(--table-header-bg-color);
  border-bottom: 1px solid var(--table-header-bg-color);
}

th {
	text-align: left;
  color: var(--table-header-font-color);
  background-color: var(--table-header-bg-color);
  padding: var(--table-header-padding-top-bottom) var(--table-header-padding-left-right);
  font-size: 16px;
  border-left: 1px solid var(--table-header-bg-color);
  border-top: 1px solid var(--table-header-bg-color);
  border-right: 1px solid var(--table-header-border-color);
  border-bottom: 1px solid var(--table-header-bg-color);
  font-size: var(--table-heading-font-size);
}

td {
  color: var(--table-cell-font-color);
  border: 1px solid var(--table-cell-border-color);
	padding: var(--table-cell-padding-top-bottom) var(--table-cell-padding-left-right);
  font-size: var(--table-cell-font-size);
}

th, td {
	min-width: var(--table-cell-min-width);
}
</style>



<!-- ****TABLE CONTENT**** -->
<div class="table-wrap">
  <table>
    <!-- heading Columns -->
    <tr>
      <th>Shoe Type</th>
      <th>Color</th>
      <th>Size</th>
      <th>Details</th>
    </tr>

    <!-- Row 1 -->
    <tr>
      <td>Running</td>
      <td>White/Black</td>
      <td>10.5, 11, 12</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
    </tr>

    <!-- Row 2 -->
    <tr>
      <td>Skateboarding</td>
      <td>Black</td>
      <td>6.5, 7, 8.5, 9, 9.5, 10.5, 12</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
    </tr>

    <!-- Row 3 -->
    <tr>
      <td>Hiking</td>
      <td>Tan</td>
      <td>7, 8.5, 9, 10.5, 11, 12</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
    </tr>
  </table>
</div>

Quick Grab

Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.

Save to Favorites

Learn How to Use This

Know when new crumbs drop!

Never spam. Just honest updates about new snippets!

HTML

Know when new crumbs drop!

Want to contribute to the community?