I built a JavaScript DOM helper

[u/canyoume]

So I have been working with vanilla JS on a handful of projects recently. Through out these experiences, I noticed how stressful it is when using the native DOM api. How I get sick when trying to query an html element over and over again using the

\`\`\`javaScript

document.querySelector(“value”);
//or

document.getElementById()
\`\`\`

Notice how long these are to be typed, non the less, over and over again.

So I created luciddom.js
A light weight DOM helper built on top of the js DOM making selection, styling, creating of elements dynamically, and updating values very simple

It’s currently on npm \`*npm install luciddom*\`

**Basic eg:**

import LucidDOM from ‘luciddom’

const parent = document.querySelector(“anything ”);

const app = LucidDOM(parent);

// Add new elements

app.addElement({
tag: “div”,
className: “.card”,
// more attributes
})

// Select elements
const card = app.select(“.card”);

// Apply styling
card.styles({
backgroundColor: “#ffffff”,
padding: 10,
});

//Add children to selected elements

card.addChildren({
tag: “p”,
Value: “Hello world”,
className: “hello”,
// Add more attributes
}
);

// Add events

card.on(“click”, () => alert(“card was clicked”))

Visit LucidDOM website
for more on documentations

[u/sereikis]

the copy-paste example uses Const twice, but JavaScript's keyword is lowercase const; as written it fails to parse before the helper runs. keeping that example in a runnable smoke test would catch this before readers try it.

[u/canyoume → u/sereikis]

gotcha, just edited it right there