Create a custom method

Start creating your own BitsyCode methods

Learn how you to can create your own BitsyCode methods and support the cause.


1. Create a method that requires an element to be specified.
// Create the BitsyCode function, notice the fn refering to an element needing to be specified
bitsyCode.fn.red = function() { 

    // Loop through all the elements matched (this.nodes)
    for (var i = 0; i < this.nodes.length; i++) {
        
        // Set the color of all the metched elements to red
        this.nodes[i].style.color = 'red';
        
    }
    
    // Return this element for Chaining purposes
    return this; 

}
Call this new method:
// Set the color of all p tags to red

bitsyCode('p').red();
That's it, your first BitsyCode method!


2. Create a method that DOES NOT require an element to be specified.
// Create the BitsyCode function, notice there's no fn specified, so no element is needed to be specified.
bitsyCode.red = function() {

    // Get all the p tags on the page
    var pTags = document.getElementById("p");
    
    // Loop through all the p
    for (var i = 0; i < pTags.length; i++) {
    
        // Set the color of the p tag
        pTags[i].style.color = "red";
        
    }
    
    // Return this element for Chaining purposes
    return this; 

}
Call this new method:
// Set the color of all p tags to red

bitsyCode.red();


3. Create a method with arguments
// Create the BitsyCode function, 
// notice the fn refering to an element needing to be specified,
// also notice the options being passed to the function, this allows the function to accept arguments that the user passes through

bitsyCode.fn.color = function(options) {

    // Set some default options
    var default_options = {
        color:"red"
    }
    
    //Merge objects options and default options. If the user sent no options through then default options will be used.
    var o = bitsyCode.mergeobjects([default_options,options]); 
    
    // Loop through all the elements matched (this.nodes)
    for (var i = 0; i < this.nodes.length; i++) {
        
        // Set the color of all the metched elements to red
        this.nodes[i].style.color = o.color;
        
    }
    
    // Return this element for Chaining purposes
    return this; 

}
Call this new method:
// Call method and pass through options as an Object
// This will obviously make the color of all p tags to yellow

bitsyCode("p").color({ color: 'yellow' });


That's the end of it for now

So that's just the basics of how you can get started with creating your very own BitsyCode methods.
BitsyCode is just a JavaScript library, so you can wrap your existing JavaScript methods with BitsyCode, it's that easy.

Once you have created your BitsyCode method and would like to share it with the world, head over to our submit my contribution page and send us your code to be added on this website, if it has been successful.


Submit my contribution