JSFiddle - React, Tailwind, and code Playground

by Felipe Alfaro

HTML

<header>header</header>
<div id="sidebar">sidebar</div>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>
<footer>footer</footer>

CSS

header {
  height: 90px;
  background: gray;
}

footer {
  height: 190px;
  background: gray;
}

JavaScript

var $aui = (function (doc) {

  function auiCore(selector) {
  	return new AUIElement(selector);
  }
  
  Object.assign(auiCore, {
  	render: coreRender
  });
  
  function coreRender() {
  	console.warn('RENDER');
  }

  function AUIElement(selector) {
  	var self = this;
    
  	if (typeof selector === 'string') {
    	if (selector[0] === '#') {
      	self.elements = [document.querySelector(selector)];
      }
      else {
      	self.elements = [];
        Array.prototype.forEach.call(document.querySelectorAll(selector), function (element) {
        	self.elements.push(element);
        });
      }
    	
    }
  }
  
  Object.assign(AUIElement.prototype, {
  	between: fnBetween
  });

	function fnBetween(topElement, bottomElement) {
  	topElement = new AUIElement(topElement);
    bottomElement = new AUIElement(bottomElement);
    console.log(topElement, bottomElement);
    return this;
  }
  
	return auiCore;

})(document);




console.clear();
$aui('#caca').between('header', 'footer');