JSFiddle - React, Tailwind, and code Playground
HTML
Demonstration of the error class:
<div></div><div></div><div></div>
CSS
div {
width:100px;
height:100px;
position:relative; }
.red {
background-color:#FFCCCC; }
.rounded {
-moz-border-radius: 15px;
border-radius: 15px; }
.edged {
border:solid 2px #FF0000; }
.improper-adorn-label {
margin:2em; }
JavaScript
(function( $ ){
jQuery.fn.adorn = function () {
// Get the arguments array for use in the closure
var $arguments = arguments;
// Maintain chainability
return this.each(function () {
var $this = $(this);
$.each($arguments, function(index, value) {
switch (value.substring(0,1)) {
case "#":
$this.attr("id",value.substring(1));
break;
case ".":
$this.addClass(value.substring(1));
break;
case ">":
$this.appendTo(value.substring(1));
break;
case "a":
$this.attr("alt", value.substring(2));
break;
case "h":
$this.html(value.substring(2));
break;
case "i":
$this.attr("title", value.substring(2));
break;
case "s":
$this.attr("src", value.substring(2));
break;
case "t":
$this.attr("type", value.substring(2));
break;
case "v":
$this.attr("value", value.substring(2));
break;
default:
// if the wrong key was entered, create
// and error class.
$this.addClass("improper-adorn-label");
}
});
});
};
})( jQuery );
$(function() {
$("div").adorn(".red",".rounded",".edged","h:ok","&hahaha");
});