JSFiddle - React, Tailwind, and code Playground
by Michael Prosser
HTML
<div class="temp">
Temp item
</div>
<img class="img" src="https://sleekinteractive.com/assets/solarsystem.jpg" />
CSS
img{
transition:all 0.5s;
pointer-events:none;
}
img.hover{
transform:scale(1.2);
}
JavaScript
// cloverfield.js written by Michael J Prosser as a minified DOM manipulation library
var _ = function(cssSelector){
this.debug = true;
if(cssSelector){
var element;
var type = 'string';
// check if the selector is a string
if(typeof(cssSelector) === 'string'){
element = document.querySelectorAll(cssSelector);
} else {
element = cssSelector;
type = 'object';
}
if(element){
element.addNode = function(tag,html){
element.forEach(function(el){
var p = el;
var newElement = document.createElement(tag);
newElement.innerHTML = html;
p.appendChild(newElement);
});
return element;
}
element.removeNode = function(object){
// check if the selector is a string
if(type == 'string'){
var elements = document.querySelectorAll(object);
elements.forEach(function(p){
p.remove();
});
} else {
element.remove();
}
}
element.addClass = function(className){
if(type == 'string'){
element.forEach(function(p){
p.classList.add(className);
});
} else {
element.classList.add(className);
}
return element;
}
element.removeClass = function(className){
if(type == 'string'){
element.forEach(function(p){
p.classList.remove(className);
});
} else {
element.classList.remove(className);
}
return element;
}
element.hasClass = function(className){
var has = false;
if(type == 'string'){
element.forEach(function(p){
if(p.classList.contains(className)){
has = true;
}
});
} else {
if(element.classList.contains(className)){
has = true;
}
}
return has;
}
element.hasClass =...