Also it began to feel repetitive. Basically having recurring code with similar patterns. And even though they act on different html elements it still feels quite detestable.
HOW ABOUT REFACTORING THE CODE?Of course this can be solved by making the code more dynamic but the problem with dynamic is that it becomes less readable and a bit harder to understand.
No.jsFor these reasons, I decided to abstract this dynamic solution into a library that allows you to do these trivial DOM manipulations by using simple and intuitive attributes on your html instead.
So now I want to go through a few DOM manipulation examples we can easily achieve with no.js.
To have these examples work for you, be sure to add the nojs script to your html file like so:
you can also install it from npm or download the zip file. See.
1. Simple Tabs
Using No.js' on-click-switch-class attribute, you can easily switch an active class from a set of similar elements. See.
We also makes use of the attribute on-click-set-text to set the text content of the tab. See.
2. Side menu toggle
With the attribute on-click-toggle-class, we toggle the class "active" of a target element with the css selection ".sidemenu". See.
3. Dynamically set form inptut values on action
With the attribute on-click-set-value we set the value of the target input element with the css selection "[name=number] ". See.
Why use No.js?:
3. It is very intuitive and easy to understand. With a near english syntax.
While you might find other reasons that frown upon the No.js pattern, it eventually boils down to tradeoffs, perks and picking your poison in accordance to how you'd prefer to die 😄.
The full documentaion for nojs can be found on nojs.io