Ransom Note Generator

Stage 1

Generate a ransom note with random fonts, sizes, baselines and slight rotations applied.

Once we had a chance to study HAL's code, we noticed that the code he produced for rotations, while correct, could not be applied to inline elements like spans.

Applying our own style of display: inline-block to spans, we got the rotations!

We removed the unwanted (and unrequested) underlining and strike-out styles and assigned min/max font sizes, base shifts, letter spaces and rotations for the randomly-generated parameters.

HAL had also not applied vertical-alignment to the spans, so, after some research at W3Schools, we applied that as well.

We identified spaces and targetted them separately for styling to make sure words were adequately spaced, and by counting spaces we determined when to add brs to the output.

A smidgeon of HSL colors for text and background, some shadow and borders...wow: a 'real' ransom note!

Back to the Ransom Note Home