Prompt Engineering

Prompt Engineering with ChatGPT

Prompt Engineering Tutorial

For the prompt engineering tutorial process described below, keep track of what happens and what your thoughts are on it.  Under the "Assignments" category in your online portfolio create a page called "Prompt Engineering".

Open up ChatGPT and type in the following:

In interactive tutorial mode, teach me about prompt engineering

After you've gone through the process that results from the above prompt, in your online portfolio reflect on your experience.  List the following questions, and answer them. 

1. If you were to do this again, or recommend it to a classmate, what would you change about your prompt to make it better suited for you?

2. What aspects of the experience were what you expected, and what aspects were unexpected?

3. If you happened to run into a classmate from some other class on your commute into campus, and they asked about prompt engineering, in your own words how would you describe what you learned?

Remember to check to verify your page is publicly viewable, otherwise we cannot verify your work and give you credit for it.  

You Too can be a Developer

It is relatively easy to use ChatGPT to create interactive JavaScript applications.  The trick is to know how to ask for exactly what you want.  Ideas on this page will help us tinker with this, known as "Prompt Engineering" .

First, brainstorm with a partner on simple application ideas you might want to make.  These could be utilities or tools, interactive games, artistic expressions, or even connections to data somewhere else.  Try and come up with at least seven different ideas, and organize them ranging from simple to more complex. 

After you've done your brainstorming, browse through the examples below to gather information on what sorts of things are possible.  You might also want to do some internet research on interesting Javascript applications to give you even more ideas.  

Now let's practice using ChatGPT to implement some of these ideas.  Be prepared to modify your ideas and edit your prompts multiple times to get something interesting. 

Your ChatGPT-generated Javascript code can be run:

1. In a text file (NotePad on Windows, or TextEdit on Mac) that is stored with a .html file name extension.  To run it, just click on the file, and it should launch and run in your browser.

2. On a web page, such as this one.  

Stand-Alone Interactive Apps

Below are some sample ChatGPT prompts to give you ideas on prompts and what their resulting creations.  Expect to do some fiddling!

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"

ChatGPT Prompt: Create a javascript interactive program to play the game of mastermind, where the human player sets the pieces and the computer does the guessing.

Using Application Program Interfaces (APIs)

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 will 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.

Explore More

See the Wall Street Journal 5/4/25 article Intimidated by AI? Here’s How to Get Started