let clientID = "fdb4541864301f4843d9";

let clientSecret = "90e52d7d50e3bcbf452ca3d5a0eb7723";

let xappToken;

​

let artistInput, searchButton, resultDiv;

​

let searchBarDiv; // This will be our container for the search bar

​

function setup() {

  noCanvas();

​

  // Create a container div for the search bar

  searchBarDiv = createDiv("");

  searchBarDiv.id("search-bar-container");

​

  // Create an input box for the artist's name

  artistInput = createInput("");

  artistInput.attribute("placeholder", "Enter artist name");

  artistInput.parent(searchBarDiv); // Set the searchBarDiv as its parent

​

  // Create a button for initiating the search

  searchButton = createButton("Search");

  searchButton.mousePressed(fetchArtistDataByName);

  searchButton.parent(searchBarDiv); // Set the searchBarDiv as its parent

​

  // Create a div to display the artist's data

  resultDiv = createDiv("");

  resultDiv.id("result");

​

  fetchToken();

}

​

async function fetchToken() {

  try {

    let response = await fetch(

      `${apiEndpointToken}?client_id=${clientID}&client_secret=${clientSecret}`,

      {

        method: "POST",

      }

    );

​

    if (!response.ok) {

      throw new Error("Network response was not ok while fetching token");

    }

​

    let tokenData = await response.json();

    xappToken = tokenData.token;

  } catch (error) {

    console.error("Error:", error);

  }

}

​

async function fetchArtistDataByName() {

  let artistName = artistInput.value();

  let artistEndpoint = `https://api.artsy.net/api/search?q=${artistName}`;

​

  try {

    let response = await fetch(artistEndpoint, {

      method: "GET",

      headers: {

        "X-Xapp-Token": xappToken,

        Accept: "application/vnd.artsy-v2+json",

      },

    });

​

    if (!response.ok) {

      throw new Error("Network response was not ok while fetching artist");

    }

​

    let searchData = await response.json();

​

    // Check if there's an artist result

    if (searchData && searchData._embedded.results.length > 0) {

      let artistSlug = searchData._embedded.results[0]._links.self.href

        .split("/")

        .pop();

      fetchArtistDetails(artistSlug);

    } else {

      displayMessage("Artist not found.");

    }

  } catch (error) {

    console.error("Error fetching artist:", error);

  }

}

​

async function fetchArtistDetails(slug) {

  let artistEndpoint = `https://api.artsy.net/api/artists/${slug}`;

​

  let response = await fetch(artistEndpoint, {

    method: "GET",

    headers: {

      "X-Xapp-Token": xappToken,

      Accept: "application/vnd.artsy-v2+json",

    },

  });

​

  let artistData = await response.json();

  displayArtist(artistData);

​

  // Fetch and display similar artists

  let similarArtistsURL = artistData._links.similar_artists.href;

  let similarArtistsResponse = await fetch(similarArtistsURL, {

    method: "GET",

    headers: {

      "X-Xapp-Token": xappToken,

      Accept: "application/vnd.artsy-v2+json",

    },

  });

  let similarArtistsData = await similarArtistsResponse.json();

  displaySimilarArtists(similarArtistsData._embedded.artists);

}

​

function displayArtist(data) {

  const artistInfoContainer = document.getElementById("artist-info-container");

​

  artistInfoContainer.innerHTML = `

<img src="${data._links.thumbnail.href}" alt="${data.name}"><br>

    <strong>Name:</strong> ${data.name}<br>

    <strong>Born:</strong> ${data.birthday} in ${data.hometown}<br>

    <strong>Nationality:</strong> ${data.nationality}<br> 

    <strong>Biography:</strong> ${data.biography}<br>

<br>

​

​

​

  `;

}

​

function displaySimilarArtists(similarArtists) {

  // Start with an empty string

  let similarArtistsHTML = "";

​

  similarArtists.forEach((artist) => {

    similarArtistsHTML += `

      <div class="similar-artist">

        <strong>Similar artist:</strong> ${artist.name}<br>

        <img src="${artist._links.thumbnail.href}" alt="${artist.name} Thumbnail">

      </div>

    `;

  });

​

  // Set the HTML content of a designated container for similar artists

  document.getElementById(

    "similar-artists-container"

  ).innerHTML = similarArtistsHTML;

}

​

function displayMessage(message) {

  resultDiv.html(`<strong>${message}</strong>`);

}

​