JSFiddle - React, Tailwind, and code Playground
HTML
<ul>
<li>Rum.js</li>
<li>Yum!</li>
</ul>
CSS
.foo{
font-size:30px;
color:red;
}
.foo2{
font-size:60px;
color:blue;
}
JavaScript
var rum = function(selector){
return new rum.fn.init(selector);
};
rum.fn = rum.prototype = {
constructor:rum,
init:function(selector){
var nodes = document.querySelectorAll(selector);
for (var i = 0; i < nodes.length; i++) {
this[i] = nodes[i];
}
this.length = nodes.length;
return this;
},
rum:'0.1',
addClass:function(classString){
this.each(function(){
this.classList.add(classString);
});
return this;
},
each:function(callback){
return rum.each(this, callback);
}
};
rum.each = function(object, callback){
var name;
for (name in object) {
if (callback.call( object[ name ], name, object[ name ] ) === false){
break;
}
}
return object;
};
rum.fn.init.prototype = rum.fn;
//ok use rum like one uses jQuery
rum('li').addClass('foo2');