Javascript

import "./styles.css";

function fetchData() {
  const options = {
    method: "GET",
    headers: {
      Authorization: "Bearer ce6ba78d922aaa37179ce3a508d77fd50d220478", // Replace with your Bearer token
      "Accept-Encoding": "gzip",
    },
  };

  fetch(
    "https://api.mlsgrid.com/v2/Property?$filter=OriginatingSystemName eq 'flinthills' and StandardStatus eq 'Active'",
    options
  )
    .then((response) => response.json())
    .then((response) => {
      // Extract the "value" array from the response
      const dataArray = response.value;

      // Handle the data received from the API
      const app = document.querySelector("#app .carousel-inner");

      // Clear any existing content in the carousel
      app.innerHTML = "";

      // Select the indicators element
      const indicators = document.querySelector("#app .carousel-indicators");

      // Clear any existing indicators
      indicators.innerHTML = "";

      dataArray.forEach(function (data, index) {
        // Create a carousel slide for each property
        const slide = document.createElement("div");
        slide.classList.add("carousel-item");
        if (index === 0) {
          slide.classList.add("active");
        }
        slide.innerHTML = `
        <div>
          <h2>${data.UnparsedAddress}</h2>
          <p>${data.City}, ${data.StateOrProvince} ${data.PostalCode}</p>
          <p>Price: $${data.ListPrice}</p>
          <p>Bedrooms: ${data.BedroomsTotal}</p>
          <p>Bathrooms: ${data.BathroomsFull}</p>
          <p>Living Area: ${data.LivingArea} sqft</p>
          <p>Lot Size: ${data.LotSizeAcres} acres</p>
          <p>Year Built: ${data.YearBuilt}</p>
          <!-- Add more property details as needed -->
        </div>
        <div>
          <p>Property Type: ${data.PropertyType}</p>
          <p>MLS Status: ${data.MlsStatus}</p>
          <!-- Add more property details as needed -->
        </div>
        <div>
          <p>Description: ${data.PublicRemarks}</p>
          <!-- Add more property details as needed -->
        </div>
      `;
        app.appendChild(slide);

        // Create a carousel indicator for each property
        const indicator = document.createElement("li");
        indicator.setAttribute("data-target", "#app");
        indicator.setAttribute("data-slide-to", index.toString());
        if (index === 0) {
          indicator.classList.add("active");
        }
        indicators.appendChild(indicator);
      });
    })
    .catch((error) => {
      console.error("Fetch error:", error);
    });
}

window.onload = function () {
  fetchData();
};