Jquery Method Loop

by Ace Tributon

HTML

<style id='phStyle'></style>
<div class="blue">A simple test really</div>

JavaScript

/*
 *NEVER RUN FAT ARROWS IN THE BEGINNING
 *SYNTAX IN JQUERY EXTENSION ARRAY
 *because 'this' doesnt exist in es6
*/

var i,
	$$=[
    [
      'border',
      'colorText',
      'margin',
      'padding',
      'radius',
      'bgColor'
    ],
    [
      function (type,color,thick){this.each(()=>{$(this).css('border',`${type} ${color} ${thick}`);});return this;},
      function (color){this.each(()=>{$(this).css("color",color);});return this;},
      function (thick){this.each(()=>{$(this).css('margin',thick);});return this;},
      function (thick){this.each(()=>{$(this).css('padding',thick);});return this;},
      function (radii){this.each(()=>{$(this).css('border-radius',radii);});return this;},
      function (color){this.each(()=>{$(this).css("background-color",color);});return this;},
    ]
  ],
  
  s=(ele,classes,...input)=>`<${ele} class='${classes}'>${input.join('')}</${ele}>`,
  e=(ele,...input)=>`<${ele}>${input.join('')}</${ele}>`,
  //short codes the multidimensional array
  //as a simple and effective function
  x=(a,b)=>$$[a][b]
;

//creates a new jquery method and its property
//Yes you can do variable[i]
//in alternative to i<variable.length
for(i=0;x(0,i);i++){$.fn[x(0,i)]=x(1,i);}

//test result?

//CSS| 
$('#phStyle').html(`
  	*{margin:auto;box-sizing:border-box;}
  	.content{border:solid green 5px;margin:1% auto;background-color:white;border-radius:15px;}
    #erase, #apply{height:auto;width:10%;border-radius:15px;}
    .wrap{padding:2%;text-align:center;width:100%;border:black solid 5px;border-radius:15px;background-color:#ddd;}
    .inputs{border:inset #888 5px;border-radius:35px;background-color:#fff}
    .content{background-color:#ddd;padding:1%;}
    .blue *{padding:1%;}
`);

//CONTENT|
$(".blue")
	.border('solid','blue','5px')
  .padding('5%')
  .bgColor('blue')
  .html(
    s('div','wrap',
      s('div','ree',
      	e('p','Hello world!'),
        e('p','Are you ready?'),
        s('div','inputs',`
          <p>Testing...