Cookie Calculator

I just pushed the final touches to the Cookie Calculator! Here’s what’s new:

• Instructions: I added the full baking method, and it’s dynamic! It tells you exactly what percentage of your egg mixture to use based on the slider.

• Bi-directional Audio: The slider now has a different sound when you move the slide down. It still pops when you add cookies, but I added a new ‘crunchy’ sound for when you move the slider down.

• Fav icon Added a cookie favicon to make the tab look better.

• ReadMe: Wrote a ReadMe on GitHub.

The site feels incredibly tactile now. Hope you all enjoy baking some cookies! (or just playing with the site) 🍪

Added some juice to the Cookie Calculator! 🍪
I added a physics-driven container where cookies actually spawn, fall, and stack.

The coolest part? When you lower the count, the cookies don’t just ‘poof’ out of existence anymore, they crumble into tiny particles that linger for 3 seconds before fading away.
Nailing the custom physics shapes was a bit of a headache, but it makes the whole experience feel so much more tactile and satisfying.

In this screen recording you can also hear and see the things I changed/made for the last devlog

I’ve focused on making the slider feel satisfying by adding layers of sensory feedback:

• Dynamic Sound: Every slider movement triggers a “pop” sound. And what’s cool, the pitch increases as you add more cookies.

• Physical Reactions: The ingredient cards now “bump” every time the value changes, giving the UI a tactile, energetic feel.

• Haptic Feedback: I’ve implemented the Vibration API. Every step of the slider sends a tiny vibration pulse to your device.

Note on Haptics: Since I’m using an iPhone, I can’t feel the vibrations in the browser myself (Apple is quite strict with web haptics!). If you’re on Android, please let me know how it feels! Test it here: loek.oerlemans.tv/cookie_calculator/

I just noticed the wrong video was uploaded and i can’t change it :( , sorry for that.

The goal this time was making the site look as good as the cookies taste. Here’s what I updated:

• Layout: Centered everything to make the site feel clean.
• Custom Slider: Replaced the boring standard slider with a custom-styled one that fits the vibe.
• Doodle Vibes: Switched to a hand-drawn font for that cozy, homemade feel.
• Ingredient Cards: Transformed the list into a grid of cards. I added a slight tilt to them for a playful look and a hover effect where the borders light up when you point at them.

First Devlog! 🍪
I built the core logic of my cookie calculator:

• Interactive Slider: Added a slider that lets you choose exactly how many cookies you want to bake.
• Live Ingredients List: I used JavaScript to make the ingredients update instantly as you move the slider.
• Smart Logic: I even added a special rule for eggs (because you can’t easily use 0.3 of an egg!).
  

I just noticed you can add an image in the text of your devlog so here is a big cookie!