Create a calculator web page using ChatGPT

Prerequisite:

  1. Visual Studio Code

Here I am going to create a calculator web page using HTML, CSS, and JavaScript code but I am having with small knowledge of coding.

Open ChatGPT and type “create calculator using HTML CSS and JavaScript separate file”

But as we can see that the chatGPT response the procedure or idea but not the code which my need.

Now the next step is to get the code so simply type “html file” and now ChatGPT gives us the code.

NOTE: The best part is that ChatGPT remembers your last query.

So Now we receive the html code so click the “copy code” so this code will use.

Now open the “Visual Studio Code” application.

Note: To download the Visual Studio Code software visit https://code.visualstudio.com/Download

Click on Open Folder… to store the all files which we going to create also you can use this option to open the folder if you already created the code file.

Create a new file and mention any name, paste the code, and save the file.

Now open the html file to check the output.

Need CSS code so that page looks good. So I type “css file” so that chatGPT gives me css file.

Create a new file name as “style.css” and save.

Open the html file to check the looks.

Now final and important coding is Java Script.

So same procedure type “javascript” so chatGPT provides JS code for us.

Now our coding is almost complete and now we need the final output. Open the HTML file.

But here “=” button is not working.

So simple TRICK: Again type “javascript file” and then copy the code and replace the code with the existing JavaScript file.

Test Again

Boom 🙂 Now “=” equal button is working fine.

Yes we 👍 created it without coding knowledge Thank You ChatGPT you are Awesome.

  • Leave a Comment