Tile backgrounds

feel free to use these on your site, credit would be appriciated

My Code!

If you are wondering how I coded anything on this website and want to add it to your own website, here you go! I'm putting all of the Javascript I made from scratch for this website here. Feel free to use any of this code for yourself, though a link back would be very appriciated ^-^!

Disclaimer though, I am definitely not an expert at Javascript, so some things might be a little.... strange. I dont even really know why any of this works, I just slapped shit together until it worked for me. If you're proficient at Javascript, I'm so sorry for any psychological damage you're probably going to take reading this lmao

Typing quirk toggle-

For users that want a typing quirk added to their website, this is an accessibilty button so users have the option whether or not to turn it off.

Now, there is a problem with this code lmao. This code only effects text in one div. anything outside of that wont be effected, and anything inside of that div will even if you dont want it to (with the exception of iframes, those are not effected).

I worked around this by putting all of my main content inside the "contain" element, with the warning section and the accessibility menu outside of it, and using iframes for the sections that I want to exclude from this rule. (I'm going to try to find a work around for this, if anyone has any suggestions let me know)

HTML-

put everything that you want to make a div with the class="contain" (or whatever word you want to use instead). keep in mind, any dictionary words in this div will change whether you want them to or not. Also, choose where you want to put your button and place the given code.

example:

    <button class="acbutton" id="tqid" onclick="javascript: off();" > <b>Toggle typing quirk</b></button>
    <div class="contain">
      <p>Hi there! this is an example. 2, f33l, purromise.</p>
    </div>

Javascript-

At the end of the code, right before the </body> tag, copy and paste this code. (I did my best to leave comments with instructions for editing the code, but again, I'm bad at javascript, if you have any questions, let me know and I'll try to help)

<script>
//function to turn typing quirk into normal english. if the button has the value "javascript: off();", then this function will run
  var off = function tqtonormal() {
  //select element with the class "contain". feel free to replace contain with any other class name you wish. just make sure it has the . before it
  var html = document.querySelector('.contain');
  var walker = document.createTreeWalker(html, NodeFilter.SHOW_TEXT);
  var node;
  while (node = walker.nextNode()) {
    node.nodeValue = node.nodeValue
    //feel free to add or change any of these on the list. the current word is in between /\b and \b/g. the word you want to replace it with is in the ''
    .replace(/\b2\b/g, 'to')
    .replace(/\bfavfurite\b/g, 'favorite')
    .replace(/\bf33l\b/g, 'feel')
    .replace(/\bfe11ow\b/g, 'fellow')
    .replace(/\bp33ps\b/g, 'peeps')
    .replace(/\bu\b/g, 'you')
    .replace(/\ba11\b/g, 'all')
    .replace(/\bur\b/g, 'your')
    .replace(/\bpurromise\b/g, 'promise')
    .replace(/\b4\b/g, 'for')
  //after function runs, change the button value from "javascript: off();" to "javascript: on();". this will run the function to change the words back. 
    document.getElementById( "tqid" ).setAttribute( "onClick", "javascript: on();" );
  }
}

//function to turn normal english into typing quirk. if the button has the value "javascript: on();". this will change the button to run the opposite function when clicked.
  var on = function normaltotq() {
    //select element with the class "contain". feel free to replace contain with any other class name you wish. just make sure it has the . before it
  var html = document.querySelector('.contain');
  var walker = document.createTreeWalker(html, NodeFilter.SHOW_TEXT);
  var node;
  while (node = walker.nextNode()) {
    node.nodeValue = node.nodeValue
    //feel free to add or change any of these on the list. the current word is in between /\b and \b/g. the word you want to replace it with is in the ''
    .replace(/\bto\b/g, '2')
    .replace(/\bfavorite\b/g, 'favfurite')
    .replace(/\bfeel\b/g, 'f33l')
    .replace(/\bfellow\b/g, 'fe11ow')
    .replace(/\bpeeps\b/g, 'p33ps')
    .replace(/\byou\b/g, 'u')
    .replace(/\ball\b/g, 'a11')
    .replace(/\byour\b/g, 'ur')
    .replace(/\bpromise\b/g, 'purromise')
    .replace(/\bfor\b/g, '4')
    //after function runs, change the button value from "javascript: off();" to "javascript: off();". this will change the button to run the opposite function when clicked. 
    document.getElementById( "tqid" ).setAttribute( "onClick", "javascript: off();" );
  }
}
</script>

Pausing Gifs

This one wasnt my code, but I'm putting the link here just so that its easier to find. Solaria has a very easy to understand guide that I found really helpful!