Michael Sperber

I recently created a web app, and I chose to use ChatGPT to help me with the project. It was a very interesting experience, so I thought I would share how it went compared to my expectations.

(Note: I composed this post without the help of ChatGPT.)

Planning

Anyone who’s tried programming will tell you that developing a plan is critical to the success of the project. Diving in without a plan is tempting, especially on small individual projects, but you will pay a heavy price in the long run.

Having ChatGPT to help plan out the project was a tremendous help. It was able to identify the files and languages that I would need to use, and to some extent it was helpful with planning out the data structures and functions that I would need to build. (More on that later.)

My initial prompt took two iterations before I was able to zero in on the amount of specificity I needed to give. ChatGPT is fairly good at making extrapolations from incomplete information, but you certainly get better results if you can explain exactly the output that you want.

HTML & CSS

Since this would be a web application, I needed a basic framework for the application to exist within. I started with a prompt that outlined the entire project and asked for the HTML I would need:

I would like for you to help me create a browser-based web application. The application will be a game of Nim, where the human will play against an AI opponent.

There will be 3 components to the application:

index.html – An HTML file containing the basic HTML elements and which calls the JavaScript application.

styles.css – A CSS file which will create the styling for the HTML elements.

app.js – A JavaScript file which will contain the programming and logic that the game follows.

The page should have a dark grey background, and the text should be off-white, like a dark theme. The game elements will be depicted by off-white circles, arranged in some number of rows.

When the application loads, a random starting position will be generated. There may be 3 to 5 rows of objects, and each row may have 1 to 12 circles. Each row will be centered on the screen.

There will be a button below the circles to allow the player to pass the turn to the AI opponent, but only on the first turn. If the player decide to go first, then they may click on circles to make them disappear. After clicking on a circle for the first time, the pass turn button will turn into an end turn button. On each turn, the player may remove as many circles as they like, but only from one row. The player must remove at least one circle on their turn. The player will click on the end turn button to indicate that they are done with their turn. A message area will indicate whether it is the player’s or the computer’s turn.

After the player is done with their turn, the AI player will take a turn. In a future iteration, the AI will play perfectly, but for the first iteration, the AI player will make a random move. When a player ends their turn with only one circle remaining, then they win the game. A message will be displayed to indicate the winner. The “End turn” button will be changed into a “New game” button, which will allow the player to start a new random game, as if the app were opened for the first time.

To start, please generate the index.html file for me.

After receiving ChatGPT’s response, I asked for the CSS code that I would need:

Now, please generate the styles.css file, using the specifications I made earlier.

For brevity, I won’t include the output here, but you can check out the source code on the project page on GitHub.

The reason that I don’t need to include the output here is that ChatGPT produced excellent HTML and CSS, and I only needed to edit it for my preferences and to add new features later in the development. (ChatGPT helped with those additions too!)

Up to this point, I estimate that ChatGPT saved me about an hour of work that I would have needed to produce this code on my own.

JavaScript

Now we come to the meat of the project. What we’ve produced so far is just a blank page with some labels and a button that does nothing. The JavaScript code tells the app what to do, and it represents over 75% of the codebase for this project.

I started off with a very ambitious prompt:

Now, please generate the app.js file, which contains the logic and programming needed to run the game

Here I started to run into a few problems.

First, ChatGPT’s response is limited by length, at least in the free version that I used for this Project. You can say “continue” to prompt it to finish its thought, but I’ve found that usually there is usually something lost between the initial response and the continued response.

Second, the implementation that ChatGPT wrote was incomplete. There were many valuable ideas to be gleaned, but this was not useable code. There were mixed naming conventions, meaning that some variables and functions had different names throughout the code, and there were several functions or requirements that were completely missing.

Rebuilding

I know that my expectations might have been too high, but I was a bit disheartened with ChatGPT’s output. I sent a few messages to try to fill in the missing gaps, but I came to the conclusion that it would be less work for me to write the code from scratch than to try to unravel the mess.

As I started to rebuild, I did find some useful bits from the incomplete code that ChatGPT had generated earlier. The data structures and functions served as a road map for me to follow. Almost everything required a rewrite, but I was able to save a few lines here and there. The rough structure that ChatGPT had given, and the few lines of code I was able to save still saved me time over composing the code unassisted, even with the time that I had spent trying to piece together ChatGPT’s code.

Expanding

After I made my initial commit, I started to expand the project. My initial version featured an AI opponent that only made random moves, but I wanted to create a perfect AI opponent, which is possible because Nim is mathematically solved.

One of the concepts in the solution to Nim is the “Nim sum,” which is the sum of two binary numbers, ignoring carries. This could also be described as “bitwise XOR.” For example, the Nim sum of 3 and 5 is.

011 ⊕ 101 = 110 (6)

In order to create a perfect algorithm, I would need a function to calculate the Nim sum of every row at each move. I decided to test ChatGPT’s ability to extrapolate from incomplete information by asking for it to create this function without describing what the Nim sum is:

Please help me to write a JavaScript function that will find the Nim sum of several numbers.

ChatGPT was able to understand what I was asking for, and it created an elegant function using the bitwise XOR operator, ^, of which I was previously unaware:

function findNimSum(nums) {
  let nimSum = 0;
  for (let i = 0; i < nums.length; i++) {
    nimSum ^= nums[i];
  }
  return nimSum;
}

Refining

After I completed the major features that I wanted to include, I spent some time to refine the code for efficiency and readability. I also wanted to make the game look as attractive as possible.

I decided to ask ChatGPT to critique the code that I had created and to suggest edits to improve the code’s correctness, efficiency, and readability. ChatGPT did give some minor pieces of useful feedback, such as suggesting where I could rename some functions or include additional comments, but I didn’t find this feedback too useful overall.

I was quite amused, however, that ChatGPT chose to expand a feature without my prompting. ChatGPT noticed that I had included a feature where the AI opponent would write a taunting message if the human player made a mistake. On its own, ChatGPT decided to write more taunts. Here are ChatGPT’s original taunts:

You’re not very good at this.

I’ve seen better moves from my grandma.

Is that really the best you can do?

You should give up now while you still have some dignity.

You’re making it too easy for me.

I’m surprised you made it this far.

Are you even trying?

I’m starting to feel sorry for you.

Do you need me to explain the rules again?

You’re no match for me.

ChatGPT

When I revisited the CSS code in order to make the app look more attractive, ChatGPT was quite helpful. I wanted to create an effect that would make the game objects look like spheres instead of flat circles. With two prompts to clarify, ChatGPT generated this code, and taught me about the radial-gradient() attribute:

#game .pearl {
   background: radial-gradient(circle at 40% 40%, #fff, #d9d9d9, #a6a6a6);
}

Conclusions

(This is only my first experience using AI tools, so my conclusions here can only be limited to ChatGPT.)

• ChatGPT is an extremely useful tool, but one must understand its limitations.
• It was very helpful in mapping out the project, and it could even generate accurate and useable HTML and CSS.
• It is a great starting point to learn how to do something new, or to get feedback on your progress.
• ChatGPT could be useful for generating individual JavaScript functions, but it is not yet capable of composing entire applications.