1. Create a new object.
I have created a new object called Spinner. Everything inside the curly braces of this object is now the blueprint from which any other objects created from it will follow. The value inside the parenthesis represents what will be parsed into the function (coming up in step 2). This can be any word.
2. Create a new instance of the object for each element with the class .js_spin
Outside the object constructor function, I have used a loop to find every instance of .js_spin and create a new Spinner object for it. Without this approach, only the first .js_spin item on the page will work. Now we can re-use this pattern as many times as we like on the page.
spin = new Spinner(spins[i]); is how the new Spinner object is created. The parenthesis contains the specific instance of .js_spin being used to create the object, which is parsed into the object. You can see this on the constructor function in step 1.
spin.init(); starts the initialisation function, which is where everything begins for this object. It is a public method so it can be accessed from outside the object.
Now we need to make the spinner object do something, so we'll add some properties and methods.
3. Set variables and values for use in the object.
I need to store values in variables so that they can be re-used across the code. This means that if I need to change a value later on, I will only need to do it in one place.
Add and remove buttons
The number input field needs to be accessed and changed, so there needs to be a selector and some variables to store the attribute values.
4. Create an initialisation method
This is a public method so it can be accessed outside the object. When a new instance of the object is created, the init() method is called to get it running. In this init() function, the number input and buttons are setup to make it look and behave how we want. An important step is to add click events to the buttons because we want the add button to add to the value and the remove button to remove from the input value. Both of these need functions with instructions on how to make this happen.
5. Create some more methods
Here is the add function. It is a private method because it does not need to be accessed from outside the object and I do not want the instructions inside the function to be changed.
In the full example on Codepen, there is also a remove function created in a similar way.
I have also created public methods for setting the button selectors and markup because we may not want them to be the same for each number input spinner. So, when a new object is created, it is possible to specify the button markup and selectors each time or they will just take the default values. This makes the code even more flexible and re-usable—I love it!
It seems like a small pattern, but I think my learning and understanding that has come from this is great. I know i'll use this code again on another project and I'm super excited about building the next pattern for my toolkit.