Untitled

// Client facing scripts here
const {getLoginForm, getSignUpForm} = require("../../helpers")

$(document).ready(function () {
  console.log("DOM is ready!");

  const allContainers = $(".container");
  const allCategories = $(".category");
  const allForms = $(".form");
  const loginForm = $("#login-form");
  const signUpForm = $("#signup-form");

  const categories = $("#categories");
  const dropdownContainer = $(".dropdown-container");
  const dropdownItems = $(".dropdown-container a");

  fetchrandomQuote();

  // Hide the dropdown container by default
  dropdownContainer.hide();

  // Display the dropdown list of categories when the "Categories" link is clicked
  categories.on("click", function (e) {
    e.preventDefault();
    dropdownContainer.show();
  });

  // Hide the dropdown container when the mouse leaves the dropdown list
  dropdownContainer.on("mouseleave", function () {
    dropdownContainer.hide();
  });

  // Add an event listener to each dropdwon item
  dropdownItems.on("click", function () {
    // Get the clicked dropdown item
    const category = $(this).text();

    generateQuotebyCategory(category);
  });

  const $getQuoteButton = $("#get-quote-button");

  //Generate a new random quote each time button is clicked
  $getQuoteButton.on("click", function () {
    fetchrandomQuote();
  });

  // Refresh the homepage when logo is clicked
  const homepage = $("#app-logo");

  if (homepage) {
    homepage.on("click", function () {
      window.location.href = "/";
    });
  }

  // Navigate to login form when button is clicked
  const $userProfile = $("#user-profile");

  $userProfile.on("click", function () {
    signUpForm.hide();
    getLoginForm();

    // Navigate to signup form when button is clicked

    const $signUpButton = $("#signup-link");

    $signUpButton.on("click", function () {
      loginForm.hide();
      getSignUpForm();
    });
  });

  function fetchrandomQuote() {
    //Make an AJAX request to the quotes API url
    $.ajax({
      method: "GET",
      url: "https://api.quotable.io/quotes/random",
    })
      .then(function (data) {
        generateQuoteAndImage(data);
      })

      .catch(function (error) {
        console.log("Cannot fetch quote and image: ", error);
      });
  }

  function generateQuoteAndImage(data) {
    const quote = data[0].content;
    const author = data[0].author;

    //Make an AJAX request to the image API url
    $.ajax({
      method: "GET",
      url: "https://dog.ceo/api/breeds/image/random",
    })
      .then(function (data) {
        const image = data.message;

        const $imageContainer = $("#image-container");
        const $quoteContainer = $("#quote-container");

        $imageContainer.empty();
        $quoteContainer.empty();

        //Generate a new image each time the page is loaded
        const $randomImage = `
    <div>
    <img id="image" src="${image}" alt="Random Grayscale Image">
    </div>`;

        //Generate a new quote each time the page is loaded
        const $randomQuote = `
    <div>
    <h1 id="quote-text">"${quote}"</h1>
    <p id="author"> - ${author} </p>
    </div>`;

        //Append random quote/image to the quote/image container on page reload
        $imageContainer.append($randomImage);
        $quoteContainer.append($randomQuote);
      })

      .catch(function (error) {
        console.log("Cannot fetch images: ", error);
      });
  }

  function generateQuotebyCategory(category) {
    allCategories.show();
    allForms.hide();

    //Make an AJAX request to the quotes API tags url
    $.ajax({
      method: "GET",
      url: `https://api.quotable.io/quotes/random?tags=${category}`,
    }).then(function (data) {
      const randomTag = data[0].tags;

      if (randomTag.includes(category)) {
        const categoryHeader = $("#category-header");
        categoryHeader.empty();

        const $header = `
        <h1>${category}</h1>`;

        categoryHeader.append($header);

        $("#quote-main-container").hide();
        $("#get-quote-button").hide();

        const categoryContainer = $("#category-container");
        categoryContainer.empty();

        const quote = data[0].content;
        const author = data[0].author;

        // Render quotes related to the selected category
        const $renderQuote = `
          <div id="quote">
          <h1 id="quote-text">"${quote}"</h1>
          <p id="author"> - ${author} </p>
          </div>`;

        const $getQuote = `
          <button type="submit" id="get-quoteByCategory-button">
            Get Quote
          </button>`;

        //Append quotes and button to the container
        categoryContainer.append($renderQuote, $getQuote);

        const getQuoteButton = $("#get-quoteByCategory-button");

        // Generate a new random quote from selected category each time the button is clicked
        getQuoteButton.on("click", function () {
          generateQuotebyCategory(category);
        });
      }
    });
  }


});