JSFiddle - React, Tailwind, and code Playground

by João Vitor Scheuermann

HTML

<div id="teste"></div>

CSS

#teste {
  position: absolute;
  left: 0px;
  top: 0px;
}

.teste {
  transform: translate3d(0, 50px, 0);
  transition: all .5s ease;
}

JavaScript

function style(element, key, value) {
    if (key instanceof Object) {
        for (var objKey in key) {
            element.style[objKey] = key[objKey];
        }
    } else {
        if (value) {
            element.style[key] = value;
            return element
        } else {
            return window.getComputedStyle(element, null).getPropertyValue(key);
        }
    }
}

function getHeight(element) {
    return element.getBoundingClientRect().height
}

function getWidth(element) {
    return element.getBoundingClientRect().width
}

function fitText(_el, text, obj) {
    var element = _el;
    var elementHeight = getHeight(element);
    var elementWidth = getWidth(element);

    var textElement = document.createElement('span');   
    textElement.innerHTML = text;
    element.appendChild(textElement);

    var FontSize = obj.fontDefaultSize || 100;

    var targetWidth = obj.maxWidth || elementWidth;    
    while (getWidth(textElement) > targetWidth) {
        element.style.fontSize = --FontSize + 'px';
    }

    var targetHeight = obj.maxHeight || elementHeight;
    while (getHeight(textElement) > targetHeight) {
        element.style.fontSize = --FontSize + 'px';
    }
    return element;
}



function _(element) {
		this.DOM = document.querySelector(element);	
    return this;
}

_.prototype.style = function(key, value) {  	
  style(this.DOM, key, value);    
  return this;
};

_.prototype.fitText = function(text, config) {  	
  fitText(this.DOM, text, config);   
  return this;
};

function el (element) {		
		return new _(element);
}



el("#teste").style({ backgroundColor: "red", width: "50px", height: "50px"}).fitText("hue hue hue hue hue hue hue hue hue hue hue ", {maxWidth: 50, maxHeight:50});