Addin.js

Adding items to DOM list never been easier
View Demo · Report Bug · Request Feature

Built With

Addin is made purely in Javascript

• Javascript

Getting Started

Just follow these simple steps

Prerequisites

You need bootstrap to use all the power of Addin 😎

Installation

1. Get a copy of one of the .js on the dist folder
2. Import it in your file
3. Create a div to hold Addin

<div id="addedjs">
</div>

3. Simply instante it

var list = new Addin('addedjs'); //default -> english

4. That's it! 😁👌

Usage

-Simple usage:

...
<div class="addindiv">
</div>
...
<!--Import the script-->
<script src="/js/adding.min.js">
<!--Initialize Addin -->
<script>
var addin = new Addin('addindiv');
</script>
<!--Just it 😁-->

-Some Customization & Spanish:

...
<div class="addindiv">
</div>
...
<!--Import the script-->
<script src="/js/adding.min.js">
<!--Initialize Addin -->
<script>
var list = new Addin('addindiv',
    {
        // Values
        initialValue : 0,
        
        // Classes & IDs
        superParentDivClass: 'addobjectsesp',
        parentDivClass: 'addedesp', //<-- This will add a number after the classname ie: added0
        parentDivExtraClasses: 'col-sm-12',
        fieldName: 'addobjectesp',
        fieldClass: 'addjsesp',
        fieldExtraClasses: 'form-control',
        addButtonClasses: ['btn','btn-success'],
        removeButtonClasses: ['btn','btn-danger'],


        // Strings -> Translatable??

        strings: {
            buttons: {
                add: 'Añadir',
                remove: 'Eliminar',
            },
            empty: 'No se ha añadido ningún curso',
            itemName: 'Curso',
            itemPlaceholder: 'Nombre del curso'
        }

        }
    ); //Demo en español
</script>
<!--Just it 😁-->

-Super Customization (use {loop} variable to differenciate objects os yout custom element):

...
<div class="addindiv">
</div>
...
<!--Import the script-->
<script src="/js/adding.min.js">
<!--Initialize Addin -->
<script>
var list = new Addin('addedjsespcustom',
    {

        // Values
        initialValue : 0,
        object: `<div class="card">
                        <div class="card-body">
                        <div class="form-group ">
                            <label class="form-control-label" for="input-{loop}">{loop}</label>
                            <input type="text" name="{loop}" id="input-{loop}" class="form-control {loop}" placeholder="{loop}" value="{loop}">
                        </div>
                        <div class="form-group ">
                            <label class="form-control-label" for="input-{loop}2">2{loop}</label>
                            <input type="text" name="2{loop}" id="input-{loop}2" class="form-control 2{loop}" placeholder="2{loop}" value="2{loop}">
                        </div>
                        </div>
                        </div>`,
        // Classes & IDs
        superParentDivClass: 'addobjectsespcustom',
        parentDivClass: 'addedespcustom', //<-- This will add a number after the classname ie: added0
        parentDivExtraClasses: 'col-sm-12',
        fieldName: 'addobjectespcustom',
        fieldClass: 'addjsespcustom',
        fieldExtraClasses: 'form-control',
        addButtonClasses: ['btn','btn-success'],
        removeButtonClasses: ['btn','btn-danger'],


        // Strings -> Translatable??

        strings: {
            buttons: {
                add: 'Añadir',
                remove: 'Eliminar',
            },
            empty: 'No se ha añadido ningún curso',
            itemName: 'Curso',
            itemPlaceholder: 'Nombre del curso'
        }

        }
    ); //Demo en español con custom object
</script>
<!--Just it 😁-->

You can view the DEMO to see 3 fully working usages

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Edgarborras94 - @edgar_94_ - [email protected]