SilverBox Library

Fatemeh Satouri — Tue, 20 Feb 2024 18:50:55 +0000

Hello.🫡
how are you ?
What project are you working on newly?
I made a very nice gift for you, a gift that may have been less visible.🎁

What is SilverBox ?

Lightweight and versatile JavaScript library to create customizable modals and alerts for your web applications.

In what language is it written ?

SilverBox with built with Pure JavaScript and Zero Dependencies.

Does Silverbox have a customization feature ?

It allows you to have your own style alongside the ease of use of using a library.

How to use it ?

Working with this simple library is fully explained in Github.
Please refer to it and read the steps with it:
SilverBox Github

Conclusion

Silverbox is a simple, complete library written with JavaScript pure. Silverbox helps you get more beautiful warnings in your project and make it more enjoyable with customization.

HTML Collection VS Node List

Fatemeh Satouri — Sat, 17 Feb 2024 21:15:59 +0000

Hello how are you?
Have you ever thought about this?
Or did you pay attention to it?
So now that you are reading this and I congratulate you, you are entering a sweet and interesting world.

What is Node List ?

Simply put, it contains all the nodes.

what is HTML Collection ?

It only contains elements and does not contain textual nodes

only the nodes of the elements, such as: div

querySelector or getElementBy ?

What do you use to save your elements in JavaScript?
getElementBy or querySelector?
It's interesting for you to be interesting?
The two who do a job!

In addition, it can also be selected through the queryselector
similar to the CSS.

Well let's pay as we! Dead and alive data!
I'm sure you learned the DOM and learned well because we need it a lot here.
You can get a node of the list using the querySelector, which includes the the node dead!.
But using the getElementBy you have an HTML Collection of the living elements.

So! So far we have found out what one of them is and how we can have a node list or html collection.
So what are the dead and live data now?

Dead or alive?

let li = document.createElement('li') document.body.appendChild(li)

Remember?
We made a Li element here and then it to the Body

const item = document.getElementsByTagName("div"); // select div from the HTML page by getElementsBy console.log(item); let div = document.createElement("div"); document.body.append(div); console.log(item); // select div from the HTML page by querySelector const item = document.querySelectorAll("div"); console.log(item); let div = document.createElement("div"); document.body.append(div); console.log(item);

Here we used the two ways to seize.
Please try this code too to get to the conclusion together.

If you use getElementBy, your data is alive and you can see it on the console after you have another data to the page.
But if you use the querySelector you have a dead or static list, and if more elements are added to the knot, it will not be updated.

Be sure to try this code and play with that code. I'm sure it will be a wonderful experience for you.

If you enjoy this style of posts, you can follow my articles on the following sites:

Third -party cookie
Linkedin

Forem: Fatemeh Satouri