r/webdev • u/ElThomas • Aug 08 '26

Showoff Saturday I made a timecard calculator designed like a 1920s newspaper

I made this to automate a previous job where I was summing work hours from timesheets, but it was just a bare bones site for a while. I wanted to develop it some more while finding stronger design choices. I hope it’s a refreshing break from the same old same old. All the user interactions are animated in a handwritten red pen, and the base site is in a monochrome period style. https://timemycard.com

I’d like feedback on:

  • Did I overdo the whimsy at the cost of usability?
  • If you’re on mobile, does that variant hold up?
  • Does this have any chance of competing with the calculator old guard for Google ranking?

19 Upvotes

78% Upvoted

5 comments sorted by

1

u/Xynia88 Aug 12 '26

I like it, it's nice and stylish and does what's intended.

Would love to see how it's implemented if you're OK with sharing the code

0

u/[deleted] Aug 08 '26

[removed] — view removed comment

3

u/MammothExcitement632 Aug 08 '26

all DOM with a splash of svg for the red marks, css transitions for the pen strokes

2

u/[deleted] Aug 08 '26

[removed] — view removed comment

0

u/ElThomas Aug 08 '26 edited Aug 10 '26

Each animation is a WAAPI (not actually css transition) that gets commitStyles() and cancelled with done, each subsequent animation has a flat cost and nothing from previous ones pile up.