Is ChatGPT code any good? Will it actually do what I want? Will it be a painful journey to get to something functional? I wanted to find out. So carrying on with my ChatGPT experiments, I decided to play with its more nerdy abilities.

I set the AI to work creating a web tool. (I create web tools quite regularly, so I know a thing or two about them). You can play with the web tool a little bit further down the page. But first, let me tell you how I went about it.

This was another TV-watching, half-focusing exercise. I’ve previously run workshop exercises where I get people to complete sentences. They’re usually pretty fruitful. So I wanted to see if I could generate a bunch more sentence starters for people to complete.

I started by asking ChatGPT to generate me 20 sentence starter prompts using this prompt:

Please write me a list of 20 sentence starters in the style of the following examples: “the world would be a better place if…”, “I wish that 20 years ago I had…”, “There should be a law that demands…”. Write your output as a numbered list.

To my great surprise, it nailed it first time. Every suggestion was a beauty. I really wasn’t expecting this so – like a greedy labrador that doesn’t know when to stop eating – I asked for 30 more. I ended up with a list of 50 fantastic sentence starters.

They’re so good I’ve even started using them for self-reflection. It’s a bit like free therapy, I guess.

Can ChatGPT code Javascript?

Now I had a bulging sack of prompts, I just needed to turn them into a web tool. So, I asked ChatGPT to write me some javascript that would serve up a random suggestion without repeating any of the last 10 suggestions. And it did it perfectly on the first try!

Now please write me a JavaScript function that uses these 50 sentence starters. It will pick a random one and write it to the class “starter”. It will not repeat any of the last 10 selections.

I’ve already got a nice little javascript function that picks a random item from a list, so I pushed it to add more functionality. I wanted to make sure it didn’t repeat prompts too regularly. That’s why I added the bit about not repeating the last 10 suggestions. It works beautifully! So now I have an even more powerful javascript function I can repurpose in the future.

Also, take note that I’m polite in my prompts. ‘Please’ and ‘thank you’ are good habits to develop in every part of your life, even chatting with robots.

Can ChatGPT code HTML?

Next, I asked ChatGPT to write me the HTML code for a webpage. I started simple just so I could test it out:

It gave me the basic bones of the page but didn’t do a great job of the speech bubble. So we went back and forth a bit.

I tried to get the AI to create an SVG for me. But that wasn’t really working as well as I hoped. I took a step back and handed the problem over to ChatGPT. It immediately solved using CSS. All it needed was a little fine-tuning from me and it was good to go.

I pieced everything together into a functional webpage and then started adding other little pieces of code I got it to generate. Like the link text at the bottom of the page that flashes three times before settling down. Nice! I would rather not have written that keyframe animation code by hand.

So here’s the finished tool:

I know it doesn’t look that great as an embedded tool, so you can find it here.

Lessons Learned

This webtool isn’t complex by any means, but it’s been a great exercise in coding with ChatGPT. Let me share a few learnings with you:

• Tackle it in chunks
  Start broad and then hone in on the finer details. Go for functionality first and style after. If pieces aren’t working, get ChatGPT to work on just that individual part.
• Play your part
  Instead of doing lots of back and forth, I played with elements in the CSS to solve the problem myself. Remember the ‘chat’ in ‘ChatGPT’. There are two of you working on this. It’ll go a lot faster if you add your own skills rather than just barking commands.
• Don’t force your solution
  The AI solved the problem elegantly when I stepped back from trying to use a particular method. With all briefings, you need to walk a fine line between over-defining what you want and not giving enough information. It’s worth finding that line.
• If you don’t know how to put it together, ask ChatGPT
  One of the wonderful things about ChatGPT is that it will patiently teach you how to do things without sighing or rolling its eyes. I’m a mediocre coder but I wanted to know if this would be possible for a beginner. I asked for all sorts of advice along the way and the AI give me brilliant instructions, broken down into actionable steps. Lovely!

In the end, I got exactly what I wanted in a fraction of the time. It would have taken me hours to come up with this many sentence starters and build the web tool myself. From start to finish, the whole thing took me less than an hour.

I’ll definitely be using ChatGPT as a coding partner in the future.