So I’m trying to create a time picker to allow the user to select a time by using the up and down arrows as shown on the image attached. I want the first to go up in hours like a 24 hr clock and the minutes to :59 using the arrows.

However I am struggling to get my head around the variables, any help would be greatly appreciated

But not if hours is at 23, right? Then both hours and minutes need to be set to 00.

The answer is more conditional cases.

When I click the minute increment arrow [event], if minutes are 59 and hours are less than 23 [condition], set minutes to 00 and increase hours by 1 [actions].

However you’ll continue to discover more edge cases and conditions. At this point I might start to rethink how the whole thing is built. I’d probably use a single variable that counts the timer in minutes and then displays minutes and hours based on the total count of minutes.

For example, hours can be represented as: [[ Math.floor(totalMinutesCount / 60) ]]

And minutes represented as: [[ totalMinutesCount % 60 ]]

So, assuming a totalMinutesCount value of 381: [[ ('x0' + Math.floor(totalMinutesCount / 60)).slice(-2) ]]:[[ ('x0' + (totalMinutesCount % 60).slice(-2) ]] yields 06:21

Then you could have your hour buttons add/subtract 60 to totalMinutesCount and your minute buttons add/subtract 1.

If you go this way, you won’t need to add special cases for rolling over to the next hour when minutes goes past 59, it will all happen automatically.