Let's Make a JavaScript App with ChatGPT

April 3, 2023

You might remember a recent post on asking ChatGPT about the Gothic. I there mentioned how ChatGPT is a tool and, like every tool, its successful use depends on the user and scope. I also mentioned how, in my opinion, the most intriguing application of ChatGPT is as a programming helper. Well, that’s what I decided to try in this post: Let’s make a JavaScript app with ChatGPT!

Obviously, starting this mini project I had to establish certain methodological factors. That is, I had to decide on how to do certain things.

The main one was what the app would be about. For simplicity’s sake – both in terms of the confines of the post and the amount of effort I was willing to put in programmatically – I decided that the JavaScript app ChatGPT would make had to be a simple one. No need to create any full-fledged adventure game here.

I also had to decide whether I would only get help for this JavaScript app from ChatGPT, e.g. for certain functions, or I’d ask it to generate the code in its entirety. I quickly realized that, even if I’d have to do at least some of the mixing-and-matching, for the purposes of this experiment I should let ChatGPT to do most of the work.

As for what program to make, I thought the best idea would be to make something I’ve already made myself, for comparison. I opted for my Poem Shuffler. The results were very intriguing, to say the least!

JavaScript App ChatGPT — The image superimposed on the stock programming image represents a ZX Spectrum +2 – my very first computer. Younger audiences may not understand this is a computer, because of the tape recorder – hang on; do younger audiences know what **that** is? – which was used to read/write data. We’ve come a long, long way since 48k games.

Making a JavaScript App with ChatGPT: A Poem Shuffler with Zero User Input

Yes, you read that right. I began thinking I would at least need to put together the HTML code, but it turns out I was wrong. The prompt I gave ChatGPT was: “Using the PoetryDB API and JavaScript, provide code that shuffles the lines of a random poem when the user clicks a button. Include an input form for the user to upload their own .txt file to have its lines randomizes [sic], as well as a button to fetch a new poem from PoetryDB”.

The result was right off the bat 95% fine, really. I only had to ask it to “modify the code so that the buttons are above the poem output. Also, when shuffling lines, display them with line breaks, and offer style entries for a black background, silver-colored font, and aesthetically pleasingI was being deliberately vague here. Obviously, an AI model cannot draw conclusions about aesthetics. It would have been a much better idea to be specific and say, e.g., "offer buttons and input form in blue hues and rounded corners". buttons and input form”.

And here’s what I got, mere seconds later:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Random Poem Shuffler</title>
	 <style>
      body {
        background-color: black;
        color: silver;
        font-family: Arial, sans-serif;
      }

      h1 {
        text-align: center;
      }

      button {
        padding: 10px 20px;
        border: none;
        background-color: silver;
        color: black;
        font-weight: bold;
        border-radius: 5px;
        cursor: pointer;
      }

      input[type="file"] {
        display: none;
      }

      label[for="file"] {
        padding: 10px 20px;
        background-color: silver;
        color: black;
        font-weight: bold;
        border-radius: 5px;
        cursor: pointer;
        margin-right: 10px;
      }

      #shuffle-button {
        margin-left: 10px;
      }

      pre {
        white-space: pre-wrap;
        margin-top: 20px;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h1>Random Poem Shuffler</h1>
    <div>
      <button id="new-poem-button">Get New Poem</button>
      <label for="file">Upload a text file:</label>
      <input type="file" id="file" accept=".txt" />
      <button id="shuffle-button">Shuffle Lines</button>
    </div>
    <div>
      <pre id="poem"></pre>
    </div>
    <script>
      const poemElement = document.getElementById("poem");
      const shuffleButton = document.getElementById("shuffle-button");
      const newPoemButton = document.getElementById("new-poem-button");
      let lines = [];

      function shuffleLines(lines) {
        // Use the Fisher-Yates shuffle algorithm to shuffle the lines in-place
        for (let i = lines.length - 1; i > 0; i--) {
          const j = Math.floor(Math.random() * (i + 1));
          [lines[i], lines[j]] = [lines[j], lines[i]];
        }
        return lines;
      }

      async function fetchPoem() {
        const response = await fetch("https://poetrydb.org/random");
        const data = await response.json();
        return data[0].lines;
      }

      function handleFileUpload() {
        const fileReader = new FileReader();
        fileReader.onload = (event) => {
          lines = event.target.result.split("\n").filter((line) => line !== "");
          const shuffledLines = shuffleLines(lines);
          poemElement.textContent = shuffledLines.join("\n");
        };
        fileReader.readAsText(this.files[0]);
      }

      function handleShuffleButtonClick() {
        if (lines.length > 0) {
          const shuffledLines = shuffleLines(lines);
          poemElement.textContent = shuffledLines.join("\n");
        }
      }

      async function handleNewPoemButtonClick() {
        lines = await fetchPoem();
        poemElement.textContent = lines.join("\n");
      }

      document.getElementById("file").addEventListener("change", handleFileUpload);
      shuffleButton.addEventListener("click", handleShuffleButtonClick);
      newPoemButton.addEventListener("click", handleNewPoemButtonClick);
    </script>
  </body>
</html>

There were also some explanations on how to use the code (they could be very useful to beginners). Needless to say, my jaw dropped. This is seriously impressive.

Let’s see how it runs!

Running the Program

The program runs in an iframe hosted on raw.githack. As a free service, 100% uptime can’t be guaranteed.

Click to run the program

Pretty decent, I’d say!

The Overall Experience of Making a Simple JavaScript App with ChatGPT

The operative word here is “simple”. Already this trivial example showed several things:

ChatGPT is a really useful tool for programmers. Instead of going through pages upon pages of Google search results, petty Stack Overflow posts, and click-me-subscribe-to-me-pop-up-me blog posts that might or might not supply an answer, I can get an immediate code block that does what I want. Seriously impressive.
It’s too boring to show here, but my personal favorite use of ChatGPT for programming is in troubleshooting. I can simply tell it “I get X error, here’s my code, how do I fix it?” and in most cases it at least puts me in the ballpark, or even offers the solution outright.
ChatGPT, at least in its current, beta form, can’t deal with extensive, multi-line responses. Again, it’s too boring to show here, but I also attempted to tell ChatGPT to add some additional functionality to this program, and things began falling apart. Simple functions and short code blocks work very well, but you’ll have to break down your requests for anything more complex.
Of course, this also means that you must have at least some idea what you’re doing. In its current iteration, chatGPT is too immature to help someone with virtually zero programming knowledge achieve anything remotely complex. You must know what you’re doing, so that you can assess if it works or not, otherwise you’ll be quickly overwhelmed.

Of course, these are perfectly understandable. I mean, it’d be ridiculous to expect an AI model to successfully respond to a prompt such as “Create the code for a game like Final Fantasy X”.

Though who could tell what the (near) future brings!

Home For Fiction – Blog