Vanilla Marathon

How it started

My colleague Vicky donated to Macmillan Cancer Support on my JustGiving page for the Edinburgh Marathon on 26 May 2024. Her accompanying comment was a six-line C program, which was pretty cool.

int distance = 26;
int position = 0;
while (position < distance) {
  position ++;
}
printf("Finished!\n");

I could do that in JavaScript and put it on the Internet, I thought — so I built it and put it up on Netlify.

Step 1

There are no libraries or frameworks needed, just HTML, CSS and some Vanilla JavaScript (a parody project that has no code). It was quite refreshing and I wanted to keep it simple but maybe a bit more intetesting…

Animation

I liked the idea of a little Sprite that moved across the bottom of the page. So I added a black circle, increased the number of steps and made it move from left to right.

Step 2

Rolling

That sprite looks like it sliding not rolling. Let's make it look like a cog and rotate it as it moves.

Step 3

Icons

I shared this version with Vicky and she asked what I'd used to build it. Just HTML, CSS and JavaScript I said, proudly. Oh, and Fontawesome for the icon … I'm going to have to do my own icons aren't I?

That took longer than I anticipated. I did them in Affinity Designer, exported to SVG and then a small Ruby script exported them into a javascript file, which would replace HTML like this with an SVG icon:

<i class="
  vanilla-icon
  va-person-running">
</i>

That's a simlar approach to Fontawesome, but a lot less elegant. Drawing icons is hard. I definitely took inspiration from the Fontawesome one but I started from scratch. I guess the best you can say about mine is that it's unique.

Fontawesome
Not-so-awesome

All the edges

I decided it would be more interesting if the sprite did a tour of all four sides of the browser. So I added some more maths to change the left and top and made the person rotate each time they changed sides.

Step 4

Avoid the sprite!

I didn't like how the sprite trampled over the heading.

Step 5

How it ended

Moar icons!

Play
Paused
Running
Resting

I added keyboard shortcuts with keys that you can click. Switched to defaulting to kilometres be added a toggle so you can switch back to miles if that's what you're used to.

You can now get faster or slower too, with your pace displayed in minutes per kilometre/mile.

This is what I built: Vanilla Marathon

Todo