How to Code this `navColor.js` JavaScript Library from zero! — The Dev Ninja.

In this video, we will create a complete JavaScript library that you can use by adding a CDN link to your website!

the library takes as a parameter an array of objects [{...}, {...}] and turns it into native HTML tags.

Github repo:
https://github.com/The-DevNinja/navColor.js/

CDN link to add if you want to use it:
https://cdn.jsdelivr.net/gh/The-DevNinja/navColor.js/script.min.js

Documentation on how to configure and use this library: (README.md)
https://github.com/The-DevNinja/navColor.js#readme/

FontAwesome icons:
https://fontawesome.com/icons

Deployed example website:
https://the-devninja.github.io/navColor.js/

Codepen:
https://codepen.io/the-devninja/pen/xxWryZK

0:00 the dev ninja intro
0:02 how to use, and configure this js library
0:27 start of the coding tutorial
6:10 start writing javascript
6:28 writing the array of objects
7:30 writing the script for adding HTML tags
9:50 implementing a function for making outlined or solid the icons
11:22 rewrite the functions for adding classes with "forEach"
11:55 append child to navbar function
13:00 array now is in HTML, not in the script itself
13:30 implementing "clicking on icons event"
15:42 implementing "change the background color on click" in JS.
17:32 making the event listener more readable using a named function.
18:51 JS implementing "active" class to make the icon Solid.
23:35 CSS implementing "active" class to make icon colored.
24:40 JS implementing function for adding data-attributes to HTML tags.
26:28 CSS implementation "show details" with ::before pseudoelement.
29:00 CSS adding animation to "show details" on click.
31:51 JS makes the code as a unique function that the user can use in the CDN.
32:47 JS Adding an option functionality: "choose what class/id to add to the navbar.
40:04 testing if adding the function() in HTML will work or not.
40:33 solving bug
41:07 CDN how to create a CDN link (minified, cachable script) with "jsdelivr".
42:10 JS implementing add CSS file automatically to the page of the user.
43:57 JS Adding an option functionality: "isHtmlOnly" to not make the user have my CSS file.
48:20 outro.