// Declare a variable for the content div where the activity will be displayed
let contentDiv;
let typeDiv; 

// The base URL of the API that provides random activities
const apiURL = "https://mdinfotech.net/api/activity/";

// Run this function when the page finishes loading
// It initializes references to the HTML elements and fetches the first activity
window.onload = function() {
  // Get references to the content and type elements in the HTML
  contentDiv = document.getElementById("content");
  typeDiv = document.getElementById("type");

  // Fetch and display the activity from the API
  fetchContent();
} // window.onload

// Function to fetch data from the activity API
// Uses async/await for modern asynchronous code handling
async function fetchContent() {
  try {
    // Send a GET request to the API
    const response = await fetch(apiURL);

    // Convert the response to JSON format
    const data = await response.json();

    // Print the data to the console for debugging purposes
    // Helps you see what kind of information you're receiving from the API
    console.log(data);

    // Update the page content with the data received
    changeContent(data);
  } catch (error) {
    // Handle errors that may occur while fetching data
    console.error('Error fetching activity:', error);
  }
} // fetchContent

// Function to update the content displayed on the page
// Takes the data from the API and inserts it into the appropriate HTML elements
function changeContent(data) {
  // Update the content div with the activity description
  contentDiv.innerHTML = `Activity: ${data.activity}`;

  // Update the type div with the type of activity
  typeDiv.innerHTML = `Type: ${data.type}`;
} // changeContent