Egg Timer banner

Egg Timer

Created by: Lisha
3 devlogs
7h 29m 17s

A simple and fun web timer built with love that lets you pick how you want your eggs cooked, soft (10 min), medium (15 min), or hard (20 min). Click Start and watch the animation along with countdown until it’s done. It’s built with HTML, CSS, and…

A simple and fun web timer built with love that lets you pick how you want your eggs cooked, soft (10 min), medium (15 min), or hard (20 min). Click Start and watch the animation along with countdown until it’s done. It’s built with HTML, CSS, and JavaScript and shows the time left visually as it counts down.

This project uses AI

For the egg animations I used AI to generate the pixel art canvas code since that was a bit out of my range, but I read through all of it and made sure I actually understood how it worked before putting it in, things like how the animation loop runs, how each pixel gets drawn, and how the stages connect to the timer I already built myself

Demo Repository

README

Loading README...
Lisha
Lisha shipped Egg Timer
9 days ago

Shipped this project!

Hours: 7.49
Cookies: 🍪 87
Multiplier: 11.64 cookies/hr

A while back, a friend asked me, “How do you even know when an egg is boiled?”
It was kind of weird and hilarious trying to explain it, and of course… he took it out at the completely wrong time 😅 So, I built this little egg timer. Simple, cute, and perfect for making sure no more eggs get ruined lol. This reminds me of that moment every time I see this and it makes me laugh. I even made my own pixel images for it because why not make it cute? But then I wanted them to move, to actually animate… so I asked AI, it was so fun to make!

Lisha
Lisha worked on Egg Timer
19 days ago
0h 41m logged

I added pixel art animations to replace the static egg images in my timer app. I used AI to help generate the canvas drawing code since pixel-by-pixel animation was a bit outside what I’ve covered so far. I went through the code properly and made sure I understood what each part was doing. I learned how requestAnimationFrame works to create a smooth loop, how Math.sin is used to create that natural bobbing and flickering motion, and how clearRect wipes the canvas each frame so it redraws cleanly. I also rewrote the whole thing to match my own code style so it actually fits in with the rest of my project rather than looking like it came from somewhere else. The animations run transparently over the site background and swap out based on the timer stage, which connects directly to the logic I already wrote myself.
You can see the before(2nd slide) and after results(1st slide) below:

0
Lisha
Lisha worked on Egg Timer
20 days ago
6h 47m logged

Here are some changes I made in my egg timer:

  1. Added egg-specific timers: 🥚 Soft (10 min), 🍳 Medium (15 min), 🔥 Hard (20 min).
  2. New home page with clickable egg cards lets users choose the egg type.
  3. Timer dynamically updates countdown, progress bar, stage images, and title based on selection.
  4. Added a back button for easy navigation.
    You can see the “now’ and “before” images below:
Attachment
Attachment
0