Colin Brown uses Canva's AI feature to generate a pricing calculator, then fixes the broken code with ChatGPT-4. The initial calculator fails to update when you change options, but ChatGPT's corrected JavaScript makes it work. The whole thing takes under five minutes and requires no coding experience.
Today I'm going to show you some things you may not be aware that you could do using different software solutions that exist out there on the market that utilize AI. So today I'm going to show you specifically Canva, canva.com. Canva is known for creating designs, Facebook ads, calendars, sheets, whiteboards, presentations, social media, so forth and so on. And what I wanted to do is check out a new feature called Canva AI. You can access it by clicking here or clicking here on the side panel. This does require that you have a paid version, and unfortunately, most software that utilize AI does have some kind of subscription cost so that it covers the expensive costs of the AI tokens that it uses. Sorry, this is a paid version, but it's definitely worth what it costs because it saves me so much time. So in any case, I went ahead and clicked on AI. I can go ahead and click on Code for Me. I could go ahead and put in a prompt that would describe what I want it to generate, but I'm going to click on Code for Me. And there were some initial prompts that they've built that are fairly easy to implement. So I just went ahead and I wanted to create a pricing calculator. So I clicked on this, it generated the prompt for me. And of course I can now edit this prompt so that it's customized to my specific needs. So I changed name, the company, the pricing, and then I just went ahead and clicked on submit so that it would generate the code. Now what it generated, unfortunately, let's take a look here. This is what it looked like, and it generated all the HTML and the JavaScript automatically. However, it didn't exactly work. So you'll notice here that works if I roll over. However, whenever I change the options, the consulting hours or the custom integration doesn't work. So what I did is it generates a code. I went ahead and just copied the code. I just hit publish website. Copied the HTML, and then I went into ChatGPT. This also happens to be the paid version of ChatGPT, which is going to give us better results. And I'm just using the ChatGPT 4.0 version. I went ahead and copied all of that code, and I just put at the top, can you fix this code? Then I pasted all of that in there. It's a lot of code to generate, and it instantly found the issue and fixed the code, wrote all the JavaScript and created the functions that were required to get the pricing to be calculated correctly. And it even gave an explanation. I went ahead and then copied that code, put it up on my web server, and it generated this pricing calculator, which now, based on what you select, changes the pricing summary. So if you want to scoot this consulting hours down or up, if you want to take off custom integration, this is a slick, well-designed pricing calculator that took me less than 5 minutes to create and works flawlessly after some tweaks in ChatGPT. So you may find other tools out there where you generate code. And if you do have issues, you can go ahead and just take it over to ChatGPT or Gemini. Gemini is probably the best programming LLM out there right now. And put it in there and it will fix that code pronto and you'll be up and running in no time at all. You don't even need to know how to code. It will just fix the code automatically for you with a simple prompt. So give that a shot. You might have a project that you could utilize this in your own business. And I can't wait to see what you'll create.
