Enhancing Random Word Generator Web App with Additional Features

I’m working on a web application that fetches a random uppercase word from an API and displays it on the webpage using JavaScript’s fetch API. I’m looking to add some features to improve user experience and functionality. Here’s the current code:

// API endpoint for fetching a random word
const apiUrl = 'https://random-word-api.vercel.app/api?words=1&length=5&type=uppercase';

// Variable to store the fetched word
let wordAPI = 0;

// Making a GET request to the API
fetch(apiUrl)
  .then(response => {
    // Handling HTTP errors
    if (!response.ok) {
      throw new Error(`Request failed with status code ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    // Storing the fetched word
    wordAPI = data[0];
    console.log('Generated Word:', wordAPI);
  })
  .catch(error => {
    // Handling errors during the API request
    console.error('Error getting the word:', error);
  });

I’m seeking guidance on implementing the following enhancements: Display the length of the generated word alongside the word itself. Add a “Generate New Word” button to fetch and display a new random word. Gracefully handle errors by showing user-friendly messages on the webpage. Include a loading indicator while waiting for the API response.