dumka.js is an ultra-lightweight JavaScript library of just 8 functions providing 8 common utility functions for DOM manipulation and event handling.
The library is so small you can read and understand the entire codbase in few minutes, not just what it does.
_d.id(i): Selects an element by its ID._d.cl(c): Selects elements by class name._d.tag(tg): Selects elements by tag name._d.first(sl): Selects the first element matching the CSS selector._d.all(sl): Selects all elements matching the CSS selector._d.when(i, ev, fn): For element with id i, when event ev happens (eg. 'click'), execute function fn_d.inform(el, msg, type): Displays an inline message (error, warning, info, ok) next to an element for 5 seconds._d.docReady(fn): Executes a function when the document is fully loaded.HTML:
<div id="example" class="sample">Hello World</div>
JavaScript:
const element = _d.id("example");
console.log(element.textContent); // Outputs: Hello World
HTML:
<button id="clickMe">Click Me</button>
JavaScript:
_d.when("clickMe", "click", () => alert("Button Clicked!"));
HTML:
<input id="username" placeholder="Enter your username" />
JavaScript:
_d.inform(_d.id("username"), "Username is required", "error");
What does inform do?
The inform function creates a temporary inline message next to the specified element. The message can be styled based on the type:
error: Red background (LightSalmon).warning: Yellow background.info: Blue background (PaleTurquoise).success: Green background (LightGreen).The message also automatically disappears after 5 seconds.
Example:
_d.inform(_d.id("username"), "This field cannot be empty", "error");
JavaScript:
_d.docReady(() => {
console.log("Document is fully loaded and parsed!");
});
const _d = {
id: function id(i) { return document.getElementById(i) },
cl: function cl(c) { return document.getElementsByClassName(c) },
tag: function tag(tg) { return document.getElementsByTagName(tg) },
first: function first(sl) { return document.querySelector(sl) },
all: function all(sl) { return document.querySelectorAll(sl) },
when: function when(i, ev, fn){
const el = document.getElementById(i);
if (el) el.addEventListener(ev, fn);
},
inform: function inform(el, msg, type) {
const message = document.createElement("span");
message.className = "message";
message.textContent = msg;
switch (type) {
case "error":
message.style.background = "LightSalmon";
break;
case "warning":
message.style.background = "yellow";
break;
case "info":
message.style.background = "PaleTurquoise";
break;
case "success":
message.style.background = "LightGreen";
break;
default:
message.style.background = "white";
}
el.insertAdjacentElement("afterend", message);
setTimeout(() => message.remove(), 5000);
},
docReady: function docReady(fn) {
if (document.readyState !== "loading") {
fn();
} else {
document.addEventListener("DOMContentLoaded", fn);
}
},
};