arkit.js

A lightweight javascript library contains all the frequently used code snippets and hooks with smaller, meaningful names and powerful usage.

Too easy to use

Logging

Take one or more parameters and log them to console

const log = (...args) => args.forEach((arg) => console.log(arg));

Errors

const err = (...args) => args.forEach((arg) => console.error(arg));

Elements Selection

Select single element using querySelector() function

const qs = (selector) => document.querySelector(selector);

Select single element using querySelectorAll() function

const qsa = (selector) => document.querySelectorAll(selector);

Elements Creation

Create single element with the tag name

const create = (tag) => document.createElement(tag);

Batch creating element by passing its all props as args

const creator = (args) => {
  let el = create(args.tag);

  if (args.id) el.id = args.id;
  if (args.cls) el.className = args.cls;
  if (args.text) el.innerText = args.text;
  if (args.html) el.innerHTML = args.html;
  if (args.value) el.value = args.value;

  if (args.style) Object.assign(el.style, args.style);
  if (args.childs) el.appendAll(...args.childs);
  if (args.onClick) onClick(el, args.onClick);

  if (args.attrs)
    Object.entries(args.attrs).forEach(([name, value]) =>
      el.setAttribute(name, value)
    );

  return el;
};

Changing DOM

Append one or more child to an [HTMLElement]. It's a flexible version of appendChild()

[el].appendAll(...childs) {
  childs.forEach(child => this.appendChild(child))
}

Event Listeners

General registering listener

const on = (evt, el, behavior) => el.addEventListener(evt, behavior);

onClick listener

const onClick = (el, behavior) => on("click", el, behavior);

Strings joining

Combine multiple strings in one string

const join = (...strings) => strings.join("");

...etc

Example

qs("body").style.background = `#${rndHexColor()}`;

let h1 = creator({
  tag: "h1",
  text: document.title,
  style: {
    margin: "1rem",
    padding: "1rem",
    borderRadius: "10pt",
    color: "#FFEE37",
    background: "#6461FF",
    letterSpacing: ".05rem",
    textAlign: "center",
    fontFamily: "serif",
  },
});

let nav = creator({
  tag: "nav",
  style: {
    display: "flex",
    placeContent: "space-around",
    margin: "1rem auto",
  },
  childs: [
    creator({
      tag: "a",
      text: "About",
      attrs: {
        href: "#about",
      },
      style: {
        textDecoration: "none",
      },
    }),
    creator({
      tag: "a",
      text: "Docs",
      attrs: {
        href: "#docs",
      },
      style: {
        textDecoration: "none",
      },
    }),
    creator({
      tag: "a",
      text: "FAQs",
      attrs: {
        href: "#faqs",
      },
      style: {
        textDecoration: "none",
      },
    }),
  ],
});

let article = creator({
  tag: "article",
  html: "<h2>A Javascript 3rd party library that provides ease of development by containing all the frequently used functions and hooks with smaller but meaningful names and powerful usage.</h2>",
  style: {
    textAlign: "center",
    padding: "1rem",
  },
});

document.body.appendAll(h1, nav, article);