JSFiddle - React, Tailwind, and code Playground

jquery replacement with modern dom api

by Travis Almand

HTML

<div id="div1" class="border">div1</div>
<div id="div2" class="blue">div2</div>

CSS

.blue {
  color: blue;
}
.bold {
  font-weight: bold;
}
.border {
  border: 1px solid red;
}

JavaScript

console.clear();

function talmand(selector) {
	if (selector === null) return;
  
  var self = {
  	elements: document.querySelectorAll(selector),
  	addClass: function () {
      for (var i = 0; i < arguments.length; i++) {
      	for (var j = 0; j < self.elements.length; j++) {
        	self.elements[j].classList.add(arguments[i]);
        }
      }
      return self;
    },
    removeClass: function () {
    	for (var i = 0; i < arguments.length; i++) {
      	for (var j = 0; j < self.elements.length; j++) {
        	self.elements[j].classList.remove(arguments[i]);
        }
      }
      return self;
    },
    toggleClass: function () {
    	for (var i = 0; i < arguments.length; i++) {
      	for (var j = 0; j < self.elements.length; j++) {
        	self.elements[j].classList.toggle(arguments[i]);
        }
      }
      return self;
    },
    hasClass: function (className) {
    	for (var i = 0; i < self.elements.length; i++) {
      	return self.elements[i].classList.contains(className);
      }
    },
    on: function (evt, func) {
    	for (var i = 0; i < self.elements.length; i++) {
      	self.elements[i].addEventListener(evt, func);
      }
      return self;
    },
    off: function (evt, func) {
    	for (var i = 0; i < self.elements.length; i++) {
      	self.elements[i].removeEventListener(evt, func);
      }
      return self;
    },
    style: function (styleObj) {
    	for (var i = 0; i < self.elements.length; i++) {
      	for (let key in styleObj) {
        	if (styleObj.hasOwnProperty(key)){
          	self.elements[i].style[key] = styleObj[key];
          }
        }
      }
    }
  }
  
  return self;
}

talmand('#div1').toggleClass('border', 'blue');
console.log(talmand('div').hasClass('red'));
talmand('div').on('click', test);
talmand('#div2').off('click', test);


function test (e) {
	console.log(e.currentTarget);
}