Mei.js

a minimal, simple and helpful library for you

⭐ Star the project

With your star in the project, you help us to make ourselves known and the project to continue. Thank you very much!

Documentation

You can also find the documentation on the website.

DOM Manipulation:

Get Elements:

  <h1 id="title">Mei.Js</h1>
  <ul id="list-container">
    <li class="item">Item-1</li>
    <li class="item">Item-2</li>
    <li class="item">Item-3</li>
  </ul>

 // Return, if exist, the element, if not return null
 let element = Mei.getElement('#title');
 // Return an array of all selected elements
 let elements = Mei.getElements('.item'); 

Events:

Set Events:

  <h1 id="title">Mei.Js</h1>
  <ul id="list-container">
    <li class="item">Item-1</li>
    <li class="item">Item-2</li>
    <li class="item">Item-3</li>
  </ul>

 // Event for the h1 
 Mei.getElement('#title', 'click', () => {
   console.log('#title clicked!');
 });

 // This is not so recommended, use event delegation instead.
 Mei.getElements('.item', 'click', () => {
   console.log('item clicked!');
 });

Elements:

Creation:

  <div id="container">

  </div>
  <ul id="list">

  </ul>

 // This will create a 'h1'
 Mei.createElement('h1', {
   textContent: 'Hello World!',
   className: 'title',
   id: 'title-js',
   parent: Mei.getElement('#container')
 });

 // Create Children's
 Mei.createElement('li', {
   textContent: 'Item',
   className: 'item',
   parent: Mei.getElement('#list'),
   children: [
     {element: 'a', textContent: ' x', href: '#'}
   ]
 });

Removing:

  <h1 id="title">Title</h1>

 // This will remove the 'h1'
 Mei.removeElement(Mei.getElement('#title'));

Cloning:

  <h1 id="title">Title 1</h1>

 // Cloning the 'h1'
 let copiedH1 = Mei.cloneElement(Mei.getElement('#title'));
 // output
 console.log(copiedH1);

Storage: Work with the API storage in a more easy way

Save data:

 
  let users = [{name: 'John'}, {name: 'Nick'}];
  // This will create a 'users' item/collection in a localStorage way.      
  Mei.store({
    store: 'local',
    item: 'users',
    data: users
  });

  // This will create a 'users' item/collection in a sessionStorage way.
  Mei.store({
    store: 'session',
    item: 'users',
    data: users
   });

Clear all the stored data:

  // This will delete all the localStorage data     
  Mei.clearStore('local');

  // This will delete all the sessionStorage data  
  Mei.clearStore('session');

Remove a specified item from the store:

  // This will delete only the 'users' item (if exist) from localStorage     
  Mei.removeItemStore('local', 'users');

  // This will delete only the 'users' item (if exist) from sessionStorage     
  Mei.removeItemStore('session', 'users');

Get all the records, if is empty returns a empty array:

  // This will display the 'users' item (if exist) from localStorage     
  let allUsersFromLocal = Mei.displayStore('local', 'users');
  console.log(allUsersFromLocal);
  
  // This will display the 'users' item (if exist) from sessionStorage     
  let allUsersFromSession = Mei.displayStore('session', 'users');
  console.log(allUsersFromSession);