My first JavaScript “app”

I created a simple app that selects n random exercises from an array. You'll find the app, and links to the source code (on CodePen) below.

Background

I started to build this website in January 2021 with the aim of teaching myself HTML, CSS, and JavaScript. It’s now June 2022, and over the last few months I’ve been asking myself when I’m going to get around to JavaScript.

Three days ago, while I was halfway through a circuit training session in my home-gym, I realised that since starting circuit training (about a month ago) I’d been doing the same 6 exercises, and had not added anything new. I was getting stuck in a routine, and decided that I needed to change it up a bit.

Rather than create a new routine, or a selection of routines, I decided that it might be interesting if each circuit session included a random selection of exercises. Up to this point my circuit training had consisted of 6 exercises, repeated for 3 circuits. I decided to create a long list of exercises that were practical for my home-gym, and then pick 6 at random for each session. My rule would be simple, whatever was chosen for that session—I had to do—even if it was exercises I disliked (yes, burpees).

I could have just written the exercises down on bits of paper and picked them out of a hat, but I’m a nerd, so “complex solutions to trivial problems” is a mantra I live by. My first thought was to use Excel (where non-programming nerds do their data analysis), but then I realised that this was the excuse I needed to start learning JavaScript.

My starting point

Like most people writing code, I started with a Google search, i.e. how to pick random elements from an array. That search led me to this example on JSFiddle. The example shuffles an array of numbers, and then slices off the first "n" numbers from the array. It’s this solution that forms the basis of the “app” that I ended up building.

The app

I really want to call it a “programme”, but I feel that doing so puts me in a certain age category, so I’m going to be cool and describe it as an “app”. It’s very basic, you pick the number of exercises you want, and then hit the ‘create new workout’ button, at which point you’re presented with your chosen number of exercises in the form of an ordered list.

6

    You can see my source code over at CodePen.

    How it works

    The first thing that happens is that the max value of the slider input control is set to the array size i.e. the total number of possible exercises. Once the button is pressed, the array order is randomised, and then the current slider value is grabbed (i.e. the number of exercises the user has chosen) and that number of exercises is read (in sequence) from the start of the randomised array. Any existing list items (exercises) are cleared from the front-end, and the new exercises are added to an ordered list and displayed to the user.

    Planned improvements

    1. Make the app available on a page by itself which is hidden from the usual website navigation.
    2. Add the hidden page link to the PWA app shortcuts. (So I will be able to quickly open the app on my phone, and it will look like a full-page app.)
    3. Add some rules to tweak the randomised output, e.g. if output includes ring tricep-dips, don’t also include bench tricep-dips etc. Maybe using nested arrays?
    2 weeks later: View my progress against the planned improvements. Click to
    1. The app is now available as a standalone page designed for mobile devices: click to open app in new tab.
    2. The app can now be launched from the PWA shortcuts/jumplist on mobile and desktop.
    3. The app now groups together similar (alternative) exercises and ensures that only one option from each group is selected. I had to ask for help to get this done. You can see the new version on CodePen.

    What I learnt

    During the 3 days I spent working on the app (a couple of hours each day), I learnt: