A SpinButton is not related to a Spinner. It's a text entry field which only accepts numbers, and which has plus and minus buttons to let you change the value without having to type anything in.
It's best used when it's obvious that only a number can be entered into it. In this example, two SpinButtons are used for the number of kittens and number of cans of tuna to give them.
These are the libraries we need to import for this application to run. Remember that the line which tells GNOME that we're using Gjs always needs to go at the start.
All the code for this sample goes in the SpinButtonExample class. The above code creates a Gtk.Application for our widgets and window to go in.
The _buildUI function is where we put all the code to create the application's user interface. The first step is creating a new Gtk.ApplicationWindow to put all our widgets into.
We create each Label individually, and then string them together along with the SpinButtons. The last label needs to show the number of cans of tuna per kitten, so it has a variable in the middle, which corresponds to an equation that uses the SpinButtons' get_value functions to find out what they're set at. JavaScript's Math function's floor method is used to round the number of cans of tuna per kitten down to the nearest whole number.
Here we use Grid widgets to keep everything organized. One Grid holds the labels and SpinButtons in order, while the next puts that Grid on top and the final Label on the bottom.
There isn't a wrong way to organize things in Grids, so long as you like how it turns out. In this case, the top Grid has a margin on the bottom to keep it evenly spaced from the bottom Label, and the bottom Label is inside a separate Grid so it will be centered relative to the Labels and SpinButtons on the top.
Finally, we add the larger Grid to the window, then tell the window to show itself and all the widgets inside of it.
Gtk.Adjustment
Gtk.Application
Gtk.ApplicationWindow
Gtk.Grid
Gtk.Label
Gtk.SpinButton