Use ChatGPT to Extend the Generated App

Contributed by: J. Chris Anderson

Difficulty level: Advanced

As we’ve seen in other shortcuts, getting the best performance out of ChatGPT is all about setting the context. The words and concepts you focus on are how it decides what sort of output you are looking for. To that end, once you have a conversation about building something, adding features is easy. So let’s keep the conversation from “Use ChatGPT to Generate Apps” going, and add some visual pizzazz and other features to the game.

Prompt: Add a feature to the app that when points go to zero, all the animals do a 360-degree spin.

ChatGPT: To add a feature that makes all animals do a 360-degree spin when the score resets to zero, you can use the following steps:

1. Modify the Emoji styled component in src/App.js to include a new prop spin:

   const Emoji = styled.button`
     font-size: 48px;
     margin: 0 5px;
     background: none;
     border: none;
     cursor: pointer;
     transition: transform 0.3s ease-out;
   
     &:hover {
       transform: translateY(-20px);
     }
   
     ${props => props.spin && `
       animation: spin 1s linear;
       @keyframes spin {
         from {
           transform: rotate(0deg);
         }
         to {
           transform: rotate(360deg);
         }
       }
     `}
   `;

2. Add a new state variable spinAll to the App component:

   const [spinAll, setSpinAll] = useState(false);

3. Update the handleEmojiClick function to set the spinAll state when the score resets to zero:

   const handleEmojiClick = (isSnake) => {
     if (isSnake) {
       setScore(0);
       setSpinAll(true);
       setTimeout ...