My contributions was to https://github.com/lindelwa122/dom-wizard. I gained lot of experiences while working on this package.

This package is now available on NPMJS Registry - https://www.npmjs.com/package/dom-wizard

Contribution 01 : DOM delete Feature

domManager

The domManager module is responsible for creating, updating, reading, and deleting DOM elements.

delete()

The delete() function is responsible for removing an element or elements from the DOM.

Parameters/Inputs:

• selector: string

• all: boolean (optional)

The function accepts two parameters: selector (string) and all (boolean), with a default value of false.

delete() function will remove the specified element from the DOM, or if all is set to true, it will remove all elements that match the selector.

const deleteContent = () => {

  const deleteElement = (selector, all = false)=>{

    const el = (!all ? document.querySelector(selector): document.querySelectorAll(selector))

    if(!el || el.length === 0){
      console.error("invalid selector")
      throw new Error("invalid selector");
    }     

    if (!all) {
      el.remove();
    }

    if (all) {
      el.forEach((e) => {
          e.remove();
        })
      }
    };

    return { deleteElement };
};

export { deleteContent }

## DOM-delete() feature usage

To delete the specific HTML element from the DOM, use the `deleteElement()` function. For example, to delete a HTML element with id as `heading` you would use the following code:

```javascript
import { deleteContent } from "./index.js";

const dom = deleteContent();

dom.deleteElement("#heading");
```

To delete all the elements matching the selector (here class `para`), pass the second parameter `all` as `true` (has default value false), use the following code:

```javascript
import { deleteContent } from "./index.js";

const dom = deleteContent();

dom.deleteElement(".para", true);
```

NOTE: Always valid selector must be passed.

Contribution 02 : store.getState() Feature

store

The store will hold variables that are intended to be accessible throughout the app. Users will be able to retrieve and modify these variables from anywhere within the app.

getState()

getState() takes a property name as input and returns the value of that property.

Parameter/Input:

• key: string

The function returns the value of the key if it exists, and undefined if it doesn't.

function getState(key){

    if (key === "" || typeof(key) !== "string" ) {
        console.error("Invalid key");
        throw new Error("Invalid key");
    }

    // if the value of the key is undefined , gives an error and returns undefined
    if (this[key] === undefined) {
        console.error("The value of the key is undefined ");
        throw new Error("Value is undefined");
    }

    return this[key];

}

export default getState;

## getState Usage

To get the state of the store, use the `getState()` function. For example, to get the state of the `key`, you would use the following code:

```javascript
const value = store.getState(key);

// prints value of the key
console.log(value);
```

Note: the function throws an error if the value doesn't exist.

Contribution 03 : router.activate() Feature

router

The router module is responsible for registering routes, linking pages, and configuring URLs.

activate()

activate() is a private function responsible for adding the active "className" to a specific element.

Parameters/Inputs:

• element: HTMLElement

The function takes an element as input and adds the active class to its classList.

const _activate = (ele) => {
    ele.classList.add('active');
  };

_activate(info.element);

Contribution 04 : addEvent() Feature

This feature is "hacktoberfest accepted", but you can see this in the second version of the library which will be published soon in the npm registry.

This function addEvent() is implemented to add events . By using this function, user can easily add the events for the required html elements by just passing them as parameters.

• It increases code readability .

• The user can import the callback functions and re-use them.

• The user can just focus on writing the eventHandlers rather than getting the HTML element each time and adding event listeners.

The code will look something like this.
addEvent(selector,event,eventHandler,all); , this will add the event for the HTML element matching the selector. all will be default false , when set to true the function will add the event for all the elements matching the selector.

And the function will validate all the parameters.

const event = () => {
  const addEvent = (selector, event, eventHandler, all = false)=>{
    const el = !all
      ? document.querySelector(selector)
      : document.querySelectorAll(selector);

      if(typeof(selector) !== 'string' || typeof(event) !== 'string' || typeof(all) !== 'boolean'){
        throw new Error("Parameter type is invalid");
      }

      if (!el || el.length === 0) {
        console.error('invalid selector');
        throw new Error('invalid selector');
      }

      if(typeof(eventHandler) !== "function"){
        throw new Error("Event handler must be a callback function");
      }

      if(!all){
        el.addEventListener(event, eventHandler);
      }

      if(all){
        el.forEach((element)=>{
           element.addEventListener(event, eventHandler);
        });
      }

  };
  return { addEvent };
};

export { event };

## addEvent() usage

This function is used to `add events` to specific HTML element. It takes four parameters like `selector` (can be id, class), `event` (can be any events like click, onchange,mouseover), `eventHandler` (must be a callback function) and `all`(default is false).

```javascript
import { event } from './index.js';

const { addEvent } = event();

// adds "click" event to button with id "button".
addEvent("#button","click",()=>{console.log("clicked")},false);
```

The `selector` and `event` must be in string, `all` must be in boolean. 

If `all` is set to true , the function adds the event to all HTML elements matching the selector.

```javascript
import { event } from './index.js';

const { addEvent } = event();

const clickHandler = ()=>{console.log("clicked")};

// adds "click" event to ALL the buttons with class "button".
addEvent(".button", "click", clickHandler, true);
```

The callback function can be imported from any other `.js`file also.

Contribution 05 : UI Enhancements

I found the https://github.com/justEhmadSaeed/landing-page-template quite interesting and thought of improving some features to make it look more aesthetic using ReactJS and NextJS.

https://landing-page-template-nine.vercel.app/ This website needed some enhancements with regard to the logo color, updating the twitter logo, button features upon hover.

• The vercel app logo has been changed to colour white when in dark mode for better visibility.

• The button containing the github logo did not match in terms of color with the wordings Get it on github.

• During hover of this button the logo must change to black and remain white not hovered. This feature is coded.

• In the footer, the logos has been changed to white for better visibility.

• The outdated twitter logo was updated.

After adding my feature the website looked like..