Reproducing intercooler.js functionality in plain ES6 for the random insect name endpoint

random-insect-name-fetch.js

/**
 *
 * Simple reproduction of what you are doing with intercooler.js for your random insect button
 * Written in ES6 javascript, i.e. will not work in some older browsers but can be written with more verbose syntax to do so if needed
 * It uses the modern method of retrieving data via xhr called 'fetch' which is asynchronous and returns a promise which is what the .then() is about. You don't need to understand how promises work for now but just know that they allow asynchronous code execution. I can explain more if needed.
 * You can include this js in a <script> on the page or put it in a js file and load that file on your page
 * This code could be updated with a little more syntax to turn it in to a module as in the end you will likely have different modules that you want to all load in to one single js file for your page
 */

// store the random insect button in a variable (you will need to add the attribute 'data-rand-insect-btn' to the <a> in your template)
const button = document.querySelector('[data-rand-insect-btn]');

// store the text container for where you want to display the random insect name (again, you need to add the below attribute to the html)
const textContainer = document.querySelector('[data-rand-insect-text]');

if (button && textContainer) {
  // add a click event listener to the button
  button.addEventListener('click', event => {
    // prevent normal behaviour of button click, not needed but good practice
    event.preventDefault();
    // prevent the event from propagating up the dom, not needed but good practice
    event.stopPropagation();

    // make call to endpoint
    fetch('/random/')
      // when the promise either resolves or rejects
      .then(response => {
        // if we get a successful response back
        if (response.status === 200) {
          // the response from the backend is a readable stream so we need to process it, in this case the method .text() is best which is async and returns a promise
          return response.text();
        }
      })
      // when the .text() promise resolves
      .then( data => {
        // we now have the data we need so update the page
        textContainer.textContent = data;
      })
      // catch any error that happens as part of this fetch request block and log the error to the browser console
      .catch(err => {
        console.error('Error calling /random/ endpoint\n', err)
      })
  })
}