Add and Erase Functions

handy functions created with looping

by Ace Tributon

HTML

<style id="phStyle"></style>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class='container'>
  <div class='status'>
  <div class='inner-status'>
    Please enable your browser to run scripts if it is turned off, thank you kindly. If you happen to see this in error if JavaScript is enabled, there is a bug going on. And is in due process of being fixed!</div>
  </div>
  <div class='infect'>
    <ul>This Content Covers:
      <li>Infestation</li>
      <li>Charger</li>
      <li>Ancient</li>
      <li>Boiler</li>
      <li>Runner</li>
      <li>Crawler</li>
    </ul>
  </div>
  <div class='parenthesis'>
    <p>
      The basics of Parenthesis Script
    </p>
  </div>
</div>
<script async>
  /* SYNTAX: function name(selector,output); */
  console.time('library');
  let
    c, d, i, bg = 'background-',
    group = gather =>gather.join(''),
    $$=gather=>gather,
    $ = (selector, output) => document.querySelectorAll(selector).forEach(output),
    ready = it => group(it),
    loop = (item, callback) => {for (z = 0; item[z]; z++) {callback.call(item[z], z);}},
    each = (array, output) => array.forEach(output),
    filler = `Lorem ipsum dolor sit amet,consectetur adipiscing elit. Fusce libero mi,euismod non orci ac,consequat maximus nulla. Aliquam lacinia tellus scelerisque fringilla lacinia. Sed nec scelerisque est. Aenean id ipsum elit. Mauris vel mauris facilisis urna convallis fermentum non vel massa. Praesent porttitor gravida sem,id ornare mauris lacinia non. Pellentesque sed rutrum magna,ut iaculis mi. Nulla tincidunt eu leo eu laoreet. Mauris viverra faucibus dictum. Cras scelerisque ex ut leo aliquam aliquam. Maecenas vestibulum mollis nisl in sodales.<br />`.repeat(2),
    html = (selector, ...output) => {$(selector, iterate => iterate.innerHTML += group(output));},
    erase = selector => {$(selector, iterate => iterate.innerHTML = "");},
    change = (selector, ...output) => {$(selector, iterate => iterate.innerHTML...

CSS

* {
  margin: 0 auto;
  width: 95%;
  text-decoration: none;
  list-style-type: none;
}

.status {
  background-image: url('https://78.media.tumblr.com/a38c2f1a4692e64097a8496caaf432e9/tumblr_ogvv5sYSxK1qdim8eo1_500.gif');
  background-size: contain;
  background-repeat: no-repeat;
  color: white;
  padding: 8%;
  height:150px auto;
  background-color: #000;
  font-size: 150%;
  width: 85%;
  /*filter:blur(1px);*/
}
.inner-status{
  text-align:right;
  width:60%;
  float:right;
}

JavaScript

//VAR loading blocks
  var
		x = ['intro', 'link', 'inner-wrap', 'footer'],
    tag = ['.append', '.wrap', 'h3', '.inner-content', '.hidden'],
    colorP = ['#000', '#303', '#000', '#000', '#333'],
    colorS = ['#404', 'purple', '#303', '#111', '#202'],
    colorH = ['#fff', null, null, null, null],
    tap = ["", "ancient", "boiler", "runner", "crawler"],
    tagName = ["Charger", "Ancient", "Boiler", "Runner", "Crawler"],
    image = [`1/19/QuadrupedAvatar.png`, `a/a9/HealerAncientDE.png`, `6/63/PussAncient.png`, `1/13/InfestedRunner.png`, `7/78/CrawlerAvatar.png`],
    
    
    para=['para-intro','para-content','para-footer'],
    paraContent=[
    	`<h2>This is the Paranthesis Script:</h2><h4>Where no guts are used!</h4>`,
    	div('inner-para-content',div('para-content','<p>Parenthesis Script is a script typescript where its all written in functions.</p>','<p>Another Blah moment</p>')),
    	'Parenthesis Script is a way of writing code, and should be treated lightly, and with vigurous curiousity.'
    ];

///* OPTIMIZED PARENTHESIS SCRIPT!!!
// ONE FUNCTION | TO RULE THEM ALL!!!
$$(
  hidden('.infect, .parenthesis'),
  html('#phStyle',`*{scroll-behavior: smooth;margin:0 auto;box-sizing:border-box;text-align:center;text-decoration:none;color:#ddd;font-family:'Open Sans',Helvetica;text-shadow:2px 2px #333;}.wrap{padding:1%;border-radius:15px;}.margin{margin-top:15%;padding:8%;}.link{position:sticky;z-index:1;top:0;width:85%;}.append{${bg}color:black;color:white;width:20%;float:left;padding:1%;}.inner-wrap{padding:2%;${bg}color:rgba(0,0,0,0.15);width:85%;}.inner-content{padding:7%;margin:10% auto;border-radius:35px;text-align:left;}.content{margin:2%;${bg}color:rgba(0,0,0,0.0);color:white;text-align:left;}.intro{padding:1%;width:85%;}h3{color:white;padding:1%;text-align:center;}body{${bg}color:#000;padding:4%;}.right{width:80%;float:right;}.jib{padding:3%;${bg}color:rgba(0,0,0,0.0);}.title{padding:7%;border-radius:15px;border:#222 solid...