Prompt Engineering with ChatGPT
a.k.a. You Too can be a Developer
Prompt Engineering with ChatGPT
a.k.a. You Too can be a Developer
It is relatively easy to use ChatGPT to create an interactive JavaScript application. The trick is to ask for exactly what you want. This is called "Prompt Engineering". We will use the ideas on this page to tinker with prompt engineering. The examples shown below give you an idea of what is possible. With a partner, brainstorm on the kind of things you might want to do, and then practice using ChatGPT to create it!
Your ChatGPT generated Javascript code can be run:
In a text file (NotePad on Windows, or TextEdit on Mac) that is stored with a .html file name extension. To run it then just click on the file and it should launch and run in your browser.
On a web page, such as this one.
A web page where you can insert Javascript code.
I use google sites (like this page), which is free. If you want tutorial help, do a google search or use this tutorial on YouTube.
Access to ChatGPT.
The free version of ChatGPT limits the length of code you can generate. The plus versions costs $20/month. Do a google search on the difference or see this page. Other generative AI tools could alternatively be used to generate Javascript code, such as Microsoft's copilot, Google's Gemini, or just a web search.
Create a new blank page within your google site. To do this select the "Pages" option near the upper right, and then select the large plus sign at the bottom of that section.
Select the "Insert" option just to the left of the "Pages" option, and insert a text box and an Embed component. Select the inserted Embed window on your page and select the pencil near the upper left.
In a separate browser window use ChatGPT to create the Javascript code you want. Copy it so it is ready to be inserted into your page.
Back on your google site page, paste the ChatGPT-created code into the window.
Select the large Publish button near the upper right. Then in the pull-down arrow just to the right of the Publish button, select "View Published Site" and try it out. Redo above steps as desired.
ChatGPT Prompt: Write a self-contained, interactive four-function calculator in javascript
ChatGPT Prompt: Write an interactive javascript program where the user can play Tic Tac Toe against the computer. The program should indicate when someone has won, and should be as strong of an opponent as possible.
ChatGPT Prompt: Generate self-contained javascript code to display an interactive two octave piano keyboard, with both white and black keys, with the black keys in between and above the white keys, where pressing the keys plays the corresponding note sound. Include the ability to use the home row keys to play the first 11 white notes, and the keys above the home row keys starting with W to play the in between black notes.
ChatGPT Prompt: Create a javascript animation that shows ripples in water in the spot where I click. Include a title that says "Click to Ripple"
Besides writing stand-alone applications like the ones above, we can also do a call-and-response (called an API) to online programs others have created. Many of these require you to sign up for an API key, so that API providers can keep track of who is using their services. Many API services have a free tier. For example api-ninjas.com allow you to sign up for a single key that gives you 10K API calls per month, across a variety of APIs.
ChatGPT Prompt: Write Javascript code to prompt the user for city and return the current weather forecast in that city, using the weather.gov API
ChatGPT Prompt: Write javascript code to prompt the user for a stock market ticker symbol, then make an API call to find and display the current value of that stock.
(For this example to work, you first need to get a free API key from Alpha Vantage, which you can do at alphavantage.co That will give you permision to use their software across the network, and give you 25 free queries per day.)
ChatGPT Prompt: Write a stand-alone javascript program to retrieve and display a trivia question. Use the api-ninjas.com trivia API. Display the answer when a button is pressed.