Using the fetch API with Webflow and No Code API

fetch-webflow.js

// Setting global variables
const emailForm = document.querySelector("#email-form");
const screenOne = document.querySelector("#screen-one");
const screenLoading = document.querySelector("#loading");
const screenTwo = document.querySelector("#screen-two");
const resultName = document.querySelector("#result-name");
const resultEmail = document.querySelector("#result-email");
const resultNumber = document.querySelector("#result-number");
const nextButton = document.querySelector("#submit");
const nameInput = document.querySelector("#name");
const emailInput = document.querySelector("#email");
const numberOneInput = document.querySelector("#number-one");
const numberTwoInput = document.querySelector("#number-two");

// Our function

nextButton.onclick = (e) => {
  e.preventDefault();
  screenOne.style.display = "none";
  screenLoading.style.display = "block";
  let screenName = nameInput.value;
  let screenEmail = emailInput.value;
  let screenNumberOne = Number(numberOneInput.value);
  let screenNumberTwo = Number(numberTwoInput.value);
  const handleError = (response) => {
    if (!response.ok) {
      throw Error(` ${response.status} ${response.statusText}`);
    } else {
      return response.json();
    }
  };

  fetch(
    `https://v1.nocodeapi.com/rileyrichter/airtable/xXgEleNyjlUlNuLJ?tableName=table`,
    {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      redirect: "follow",
      body: JSON.stringify([
        {
          name: `${screenName}`,
          email: `${screenEmail}`,
          number_one: screenNumberOne,
          number_two: screenNumberTwo,
        },
      ]),
    }
  )
    .then(handleError)
    .then((data) => {
      resultName.innerText = data[0].fields.name;
      resultEmail.innerText = data[0].fields.email;
      resultNumber.innerText = data[0].fields.number_result;
    })
    .catch(function writeError(err) {
      console.log(err);
    })
    .finally(() => {
      screenTwo.style.display = "block";
      screenLoading.style.display = "none";
    });
};