Fleet

Fleet is fork of Edom.js, a JavaScript library that allows you to interact with the DOM.

Installation

Fleet as a single JavaScript file

Load fleet to your html file followed by your javascript code.

<script src="fleet.js"></script>
<script>
  // Your code here ...
</script>

Fleet as npm package

Install fleet with npm:

npm install fleet

Import fleet into you project:

import fleet from 'fleet';

// if you don't use npm ...
import fleet from 'https://cdn.jsdelivr.net/npm/fleet@latest';

Examples

Fleet is easy to use.

Hello, world!

Write "Hello, world!" in an h1 element:

import fleet from 'fleet';

// Create h1 element
const h1 = fleet.create('h1');

// Write a text
fleet.setText(h1, 'Hello, world!');

// Add the element to the body
fleet.append(h1, document.body);

// Or create many elements
const elements = fleet.create(['h2','h3','h4']);

// Write a text to all elements
fleet.setText(elements, 'Hello, world!');

// Add all elements to the body
fleet.append(elements, document.body);

Functions

const element = fleet.create('div'); // create an element

// setText text to an element
fleet.setText(element, "Your text here");

// set html (this completely changes the html inside the element)
fleet.setHTML(element, '<span>HTML code</span>');

// add html (this adds an html code in the element)
fleet.addHTML(element, '<span>HTML code</span>');

// inserting element
fleet.append(element, parent);
fleet.preprend(element, parent);

// add attribute
fleet.addAttr(element, {prop1: 'value', prop2: 'value'});

// add style to an element
fleet.addCSS(element, {color: 'red', fontSize: '12px'});

// get computed css
const compCSS = fleet.getComputedCSS(element, 'width');

// classes utilities
fleet.addClass(element, 'my-class'); // add class
fleet.removeClass(element, 'my-class'); // remove class
fleet.toggleClass(element, 'my-class'); // toggle class

// event handling
fleet.addEvent(element, eventType, handler); // add event listener
fleet.removeEvent(element, eventType, handler); // remove event listener

// apply css animation
fleet.applyAnimation(element, {
  name: animationName,
  duration: animationDuration,
  timingFunction: animationTimingFunction
});

// ajax get
fleet.ajaxGet(url, callback);
const promise = fleet.fetchGet(url);

// serialize form data
const jsonObject = fleet.serializeForm(formElement);

// multiply an element
const p = fleet.create('p');
fleet.setText(p, 'Hello!');
fleet.append(p, document.body);
fleet.multiply(p, 5);

Contributing

We welcome contributions from the community! Please follow the guidelines outlined in the GitHub documentation on contributing to projects.

Thank you for your interest in contributing!

License

Mozilla Public License Version 2.0