### Fx.Tween.start Example (from black to red)

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Fx/Fx.Tween.md

Transitions the 'background-color' CSS property of an element from '#000' (black) to '#f00' (red). This demonstrates starting a tween with both a specified start and end value.

```javascript
var myFx = new Fx.Tween(element);
// transitions the background color of the Element from black to red:
myFx.start('background-color', '#000', '#f00');
```

--------------------------------

### Install Dependencies and Run Tests

Source: https://github.com/mootools/mootools-core/blob/master/README.md

This sequence of commands installs the necessary testing tools and then runs all the project's specifications locally. Ensure you have Node.js and npm installed.

```bash
$ git clone https://github.com/mootools/mootools-core  # clone the MooTools repo
$ cd mootools-core                                     # get into the directory
$ npm install                                          # install de testing tools
$ `npm bin`/grunt test                                 # run the specs!
```

--------------------------------

### Fx.start

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Fx/Fx.md

Begins a transition with specified start and end values, firing the 'start' event.

```APIDOC
## Fx:start

### Description
Begins a transition. Fires the 'start' event.

### Syntax:

	myFx.start(from[, to]);

### Arguments:

1. from - (*mixed*) The starting value for the effect. If only one argument is provided, this value will be used as the target value.
2. to   - (*mixed*, optional) The target value for the effect.

### Returns:

* (*object*) - This Fx instance.

### Notes:

- If only one parameter is provided, the first argument to start will be used as the target value, and the initial value will be calculated from the current state of the element.
- The format and type of this value will be dependent upon implementation.
```

--------------------------------

### Chain Initialization Example

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Class/Class.Extras.md

An example of initializing a class that implements Chain with an array of functions to be executed sequentially.

```javascript
var Todo = new Class({
	Implements: Chain,
	initialize: function(){
		this.chain.apply(this, arguments);
	}
});

var myTodoList = new Todo(
	function(){ alert('get groceries');	},
	function(){ alert('go workout'); },
	function(){ alert('code mootools documentation until eyes close involuntarily'); },
	function(){ alert('sleep');	}
);
```

--------------------------------

### Fx.Tween.start Example (from current to blue)

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Fx/Fx.Tween.md

Transitions the 'background-color' CSS property of an element to '#00f' (blue). The starting value is omitted, so the tween will begin from the element's current background color.

```javascript
var myFx = new Fx.Tween(element);
// transitions the background color of the Element from its current color to blue:
myFx.start('background-color', '#00f');
```

--------------------------------

### Making GET Requests

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Request/Request.HTML.md

Demonstrates how to perform a simple GET request using Request.HTML. You can specify the URL directly in the `get` method or set it during instantiation.

```APIDOC
## Simple GET Request

	var myHTMLRequest = new Request.HTML().get('myPage.html');

## Data from Object Passed via GET

	//Loads "load/?user_id=25".
	var myHTMLRequest = new Request.HTML({url: 'load/'}).get({'user_id': 25});
```

--------------------------------

### Getting the State of a Thenable

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Class/Class.Thenable.md

This example shows how to retrieve the current state of a Thenable instance, which can be 'pending', 'fulfilled', or 'rejected'.

```javascript
myClass.getThenableState();
```

--------------------------------

### Request.JSON Constructor and Usage

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Request/Request.JSON.md

Instantiate Request.JSON to create a new JSON request instance. The constructor accepts an optional options object. The example demonstrates sending a GET request with parameters and handling a JSON response.

```APIDOC
## Request.JSON

### Description
Wrapped Request with automated receiving of JavaScript Objects in JSON Format.

### Syntax:

	var myJSONRemote = new Request.JSON([options]);

### Arguments:

1. options - (*object*, optional) See below.

### Options:

* secure  - (*boolean*: defaults to true) If set to true, a syntax check will be done on the result JSON (see [JSON.decode](/Utilities/JSON#JSON:decode)).

### Events:

#### success

Fired when the request completes. This overrides the signature of the Request success event.

##### Signature:

	onSuccess(responseJSON, responseText)

##### Arguments:

1. responseJSON - (*object*) The JSON response object from the remote request.
2. responseText - (*string*) The JSON response as string.

#### error

Fired when the parsed JSON is not valid and the secure option is set.

##### Signature:

	onError(text, error)

##### Arguments:

1. text - (string) The response text.
2. error - (string) The error message.

#### failure

Fired when the request failed (error status code).

##### Signature:

	onFailure(xhr)

##### Arguments:

xhr - (XMLHttpRequest) The transport instance.

### Returns:

* (*object*) A new Request.JSON instance.

### Example:

	// this code will send a data object via a GET request and alert the retrieved data.
	var jsonRequest = new Request.JSON({url: 'http://site.com/tellMeAge.php', onSuccess: function(person){
		alert(person.age);    // alerts "25 years".
		alert(person.height); // alerts "170 cm".
		alert(person.weight); // alerts "120 kg".
	}}).get({'firstName': 'John', 'lastName': 'Doe'});

### Cross-Origin Resource Sharing (CORS) note:

The Request.JSON class will (by default) add two custom headers that, if used for a cross-origin request, will have to be reported as allowed in the preflight request, in addition to any other headers you may set yourself:

	Access-Control-Allow-Headers: X-Requested-With, X-Request

### See Also:

[Request](/core/Request/Request)
```

--------------------------------

### Start Fx.Morph Animation with Multiple Properties

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Fx/Fx.Morph.md

The 'start' method animates multiple CSS properties simultaneously. It can accept an object of properties or a CSS selector.

```javascript
var myEffects = new Fx.Morph('myElement', {duration: 1000, transition: Fx.Transitions.Sine.easeOut});

	myEffects.start({
		'height': [10, 100],
		'width': [900, 300],
		'opacity': 0,
		'background-color': '#00f'
	});
```

--------------------------------

### Commit Message Example

Source: https://github.com/mootools/mootools-core/wiki/Olmo's-workflow

An example of a well-formatted commit message, including the action, description, and spec results.

```text
Fixes #2118.

Noticed that there's no $uid dependency in Browser.js. Moved $uid and
$uid calls for window and document to Element.js.

PASSED: IE6-9, FFx 3-5, 8, 10, Chrome latest, Safari 5, Opera 11
```

--------------------------------

### Using Request GET Alias

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Request/Request.md

Demonstrates the use of the `get` alias for sending GET requests. This is a shorthand for `send` with the method option set to 'get'.

```javascript
myRequest.get('save=username&name=John');
```

--------------------------------

### Simple GET Request with Request.HTML

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Request/Request.HTML.md

Initiates a simple GET request to fetch HTML content. No specific options are configured.

```javascript
var myHTMLRequest = new Request.HTML().get('myPage.html');
```

--------------------------------

### Add Event Listener Example

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Class/Class.Extras.md

An example of how to attach a function to a specific event for a class that implements the Events utility. The 'on' prefix for event names is also supported and automatically converted.

```javascript
var Widget = new Class({
	Implements: Events,
	initialize: function(element){
		// ...
	},
	complete: function(){
		this.fireEvent('complete');
	}
});

var myWidget = new Widget();
myWidget.addEvent('complete', myFunction);
```

--------------------------------

### Log Function Setup

Source: https://github.com/mootools/mootools-core/blob/master/Tests/Element/Element.Event.change.html

Sets up a logger function to display messages in the UI, indicating success or failure.

```javascript
var logger = $('log');
var log = function(msg, success){
  new Element('div', {
    'class': success == true ? 'success' : (success == false ? 'fail' : ''),
    text: msg
  }).inject(logger, 'top');
};
```

--------------------------------

### Slick Reverse Combinators Examples

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Slick/Slick.md

Demonstrates the usage of reverse combinators in Slick, which prepend '!' to a selector or combinator to reverse the flow.

```javascript
document.getElement('p ! div')    // A <div> that is an ancestor of a <p>
```

```javascript
document.getElement('p !> div')   // A <div> that is a direct parent of a <p>
```

```javascript
document.getElement('.foo !+ p')  // Gets the previous adjacent <p> sibling
```

--------------------------------

### Fx.Tween Constructor Example

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Fx/Fx.Tween.md

Initializes an Fx.Tween instance to transition the 'height' property of 'myElement'. It uses a 'long' duration, 'bounce:out' transition, and 'cancel' link behavior. The starting value is omitted, so the current height will be used.

```javascript
var myFx = new Fx.Tween('myElement', {
	duration: 'long',
	transition: 'bounce:out',
	link: 'cancel',
	property: 'height'
});

document.id('myLink').addEvent('click', function(event){
	event.stop();
	myFx.start(40, 100);
});
```

--------------------------------

### Equivalent send Method for GET

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Request/Request.md

Shows the equivalent `send` method call for a GET request, specifying the method and data options. Useful for understanding the underlying mechanism of the `get` alias.

```javascript
myRequest.send({
		method: 'get',
		data: 'save=username&name=John'
	});
```

--------------------------------

### Element.morph Example

Source: https://github.com/mootools/mootools-core/blob/master/Tests/Fx/Fx.html

Applies morphing capabilities directly to an element using Element.set('morph', ...). This example animates the 'width' property.

```javascript
#sun { width: 100px; height: 100px; }​
var sun = document.id('sun').set("morph", { duration: 2000 });
var sunToggle = true;
$("fx-sun").addEvent('click', function(event){
    event.preventDefault();
    sun.morph(sunToggle ? { width: '300px' } : { width: '200px' });
    sunToggle = !sunToggle;
});
```

--------------------------------

### Fx.Tween.start

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Fx/Fx.Tween.md

Transitions an element's CSS property from a starting value to a target value.

```APIDOC
## Fx.Tween Method: start {#Fx-Tween:start}

### Description

Transitions the Element's CSS property to the specified value.

### Syntax:

	myFx.start([property,] [from,] to);

### Arguments:

1. property - (*string*, if not in options) The css property to tween. Omit this if you use the property option.
2. from     - (*mixed*, optional) The starting CSS property value for the effect.
3. to       - (*mixed*) The target CSS property value for the effect.

### Returns:

* (*object*) This Fx.Tween instance.

### Examples:

	var myFx = new Fx.Tween(element);
	// transitions the background color of the Element from black to red:
	myFx.start('background-color', '#000', '#f00');
	// transitions the background color of the Element from its current color to blue:
	myFx.start('background-color', '#00f');

### Notes:

- If only one argument is provided, other than the property argument, the first argument to start will be used as the target value, and the initial value will be calculated from the current state of the element.
- When using colors, either RGB or Hex values may be used.
- If you use the property option, you must not use the property argument in the start and set methods.
```

--------------------------------

### Creating a Promise-like Class with Class.Thenable

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Class/Class.Thenable.md

This example shows how to create a custom Promise class using Class.Thenable, including initialization and basic resolve/reject logic.

```javascript
var Promise = new Class({
	Implements: Class.Thenable,
	initialize: function(executor){
		if (typeof executor !== 'function'){
			throw new TypeError('Promise constructor takes a function argument.');
		}

		try {
			executor(this.resolve.bind(this), this.reject.bind(this));
		} catch (exception){
			this.reject(exception);
		}
	},
	resetThenable: function(){
		throw new TypeError('A promise can only be resolved once.');
	}
});

var myPromise = new Promise(function(resolve){
	resolve('Hello promised world!');
});
myPromise.then(function(value){
	console.log(value);
});
```

--------------------------------

### Initialize and Update Git Submodules

Source: https://github.com/mootools/mootools-core/wiki/Home

Initialize and update all git submodules for MooTools. This step is necessary to get the project dependencies required for the build scripts.

```bash
git submodule update --init
```

--------------------------------

### Slick index Selector Example

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Slick/Slick.md

Matches an element at a specific zero-based index within its parent. Use this for precise element selection by position.

```javascript
$$('p:index(2)');
```

--------------------------------

### Implement $lambda function

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Core/Core.md

An example demonstrating the use of `Function.convert` as a replacement for the deprecated `$lambda` function. This is useful for ensuring a value is always returned as a function.

```javascript
myLink.addEvent('click', Function.convert(false)); // prevents a link Element from being clickable
```

--------------------------------

### Request Initialization and Sending

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Request/Request.md

Demonstrates how to initialize a new Request object with options like URL and event handlers, and how to send the request with optional data.

```APIDOC
## Request Initialization and Sending

### Description
This section shows how to create a new Request instance and send it. You can specify options such as the URL, request method, and event handlers like `onProgress`.

### Example 1: Basic Request with Progress

```javascript
var myRequest = new Request({
	url: 'image.jpg',
	onProgress: function(event, xhr){
		var loaded = event.loaded, total = event.total;

		console.log(parseInt(loaded / total * 100, 10));
	}
});

myRequest.send();
```

### Example 2: Request with Method and Data

```javascript
var myRequest = new Request({method: 'get', url: 'requestHandler.php'});
myRequest.send('name=john&lastname=dorian');
```

### Properties
* `url` - The URL to which the request is sent.
* `method` - The HTTP method to use (e.g., 'get', 'post').
* `onProgress` - A function to be called when the request progress is updated.

### Returns
* (*object*) A new Request instance.
```

--------------------------------

### Use custom Element properties

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Element/Element.md

Custom properties defined in Element.Properties can be accessed using Element.get and Element.set. This example demonstrates getting and setting the 'disabled' property.

```javascript
// gets the "disabled" property
$(element).get('disabled');
// sets the "disabled" property to true, along with the attribute
$(element).set('disabled', true);
```

--------------------------------

### Slick first-child Selector Example

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Slick/Slick.md

Selects the first child element of its parent. Useful for targeting the initial element in a group.

```javascript
$$('td:first-child');
```

--------------------------------

### Define a custom Element property getter and setter

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Element/Element.md

Custom element properties can be defined in Element.Properties. This example shows how to create a 'disabled' property that gets and sets the element's disabled state and attribute.

```javascript
Element.Properties.disabled = {

	get: function(){
		return this.disabled;
	},

	set: function(value){
		this.disabled = !!value;
		this.setAttribute('disabled', !!value);
	}

};
```

--------------------------------

### Run Local Browser Test Server

Source: https://github.com/mootools/mootools-core/blob/master/README.md

Starts a local test server for debugging builds in a browser. Access the test server at `http://localhost:9876/`. Press `Ctrl+c` to stop the server.

```bash
$ `npm bin`/grunt compat:dev
```

--------------------------------

### Request Initialization

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Request/Request.md

Instantiate a new Request object with optional configuration options.

```APIDOC
## Request Initialization

### Description
Instantiate a new Request object with optional configuration options.

### Syntax

	var myRequest = new Request([options]);

### Arguments

*   **options** - (*object*, optional) Configuration options for the Request.

### Options:

*   **url** - (*string*: defaults to *null*) The URL to request. (Note, this can also be an instance of [URI][])
*   **data** - (*mixed*: defaults to '') The default data for [Request:send][], used when no data is given. Can be an Element, Object or String. If an Object is passed the [Object:toQueryString][] method will be used to convert the object to a string. If an Element is passed the [Element:toQueryString][] method will be used to convert the Element to a string.
*   **format** - (*string*: defaults to '') If passed, an additional key 'format' will be appended to 'data' with the passed value. e.g. '&format=json'
*   **link** - (*string*: defaults to 'ignore') Can be 'ignore', 'cancel' and 'chain'.
    *   'ignore' - Any calls made to start while the request is running will be ignored.
    *   'cancel' - Any calls made to start while the request is running will take precedence over the currently running request.
    *   'chain'  - Any calls made to start while the request is running will be chained up, and will take place as soon as the current request has finished.
*   **method** - (*string*: defaults to 'post') The HTTP method for the request, can be either 'post' or 'get'.
*   **emulation** - (*boolean*: defaults to *true*) If set to true, other methods than 'post' or 'get' are appended as post-data named '\_method'.
*   **async** - (*boolean*: defaults to *true*) If set to false, the requests will be synchronous.
*   **timeout** - (*integer*: defaults to 0) In conjunction with `onTimeout` event, it determines the amount of milliseconds before considering a connection timed out.
*   **headers** - (*object*) An object to use in order to set the request headers.
*   **urlEncoded** - (*boolean*: defaults to *true*) If set to true, the content-type header is set to www-form-urlencoded + encoding
*   **encoding** - (*string*: defaults to 'utf-8') The encoding to be set in the request header.
*   **noCache** - (*boolean*; defaults to *false*) If *true*, appends a unique *noCache* value to the request to prevent caching.
*   **isSuccess** - (*function*) Overrides the built-in isSuccess function.
*   **evalScripts** - (*boolean*: defaults to *false*) If set to true, `script` tags inside the response will be evaluated.
*   **evalResponse** - (*boolean*: defaults to *false*) If set to true, the entire response will be evaluated.
*   **user** - (*string*: defaults to *null*) The username to use for http basic authentication.
*   **password** - (*string*: defaults to *null*) The password to use for http basic authentication.
*   **withCredentials** - (*boolean*: defaults to *false*) If set to true, xhr.withCredentials will be set to true allowing cookies/auth to be passed for cross origin requests.
```

--------------------------------

### Initialize Fx.Morph with Multiple Styles

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Fx/Fx.Morph.md

Use this to animate multiple CSS properties from specific start and end values. Requires an element ID and an options object.

```javascript
var myEffect = new Fx.Morph('myElement', {
		duration: 'long',
		transition: Fx.Transitions.Sine.easeOut
	});

	myEffect.start({
		'height': [10, 100], // Morphs the 'height' style from 10px to 100px.
		'width': [900, 300]  // Morphs the 'width' style from 900px to 300px.
	});
```

--------------------------------

### Combine Options and Events in a Class

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Class/Class.Extras.md

Demonstrates how to implement both Options and Events in a Class. Options prefixed with 'on' and followed by a capital letter are automatically converted to events if their value is a function. This allows for event-driven configuration.

```javascript
var Widget = new Class({
	Implements: [Options, Events],
	options: {
		color: '#fff',
		size: {
			width: 100,
			height: 100
		}
	},
	initialize: function(options){
		this.setOptions(options);
	},
	show: function(){
		// Do some cool stuff

		this.fireEvent('show');
	}

});

var myWidget = new Widget({
	color: '#f00',
	size: {
		width: 200
	},
	onShow: function(){
		alert('Lets show it!');
	}
});

myWidget.show(); // fires the event and alerts 'Lets show it!'
```

--------------------------------

### Basic Class.Thenable Implementation

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Class/Class.Thenable.md

Demonstrates how to implement Class.Thenable in a custom class. It shows how to access the thenable state within the initialize method.

```javascript
var MyClass = new Class({
	Implements: Class.Thenable,
	initialize: function(){
		console.log(this.getThenableState());
	}
});
```

--------------------------------

### Fx.Morph.start

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Fx/Fx.Morph.md

Executes a transition for any number of CSS properties in tandem.

```APIDOC
## myFx.start(properties)

### Description
Executes a transition for any number of CSS properties in tandem.

### Arguments
- **properties** (*mixed*) - An object of key/value pairs of CSS attributes to change or a string representing a CSS selector. If only one value is given for any CSS property, the transition will be from the current value of that property to the value given.

### Returns
- (*object*) This Fx.Morph instance.

### Examples
```javascript
var myEffects = new Fx.Morph('myElement', {duration: 1000, transition: Fx.Transitions.Sine.easeOut});

myEffects.start({
	'height': [10, 100],
	'width': [900, 300],
	'opacity': 0,
	'background-color': '#00f'
});

myEffects.start('.myClassName');
```
```

--------------------------------

### Element: set / get / erase

Source: https://context7.com/mootools/mootools-core/llms.txt

Provides methods for setting, getting, and erasing properties of DOM elements.

```APIDOC
## Element: set / get / erase

### Description
Provides property access for DOM elements.

### Methods
- `set(property, value)`: Sets a property of the element.
- `set(propertiesObject)`: Sets multiple properties using an object.
- `get(property)`: Retrieves the value of a property.
- `erase(property)`: Removes a property from the element.
```

--------------------------------

### Fx Constructor

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Fx/Fx.md

Initializes a new Fx instance with customizable options for animation and behavior.

```APIDOC
## Fx:constructor

### Description
Initializes a new Fx instance with customizable options.

### Syntax:

	var myFx = new Fx([options]);

### Arguments:

1. options - (*object*, optional) An object with options for the effect.

### Options:

* fps - (*number*: defaults to 50) The frames per second for the transition.
* frames - (*number*) The numbers of frames in the animation, defaults to the duration and fps calculations.
* frameSkip - (*boolean*: defaults to true) If sets to true, it evaluates the current frame based on the current time.
* unit - (*string*: defaults to false) The unit, e.g. 'px', 'em', or '%'.
* link - (*string*: defaults to ignore) Can be 'ignore', 'cancel' and 'chain'.
	* 'ignore' - Any calls made to start while the effect is running will be ignored.
	* 'cancel' - Any calls made to start while the effect is running will take precedence over the currently running transition.
	* 'chain'  - Any calls made to start while the effect is running will be chained up, and will take place as soon as the current effect has finished.
* duration - (*number*: defaults to 500) The duration of the effect in ms. Can also be one of: 'short', 'normal', 'long'.
* transition - (*function*: defaults to ['sine:in:out']) The equation to use for the effect. Also accepts a string in the form: transition[:in][:out].
```

--------------------------------

### Element: set / get / erase - Property Access

Source: https://context7.com/mootools/mootools-core/llms.txt

Manipulate element properties using `set`, `get`, and `erase`. `set` can update attributes, styles, and events. `get` retrieves property values. `erase` removes attributes or properties.

```javascript
var el = $('myDiv');

// Setter forms
el.set('text', 'Hello World');
el.set('html', '<strong>Bold</strong>');
el.set('class', 'active highlighted');
el.set({
    styles: { color: '#333', fontSize: '14px' },
    events: { mouseover: function(){ this.addClass('hover'); } }
});

// Getter forms
el.get('tag');   // 'div'
el.get('id');    // 'myDiv'
el.get('html');  // current innerHTML

// Erase
el.erase('class');
el.erase('id');
```

--------------------------------

### Basic Request with Progress

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Request/Request.md

Initiates a request and logs the progress percentage to the console. Useful for tracking uploads or downloads.

```javascript
var myRequest = new Request({
		url: 'image.jpg',
		onProgress: function(event, xhr){
			var loaded = event.loaded, total = event.total;

			console.log(parseInt(loaded / total * 100, 10));
		}
	});

	myRequest.send();
```

--------------------------------

### GET Request with Object Data

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Request/Request.HTML.md

Sends GET request data as a JavaScript object, which will be automatically encoded. The URL is set during instantiation.

```javascript
var myHTMLRequest = new Request.HTML({url: 'load/'}).get({'user_id': 25});
```

--------------------------------

### Implement Options utility for class

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Class/Class.Extras.md

Implement the Options utility into a new or existing class to automate the setting of instance options. Options starting with 'on' followed by a capital letter will automatically add corresponding events.

```javascript
var MyClass = new Class({Implements: Options});
```

```javascript
MyClass.implement(Options);
```

--------------------------------

### Get Element Size (Width and Height)

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Element/Element.Dimensions.md

Retrieves the width and height of an element, including its borders and padding. Use this to get the visual dimensions of an element.

```javascript
var size = myElement.getSize();
alert('The element is ' + size.x + ' pixels wide and ' + size.y + 'pixels high.');
```

--------------------------------

### Tween Element Height with Start and End Values

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Fx/Fx.Tween.md

Transitions the height of an Element from a specified start value (20px) to an end value (200px). The property is 'height'.

```javascript
$('myElement').tween('height', [20, 200]);
```

--------------------------------

### Basic Request Initialization and Send

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Request/Request.md

Initializes a new Request instance and sends data using the send method. Useful for general asynchronous HTTP requests.

```javascript
var myRequest = new Request({
		url: 'http://localhost/some_url'
	}).send('save=username&name=John');
```

--------------------------------

### Element Method: Load GET Request

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Request/Request.HTML.md

Updates the content of a specific DOM element by performing a GET request to the provided URL. This is a convenient shortcut for common update scenarios.

```javascript
$"content").load('page_1.html');
```

--------------------------------

### Sending a GET Request with JSON Response

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Request/Request.JSON.md

Use this snippet to send a data object via a GET request and process the JSON response. The onSuccess callback receives the parsed JSON object.

```javascript
var jsonRequest = new Request.JSON({url: 'http://site.com/tellMeAge.php', onSuccess: function(person){
		alert(person.age);		// alerts "25 years".
		alert(person.height);	// alerts "170 cm".
		alert(person.weight);	// alerts "120 kg".
	}}).get({'firstName': 'John', 'lastName': 'Doe'});
```

--------------------------------

### Implement Chain into a New Class

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Class/Class.Extras.md

Demonstrates how to implement the Chain utility into a new class definition using the 'Implements' keyword.

```javascript
var MyClass = new Class({
	Implements: Chain
});
```

--------------------------------

### Element.getProperties

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Element/Element.md

Gets multiple element attributes.

```APIDOC
## Element.getProperties

### Description
Gets multiple element attributes.

### Syntax:

	var myProps = myElement.getProperties(properties);

### Arguments:

* properties - (*strings*) Any number of properties to be retrieved.

### Returns:

* (*object*) An object containing all of the Element's requested properties.

### Examples:

##### HTML

	<img id="myImage" src="mootools.png" title="MooTools, the compact JavaScript framework" alt="" />

##### JavaScript

	var imgProps = $('myImage').getProperties('id', 'src', 'title', 'alt');
	// returns: { id: 'myImage', src: 'mootools.png', title: 'MooTools, the compact JavaScript framework', alt: '' }
```

--------------------------------

### Fx.Transition Constructor

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Fx/Fx.Transitions.md

This class is for creating custom easing functions. It returns an Fx transition function with 'easeIn', 'easeOut', and 'easeInOut' methods.

```APIDOC
## Fx.Transition

This class is only useful for math geniuses who want to write their own easing equations.
Returns an [Fx][] transition function with 'easeIn', 'easeOut', and 'easeInOut' methods.

### Syntax:

	var myTransition = new Fx.Transition(transition[, params]);

### Arguments:

1. transition - (*function*) Can be a [Fx.Transitions][] function or a user-provided function which will be extended with easing functions.
2. params     - (*mixed*, optional) Single value or an array for multiple values to pass as the second parameter for the transition function. A single value will be transformed to an array.

### Returns:

* (*function*) A function with easing functions.

### Examples:

	// Your own function. Here overshoot is bigger (now 1.3) when base -> 1 and base != 1.
	var myTransition = new Fx.Transition(function(pos, x){
		return 1 - Math.pow(Math.abs(Math.log(pos) / Math.log(x && x[0] || Math.E)), pos);
	}, 1.3);

	var myFx = new Fx.Tween('myElement', {
		property: 'height',
		transition: myTransition.easeOut
	}).start(30, 100);
```

--------------------------------

### Element.get('text')

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Element/Element.md

Gets the inner text of the Element.

```APIDOC
## GET Element Text

### Description
Gets the inner text of the Element.

### Method
GET

### Endpoint
Element.get('text')

### Parameters
#### Query Parameters
- **text** (string) - Required - The key to retrieve the text content.

### Response
#### Success Response (200)
- **text** (string) - The text content of the Element.

### Request Example
```json
{
  "text": "text"
}
```

### Response Example
```json
{
  "text": "my text"
}
```
```

--------------------------------

### Element.Properties.tween (Getter)

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Fx/Fx.Tween.md

Gets the Fx.Tween instance of an Element.

```APIDOC
### Getter:

#### Syntax:

	el.get('tween');

#### Arguments:

1. property - (*string*) the Fx.Tween property argument.

```

--------------------------------

### Create a Basic Class

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Class/Class.md

Defines a new class with an initialize constructor. Use this for simple class definitions without inheritance.

```javascript
var Cat = new Class({
	initialize: function(name){
		this.name = name;
	}
});
var myCat = new Cat('Micia');
alert(myCat.name); 

var Cow = new Class({
	initialize: function(){
		alert('moooo');
	}
});
```

--------------------------------

### getLast

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Element/Element.md

Gets the last element that matches the passed in expression.

```APIDOC
## getLast

### Description
Gets the last element that matches the passed in expression.

### Syntax:

	var lastElement = myElement.getLast([match]);

### Arguments:

1. match - (*string*, optional): A full CSS selector to match the found element(s) with.

### Returns:

* (*mixed*) The last found element, or returns null if none found.
```

--------------------------------

### getFirst

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Element/Element.md

Gets the first element that matches the passed in expression.

```APIDOC
## getFirst

### Description
Gets the first element that matches the passed in expression.

### Syntax:

	var firstElement = myElement.getFirst([match]);

### Arguments:

1. match - (*string*, optional): A full CSS selector to match the found element(s) with.

### Returns:

* (*mixed*) The first found element or null if none found.
```

--------------------------------

### Function apply Example

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Types/Function.md

Demonstrates the usage of the apply method for calling a function with a specified 'this' value and arguments. This is an alternative to the older fn.run(arguments, thisArg) API.

```javascript
fn.apply(thisArg, arguments);
```

--------------------------------

### Fx.Transitions.expo

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Fx/Fx.Transitions.md

Displays an exponential transition. Must be used as Expo.easeIn or Expo.easeOut or Expo.easeInOut.

```APIDOC
## Fx.Transitions.expo

Displays a exponential transition. Must be used as Expo.easeIn or Expo.easeOut or Expo.easeInOut.
```

--------------------------------

### Element.Properties.morph (Getter)

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Fx/Fx.Morph.md

Gets the default Fx.Morph instance for the Element.

```APIDOC
## el.get('morph')

### Description
Gets the default Fx.Morph instance for the Element.

### Returns
- (*object*) The Fx.Morph instance.

### Examples
```javascript
el.set('morph', {duration: 'long', transition: 'bounce:out'});
var morphInstance = el.get('morph');
```
```

--------------------------------

### Get Object Length

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Types/Object.md

Calculates and returns the number of keys present in an object.

```javascript
var myObject = {
	name: 'John',
	lastName: 'Doe'
});
Object.getLength(myObject); // returns 2
```

--------------------------------

### Navigate to MooTools Directory

Source: https://github.com/mootools/mootools-core/wiki/Home

Change your current directory to the cloned mootools-core folder.

```bash
cd mootools-core
```

--------------------------------

### Slick Focus Selector

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Slick/Slick.md

Gets the element that currently has focus within the document.

```javascript
$$(':focus');		// Gets the element in focus
```

--------------------------------

### Get a Single Element Property

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Element/Element.md

Retrieves the value of a specific attribute or property from an element.

```javascript
var imgProps = $('myImage').getProperty('src');
```

--------------------------------

### Element.Style

Source: https://context7.com/mootools/mootools-core/llms.txt

Provides methods to set and get individual or multiple CSS properties of an element.

```APIDOC
## Element.Style

### Description
Methods for setting and getting CSS styles of an element.

### Methods
- **setStyle(property, value)**: Sets a single CSS property.
- **getStyle(property)**: Gets the computed value of a CSS property.
- **setStyles(properties)**: Sets multiple CSS properties at once.
- **getStyles(...properties)**: Gets the computed values of multiple CSS properties.
```

--------------------------------

### Class Constructor

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Class/Class.md

Creates a new class with specified properties. Accepts special properties like Extends, Implements, and initialize.

```APIDOC
## Class constructor

### Description
Creates a new class with specified properties. Accepts special properties like Extends, Implements, and initialize.

### Syntax:

	var MyClass = new Class(properties);

### Arguments:

1. properties - Can be one of the following types:
	* (*object*) The collection of properties that apply to the Class. Also accepts some special properties such as Extends, Implements, and initialize (see below).
	* (*function*) The initialize function (see below).

#### Property: Extends

* (*class*) The Class that this class will extend.

The methods of this Class that have the same name as the Extends Class, will have a parent property, that allows you to call the other overridden method.
The Extends property should be the first property in a class definition.

#### Property: Implements

* (*class*)  The properties of a passed Class will be copied into the target Class.
* (*array*)  An array of Classes, the properties of which will be copied into this Class.

Implements is similar to Extends, except that it adopts properties from one or more other classes without inheritance.
Useful when implementing a default set of properties in multiple Classes. The Implements property should come after Extends but before all other properties.

#### Property: initialize

* (*function*) The initialize function will be the constructor for this class when new instances are created.

#### Property: toElement

* (*function*) A method which returns an element. This method will be automatically called when passing an instance of a class in [document.id][] function.


### Returns:

* (*class*) The created Class.

### Examples:

#### Class Example:

	var Cat = new Class({
		initialize: function(name){
			this.name = name;
		}
	});
	var myCat = new Cat('Micia');
	alert(myCat.name); // alerts 'Micia'

	var Cow = new Class({
		initialize: function(){
			alert('moooo');
		}
	});

#### Extends Example:

	var Animal = new Class({
		initialize: function(age){
			this.age = age;
		}
	});
	var Cat = new Class({
		Extends: Animal,
		initialize: function(name, age){
			this.parent(age); // calls initialize method of Animal class
			this.name = name;
		}
	});
	var myCat = new Cat('Micia', 20);
	alert(myCat.name); // alerts 'Micia'.
	alert(myCat.age); // alerts 20.

#### Implements Example:

	var Animal = new Class({
		initialize: function(age){
			this.age = age;
		}
	});
	var Cat = new Class({
		Implements: Animal,
		setName: function(name){
			this.name = name
		}
	});
	var myAnimal = new Cat(20);
	myAnimal.setName('Micia');
	alert(myAnimal.name); // alerts 'Micia'.
```

--------------------------------

### Fx.Transitions.back

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Fx/Fx.Transitions.md

Makes the transition go back, then all forth. Must be used as Back.easeIn or Back.easeOut or Back.easeInOut.

```APIDOC
## Fx.Transitions.back

Makes the transition go back, then all forth. Must be used as Back.easeIn or Back.easeOut or Back.easeInOut.
```

--------------------------------

### Element:getElementById

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Element/Element.md

Gets the element with the specified id found inside the current Element.

```APIDOC
## Element:getElementById

### Description
Gets the element with the specified id found inside the current Element.

### Syntax:

	var myElement = anElement.getElementById(id);

### Arguments:

1. id - (*string*) The ID of the Element to find.

### Returns:

* (*mixed*) If a match is found, returns that Element. Otherwise, returns null.

### Examples:

	var myChild = $('myParent').getElementById('myChild');

### Notes:

- This method is not provided for Document instances as document.getElementById is provided natively.
```

--------------------------------

### Fx.Transitions.quint

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Fx/Fx.Transitions.md

Displays a quintic transition. Must be used as Quint.easeIn or Quint.easeOut or Quint.easeInOut

```APIDOC
## Fx.Transitions.quint

Displays a quintic transition. Must be used as Quint.easeIn or Quint.easeOut or Quint.easeInOut
```

--------------------------------

### Get Object Values

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Types/Object.md

Retrieves an array containing all the values of an object, maintaining the same order as Object.keys.

```javascript
var values = Object.values(object);
```

--------------------------------

### Get Object Keys

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Types/Object.md

Retrieves an array containing all the keys of an object, maintaining the same order as Object.values.

```javascript
var keys = Object.keys(object);
```

--------------------------------

### Fx.Transitions.quad

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Fx/Fx.Transitions.md

Displays a quadratic transition. Must be used as Quad.easeIn or Quad.easeOut or Quad.easeInOut.

```APIDOC
## Fx.Transitions.quad

Displays a quadratic transition. Must be used as Quad.easeIn or Quad.easeOut or Quad.easeInOut.
```

--------------------------------

### Implementing Class.Thenable into a New Class

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Class/Class.Thenable.md

Demonstrates how to create a new class that inherits functionality from Class.Thenable.

```javascript
var MyClass = new Class({ Implements: Class.Thenable });
```

--------------------------------

### Get Multiple Element Properties

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Element/Element.md

Retrieves the values of multiple attributes or properties from an element and returns them as an object.

```javascript
var imgProps = $('myImage').getProperties('id', 'src', 'title', 'alt');
```

--------------------------------

### Array.getRandom: Get Random Item

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Types/Array.md

Returns a random item from the array. Returns null if the array is empty.

```javascript
['Cow', 'Pig', 'Dog', 'Cat'].getRandom(); // returns one of the items
```

--------------------------------

### Array.getLast: Get Last Item

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Types/Array.md

Retrieves the last item from an array. Returns null if the array is empty.

```javascript
['Cow', 'Pig', 'Dog', 'Cat'].getLast(); // returns 'Cat'
```

--------------------------------

### Getting a Response Header

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Request/Request.md

Retrieves the value of a specific response header. Useful for inspecting server-provided information.

```javascript
var myRequest = new Request({url: 'getData.php', method: 'get', onSuccess: function(responseText, responseXML){
		alert(this.getHeader('Date')); // alerts the server date (for example, 'Thu, 26 Feb 2009 20:26:06 GMT')
	}});

```

--------------------------------

### Implement Chain into an Existing Class

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Class/Class.Extras.md

Shows how to add Chain functionality to a class that has already been defined.

```javascript
MyClass.implement(Chain);
```

--------------------------------

### Generate Random Integer

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Types/Number.md

Use Number.random to get a random integer within a specified inclusive range.

```javascript
Number.random(5, 20);
```

--------------------------------

### Chaining with Chain and Thenable

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Class/Class.Thenable.md

Illustrates patterns for using Class.Thenable with the Chain utility. It highlights how to correctly chain asynchronous operations and callbacks when using both.

```javascript
myClass.start().chain(function(){ this.start() }).chain(function(){ this.then(callback); });
myClass.start().chain(function(){ this.start().then(callback); });
```

--------------------------------

### Element Constructor

Source: https://context7.com/mootools/mootools-core/llms.txt

Creates new DOM elements with specified tag name, properties, styles, and events.

```APIDOC
## Element Constructor

### Description
Creates new DOM elements.

### Syntax
`new Element(tag, properties)`

### Parameters
- `tag` (string): The HTML tag name for the element.
- `properties` (object): An object containing properties, styles, events, and other attributes for the element.
```

--------------------------------

### Get Offset Parent

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Element/Element.Dimensions.md

Returns the nearest positioned parent element. Returns null if no positioned parent is found.

```javascript
myElement.getOffsetParent();
```

--------------------------------

### Implement Events into a New Class

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Class/Class.Extras.md

Demonstrates how to implement the Events utility into a new class definition using the 'Implements' keyword.

```javascript
var MyClass = new Class({
	Implements: Events
});
```

--------------------------------

### Array Empty Method Example

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Types/Array.md

Empties an array, removing all its elements. The method returns the modified (now empty) array.

```javascript
var myArray = ['old', 'data'];
myArray.empty(); //myArray is now []
```

--------------------------------

### Element.tween Shortcut Example

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Fx/Fx.Tween.md

Configures default Fx.Tween options for an element and then uses the Element.tween shortcut to animate the 'height' property. The property is not set in the constructor but is provided directly to the tween method.

```javascript
var myElement = document.id('myElement');
myElement.set('tween', {
	duration: 'long',
	transition: 'bounce:out',
	link: 'cancel'
});

document.id('myLink').addEvent('click', function(event){
	event.stop();
	myElement.tween('height', 40, 100);
});
```

--------------------------------

### Get Element Property

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Element/Element.md

Retrieves a property from an Element. It first checks Element.Properties, then falls back to Element attributes or Element.getProperty.

```javascript
var tag = $('myDiv').get('tag');
var id = $('myDiv').get('id');
var value = $('myInput').get('value');
```

--------------------------------

### Create and Dispose a Cookie

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Utilities/Cookie.md

Demonstrates creating a cookie with specific domain options and then removing it if its value is read correctly. Ensure the domain option is set correctly for cross-path sharing.

```javascript
var myCookie = Cookie.write('username', 'JackBauer', {domain: 'mootools.net'});
if (Cookie.read('username') == 'JackBauer') { myCookie.dispose(); }
```

--------------------------------

### Get Fx.Tween Instance

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Fx/Fx.Tween.md

Retrieves the Fx.Tween instance associated with an Element. The property to tween must be specified when using this getter.

```javascript
el.get('tween').start(0);
```

--------------------------------

### Request.HTML Class Initialization

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Request/Request.HTML.md

Instantiate a new Request.HTML object. You can pass options to customize its behavior, including options inherited from the base Request class.

```APIDOC
## Request.HTML Class

### Description

Request Specifically made for receiving HTML.

### Syntax:

	var myHTMLRequest = new Request.HTML([options]);

### Arguments:

1. options - (*object*, optional) See options below. Also inherited are all the options from [Request][].

### Options:

* evalScripts - (*boolean*: defaults to true) If set to true, `script` tags inside the response will be evaluated. This overrides the `false` default from Request.
* update - (*element*: defaults to null) The Element to insert the response text of the Request into upon completion of the request.
* append - (*element*: defaults to null) The Element to append the response text of the Request into upon completion of the request.
* filter - (*mixed*: defaults to null) To filter the response tree by a selector or function. See [Elements:filter][]

### Events:

#### success

* (*function*) Function to execute when the HTML request completes. This overrides the signature of the Request success event.

##### Signature:

	onSuccess(responseTree, responseElements, responseHTML, responseJavaScript)

##### Arguments:

1. responseTree - (*element*) The node list of the remote response.
2. responseElements - (*array*) An array containing all elements of the remote response.
3. responseHTML - (*string*) The content of the remote response.
4. responseJavaScript - (*string*) The portion of JavaScript from the remote response.

### Returns:

* (*object*) A new Request.HTML instance.
```

--------------------------------

### Create a Standalone Chain Instance

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Class/Class.Extras.md

Illustrates the creation of a new, independent Chain object.

```javascript
var myChain = new Chain;
```

--------------------------------

### Array Flatten Method Example

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Types/Array.md

Flattens a multidimensional array into a new, single-dimensional array. Nested arrays are recursively expanded.

```javascript
var myArray = [1,2,3,[4,5, [6,7]], [[[8]]]];
var newArray = myArray.flatten(); //newArray is [1,2,3,4,5,6,7,8]
```

--------------------------------

### Build MooTools with Compatibility

Source: https://github.com/mootools/mootools-core/blob/master/README.md

Use this command to build MooTools with backward compatibility for older versions. This ensures that code written for previous MooTools releases will continue to function.

```bash
grunt compat
```

```bash
grunt packager:compat
```

--------------------------------

### Array Erase Method Example

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Types/Array.md

Removes all occurrences of a specified element from an array. If the element is not found, the array remains unchanged.

```javascript
['Cow', 'Pig', 'Dog', 'Cat', 'Dog'].erase('Dog')
```

```javascript
['Cow', 'Pig', 'Dog'].erase('Cat')
```

--------------------------------

### Slick last-child Selector Example

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Slick/Slick.md

Selects the last child element of its parent. Ideal for targeting the final element in a sequence.

```javascript
$$('td:last-child');
```

--------------------------------

### Fx.Transitions.linear

Source: https://github.com/mootools/mootools-core/blob/master/Docs/Fx/Fx.Transitions.md

Displays a linear transition.

```APIDOC
## Fx.Transitions.linear

Displays a linear transition.
```