// 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);
});
}
});
}
});