Supabase/image-search

1const searchForm = document.querySelector(".search-form");2const result = document.querySelector(".result");3const submitButton = document.querySelector(".submit-button");4 5const clearDiv = () => {6  result.innerHTML = "";7};8 9const buttonLoading = () => {10  submitButton.innerHTML = "loading...";11  submitButton.setAttribute("disabled", true);12};13 14const buttonDefault = () => {15  submitButton.innerHTML = "Submit";16  submitButton.removeAttribute("disabled");17};18 19const renderImg = (imageName) => {20  clearDiv();21  const img = document.createElement("img");22  img.src = `/images/${imageName}`;23  result.appendChild(img);24};25 26const getResult = async (searchQuery) => {27  const response = await fetch(`search?query=${searchQuery}`);28  const json = await response.json();29 30  return json.result;31};32 33searchForm.addEventListener("submit", async (event) => {34  event.preventDefault();35 36  const query = document.querySelector("#query");37  buttonLoading();38  try {39    const res = await getResult(query.value);40    renderImg(res);41  } catch (err) {42    console.error(err);43    clearDiv();44  } finally {45    buttonDefault();46  }47});48