- Name: Xorio
- Version: 3.3
- Author: YSSF
This is a replacement for Onyx library. We've stopped updating it for some reason.
<!-- At the end of the body tag paste this code -->
<script src="./your-script.js" type="module"></script>
// In your script add this at the first line
import * as xorio from './xorio.js';
// This function makes the element follows the cursor
xorio.toPointer('tag name, .class, or #id');
// This function makes a custom alert box
xorio.alert('title', 'button text'); // If you leave the second option null it will automatically makes the button says (OK)
// This function makes a custom prompt box
xorio.prompt('title', 'button text', 'text field placeholder');
// This function changes the position of the element
xorio.randomPosition('tag name, .class, or #id');
// This class gives the user ability to move the element using Arrow/WASD keys
const movements = new xorio.Movement();
movements.arrows('tag name, .class, or #id'); // Makes the selected element moves with arrow keys
movements.WASD('tag name, .class, or #id'); // Makes the selected element moves with WASD keys
movements.both('tag name, .class, or #id'); // Makes the selected element moves with arrow/WASD keys
// This function creates a custom notification
xorio.notification('title', 'message');
// This class counts
const counter = new xorio.Counter();
counter.countUp(milliseconds); // This function counts up
counter.countDown(milliseconds); // This function countes down
console.log(counter.variable); // To print the value in the console
// This function is like jQuery
xorio.µ('tag name, .class, or #id').on('click', () => xorio.alert('Something')); // Example for the addEventListener('click')
console.log(xorio.µ('tag name, .class, or #id').html()); // To print the element in the console to make sure it works well
// This class gives you a cool hover effects
const hoverEffx = new xorio.HoverEffx();
hoverEffx.shake('tag name, .class, or #id'); // Shaking effect
hoverEffx.vibration('tag name, .class, or #id'); // Vibration effect
hoverEffx.box('tag name, .class, or #id'); // Box effect
// This function is a better method to use the (randomPosition, Movement, toPointer)
xorio.position('tag name, .class, or #id').random(); // Go to a random position
xorio.position('tag name, .class, or #id').followPointer(); // Makes the selected element follows the pointer
xorio.position('tag name, .class, or #id').movement().arrows(); // Makes the selected element moves with the arrow keys
xorio.position('tag name, .class, or #id').movement().wasd(); // Makes the selected element moves with the WASD keys
xorio.position('tag name, .class, or #id').movement().both(); // Makes the selected element moves with the arrow/WASD keys
// This class gives you a cool focus effects
new xorio.FocusEffx('tag name, .class, or #id').shadow(range, 'color', ms); // Smooth shadow effect
new xorio.FocusEffx('tag name, .class, or #id').changeBackgroundColor('color', ms); // changes the background color
// This function makes the site speak and tell the user the word inside it
xorio.speak('Something'); // And it will say "Something"
// And you can make it say a text inside the HTML
const div = document.getElementById('myDiv');
xorio.speak(div.innerText); // Now it will say the text inside the div element we've selected
// This function allows you to create custom elements easier (BETA)
const myElement = xorio.customElement('my-element');
myElement.create(() => {
console.log('Working well!'); // This will print "Works well!" in the console when the element is in the HTML file
});
// This object contains some functions to get random things easier
xorio.random.number.integer(0, 10); // This line gets a random number between 0 and 10
xorio.random.number.float(0, 10); // This also gets a random number between 0 and 10, but this is float
xorio.random.char(); // This gets a random character from "a-z", "A-Z"
xorio.random.color.hex(); // This gets a random hex code
xorio.random.color.rgb(); // This gets a random rgb code
xorio.random.color.hsl(); // This gets a random hsl code
xorio.random.bool(); // This gets a random boolean between "false" and "true"
xorio.random.fromArray([5154, 451, 5151, 51747, 5121, 122]); // This will get a random number from the array inside the "()"
xorio.random.time() // This will get a random time (hours, minutes, seconds), not the actual time
// This function adds the enum ability to JS
const myEnum1 = xorio.Enum([
'FIRST=5',
'SECOND=9',
'THIRD=23',
'FOURTH=8'
]);
console.log(myEnum1.FIRST); // Output: 5
console.log(myEnum1.SECOND); // Output: 9
console.log(myEnum1.THIRD); // Output: 23
console.log(myEnum1.FOURTH); // Output: 8
// If you don't set values, it will set values by itself automatically, for example:
const myEnum2 = xorio.Enum([
'FIRST',
'SECOND',
'THIRD',
'FOURTH'
]);
console.log(myEnum2.FIRST); // Output: 0
console.log(myEnum2.SECOND); // Output: 1
console.log(myEnum2.THIRD); // Output: 2
console.log(myEnum2.FOURTH); // Output: 3
// Checks if the year is leap
// Leap year is a 366 days year, it comes every 4 years, February after 4 years has 29 days, if not it has 28 days
console.log(xorio.isLeapYear(2024)); // Output: true
console.log(xorio.isLeapYear(2021)); // Output: false
console.log(xorio.isLeapYear(2020)); // Output: true
// Alphanumeric object
xorio.alphanumeric.generate(); // Generates a random alphanumeric
xorio.alphanumeric.test('abc-123'); // Output: false
xorio.alphanumeric.test('abc123'); // Output: true
xorio.alphanumeric.generateWithPrefix('user_', 12); // Output: user_{RANDOM_ALPHANUMERIC}
xorio.alphanumeric.generateWithSuffix('_code', 12); // Output: {RANDOM_ALPHANUMERIC}_code
// Checks if the email inside a string is valid or not
console.log(xorio.isValidEmail('example@gmail')); // false
console.log(xorio.isValidEmail('example.com')); // false
console.log(xorio.isValidEmail('example')); // false
console.log(xorio.isValidEmail('[email protected]')); // true
console.log(xorio.isValidEmail('[email protected]')); // true
console.log(xorio.isValidEmail('[email protected]')); // true
// Array object
xorio.array.shuffler([415, 515, 2121, 515, 212]);
xorio.array.sum([51, 21, 32]);
xorio.array.max([51, 21, 32]);
xorio.array.min([51, 21, 32]);
xorio.array.last([565, 51, 2123, 213]);
// This function generates random password
let minLength = 8;
let maxLength = 14;
xorio.passwordGenerator(minLength, maxLength);
// This class ceates a new element
const elem = new xorio.ElementCreator('div');
elem.class = 'class';
elem.id = 'id';
elem.innerHTML = 'Hello World!';
elem.add();
elem.setProperties({
style: 'color: #f00; font-size: 16px',
onclick: () => console.log('CLICKED!')
});
elem.parent('tag name, .class, or #id');
// Graphing system
const data = [ // New array with objects declaration
{ x: 0, y: 6 }, // Goes from 0 to 6
{ x: 2, y: 8 }, // Goes from 6 to 8
{ x: 4, y: 5 }, // Goes from 8 to 5
{ x: 8, y: 10 }, // Goes from 5 to 10
{ x: 10, y: 16 } // Goes from 10 to 16
];
// Graph function with options
xorio.graph('canvas', data, {
xLabel = 'X Label',
yLabel = 'Y Label',
title = 'Title',
dotSize = 5,
lineWidth = 2,
lineColor = '#298eb8',
showGrid = true,
gridColor = '#ddd',
font = '12px Arial',
textColor = '#eee'
});
// Math object
xorio.math.ln(25);
xorio.math.xor(true, false);
xorio.math.nor(true, false);
xorio.math.nand(true, false);
// Calc function in the math object
xorio.math.calc(6, 5, '+');
xorio.math.calc(6, 5, '-');
xorio.math.calc(6, 5, '*');
xorio.math.calc(6, 5, '/');
xorio.math.calc(6, 5, '%');
// Prime number checker
xorio.math.isPrime(2); // Output: true
xorio.math.isPrime(0); // Output: false
xorio.math.isPrime(1); // Output: false
xorio.math.isPrime(5); // Output: true
xorio.math.isPrime(3); // Output: true
// The new popup system
xorio.popup.alert('Hello World!'); // Shows an alert box
xorio.popup.prompt('What\'s your name?') // Shows a prompt box
.then(val => popup.alert(`Hello, ${val}!`))
.catch(() => popup.alert('Canceled!'));
xorio.popup.confirm('Are you sure you want to proceed?') // Shows a confirmation box
.then(accept => console.log(accept)) // true
.catch(cancel => console.log(cancel)) // false
// a class to work with CSV
const csv = new xorio.CSV('./path/to/file.csv');
csv.getFile().then(() => {
console.log(csv.getColumn(0));
console.log(csv.getRow(0));
csv.setColumn(0, ['NewValue1', 'NewValue2', 'NewValue3']);
csv.setRow(1, ['NewValue1', 'NewValue2', 'NewValue3']);
console.log(csv.displayAsArrays());
console.log(csv.displayAsArrays().header);
console.log(csv.displayAsArrays().rows);
console.log(csv.displayAsTable());
console.log(csv.getSize());
});
// The image editor has bunch of things that allows you yo modify images within your code
const ie = new xorio.ImageEditor(); // You can learn more from the intellisense of VSCode