AI Tools Uncategorized
Photo of author

From Groans to Code: How Claude and ChatGPT Helped Me Build a Dad Joke Webpage

I recently build something silly and it’s quickly becoming one of my favorite little project.

Random Dad Jokes

The idea was simple, click on a card and it tells you a dad joke. Click again, you get a new one. It would be something that makes my kids roll their eyes and dads everywhere proud.

I started with Claude, asking it to draft the first version of the site. After a few revisions and it handed me a working prototype. One problem? Everything was crammed into one HTML file, little clunky but functional. When I clicked the card, a joke popped up. That was enough to show the basic premise of the website worked.

Like this classic:

“Dad, I’m hungry.”
“Hi Hungry, I’m Dad!”

From there, I turned to ChatGPT to clean things up. It split the code into three proper files; HTML for the structure, CSS for the design, and JavaScript for the joke engine. Suddenly the project felt like a real web app instead of a rough draft.

ChatGPT also helped me polish the look. The background changes color with each new joke, the punchline slides in with a little animation, and it all works smoothly on both desktop and mobile. Of course, a joke generator is only as good as its material. Claude’s version had just a few jokesa but with ChatGPT’s help, I was able to build the list out to 100 dad jokes.

What I loved most about the process was seeing how the two AI tools complemented each other. Claude gave me the bones: a quick, working prototype. ChatGPT gave me the polished version. Together, they turned a goofy idea into something delightful, a little webpage I can open anytime I want to embarrass my kids or make a coworker groan.

And honestly, isn’t that the true purpose of a dad joke?