Code Snippets

Blog with tagging

base for my blog page, my layout is based on Sadgrl's Layout Builder so just plug these codes in the most fitting spots on your own layout.
Filtering based upon this w3schools tutorial
Code + Demo

HTML

<div class=tags>
  <h3>Tags</h3>
  <div id="myBtnContainer">
    <button class="btn active" id="defaultOpen" onclick="filterSelection('all')"> Show all</button>
    <button class="btn" onclick="filterSelection('tag1')"> tag 1</button>
    <button class="btn" onclick="filterSelection('tag2')"> tag 2</button>
    <button class="btn" onclick="filterSelection('tag3')"> tag 3</button>
  </div>
</div>
<div class=mainread>
  <h3>Blog Entries</h3>
  <div class="posts">
    <div class="Entry tag1">
      <h4>Blog title<strong> - date</strong></h4>
      <dl>
        <dt>Mood:</dt>
          <dd>my mood</dd>
        <dt>Listening to:</dt>
          <dd>some noise</dd>
        <dt>Watching:</dt>
          <dd>videos</dd>
        <dt>Eating:</dt>
          <dd>food</dd>
        <dt>Drinking:</dt>
          <dd>drink</dd>
      </dl>
      <p>Blog entry text</p>
    </div>
    <div class="Entry tag3">
      <h4>Blog title<strong> - date</strong></h4>
      <dl>
        <dt>Mood:</dt>
          <dd>my mood</dd>
        <dt>Listening to:</dt>
          <dd>some noise</dd>
        <dt>Watching:</dt>
          <dd>videos</dd>
        <dt>Eating:</dt>
          <dd>food</dd>
        <dt>Drinking:</dt>
          <dd>drink</dd>
      </dl>
      <p>Blog entry text</p>
    </div>
  </div>
</div>

CSS

body{
  display: flex;
  gap: 20px;
}

.mainread{
  width:500px;
}

.btn {
  border: none;
  outline: none;
  width: 100px;
  cursor: pointer;
  display: block;
  text-align: left;
  color: #cc0000;
  background-color: transparent;
  border-radius: 0px 70px 70px 0px;
}

.btn::before{
  content: '•';
}

.btn:hover {
  color: black;
}

.btn.active {
  background-color: #cc0000;
  color: black;
}

.Entry{
  border: #cc0000 solid 1px;
  background: #555;
  display: none;
  margin-bottom: 20px;
  color: white;
}

.show {
  display: block;
}

.posts{
  overflow: hidden;
}

h3{margin-bottom: 4px;}

h4{
  font-size: 20px;
  margin: 0px;
  border-bottom: #cc0000 solid 1px;
  background: #151515;
  padding: 4px;
}

h4 strong{
  font-size: 15px;
}

.Entry p{
  margin: 6px;
}
.Entry a{
  font-weight: bold;
  background-color: #151515;
}

dl{
  background: #000000;
  box-shadow: inset rgba(255, 255, 255, 0.281) 0px 0px 5px;
  margin: 0px 0px 2px;
  padding: 4px;
  border-bottom: #cc0000 solid 1px;
}

dt{
  background: rgba(255, 255, 255, 0.666);
  box-shadow: inset rgb(0, 0, 0) 0px 0px 5px;
  color: black;
  font-weight: bold;
  padding: 0px 2px 1px;
  width: 100px;
}

dd{
  margin-left: 10px;
  margin-bottom: 2px;
}

JS

// clicks on the show all tag on page load. i had an issue with loading all at the start so this is a fix for that
window.onload = function(){
  document.getElementById('defaultOpen').click();
  
var scriptTag = document.createElement("script");
scriptTag.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js";
document.getElementsByTagName("head")[0].appendChild(scriptTag);
}

filterSelection("all")
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("Entry");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function(){
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

Custom Emojis / Emotes

discord user missing silly custom emotes? yeah me too. let's use some together on our sites ^^
currently only set to work in paragraph tags.
Code + Demo

JS

// Function to replace text with images
function replaceTextWithImages() {
  // Get all paragraphs on the page
  const paragraphs = document.getElementsByTagName('p');
  
  for (let i = 0; i < paragraphs.length; i++) {
    const paragraph = paragraphs[i];
    
    const regex = /:\w+:/g;
    
    // Replaces the matching text with images
    paragraph.innerHTML = paragraph.innerHTML.replace(regex, function(match) {
      let imgSrc = '';
      switch (match) {
        case ':angry:':
          imgSrc = 'https://www.iconarchive.com/download/i108282/google/noto-emoji-smileys/10074-angry-face.ico';
          break;
        case ':sad:':
          imgSrc = 'https://icons.iconarchive.com/icons/google/noto-emoji-smileys/256/10058-crying-face-icon.png';
          break;
          case ':LMAO:':
          imgSrc = 'https://icons.iconarchive.com/icons/google/noto-emoji-smileys/256/10004-rolling-on-the-floor-laughing-icon.png';
          break;
          case ':alien:':
          imgSrc = 'https://icons.iconarchive.com/icons/google/noto-emoji-smileys/256/10101-alien-icon.png';
          break;
        // Add more cases for other text replacements
        
        default:
          return match;
      }
      
      const img = document.createElement('img');
      img.src = imgSrc;
      
      const computedStyle = window.getComputedStyle(paragraph);
      const fontSize = parseFloat(computedStyle.fontSize);
      
      img.style.width = fontSize + 'px';
      
      return img.outerHTML;
    });
  }
}

// Call the function when the page finishes loading
window.addEventListener('load', replaceTextWithImages);

:onionbye: