Virtual Art Gallery

Using The Art Institute of Chicago's API dataset, I created an interactive virtual art gallery using Javascript that allows users to explore art pieces online.

Project Type
School Project
Category
Programming / Web Design
Role
Programmer / Web Designer
Year
2024

Context

The Art Institute of Chicago's API dataset has vast art piece information. I wanted to explore data visualization more creatively and interactively, not in the usual charts and graphs.

Therefore, the goal was to

Create a website that allows users to explore The Art Institute of Chicago's art pieces, by filtering them by media type.

Be visually pleasing and interactive which effectively engages with users to steer their interest in art.

Process

To achieve this goal, I used Javascript, CSS, and HTML to create a web art gallery that shows images and information about museum-owned art pieces.

  1. Create a landing page with a button that leads to the main page, using EventListener function.

// Redirect to the main page on button click
 document.getElementById("lets-go-button").addEventListener("click", () => {
    window.location.href = "main.html"; 
});

  1. Fetch specific types of art pieces from The Art Institute of Chicago's API dataset using async function

// Fetch artworks of a specific type with images
async function fetchArtworksWithImages(type, limit = 10) {
    const artworks = [];
    let page = 1;

    while (artworks.length < limit) {
        try {
            const response = await fetch(
                `https://api.artic.edu/api/v1/artworks/search?q="${type}"&fields=id,title,image_id,artist_title,artwork_type_title&limit=${limit}&page=${page}`
            );
            const data = await response.json();

            const artworksWithImages = (data.data || []).filter(
                (artwork) => artwork.image_id && artwork.image_id.trim() !== ""
            );
            artworks.push(...artworksWithImages);

            if (data.pagination.total_pages <= page) break;

            page++;
        } catch (error) {
            console.error(`Error fetching artworks for type: ${type}`, error);
            break;
        }
    }

    return artworks.slice(0, limit); 
}

  1. Add buttons that filter art pieces by media.

// Add event listeners to filter buttons
function setupFilterButtons() {
    const buttons = document.querySelectorAll(".gallery-buttons button");
 buttons.forEach((button) => {
        button.addEventListener("click", () => {
            buttons.forEach((btn) => {
                btn.classList.remove("active");
         });
            button.classList.add("active");

            const type = button.textContent.trim();
            filterArtworks(type);
        });
    });
}

  1. Add hover effects on the art piece images using GSAP. 

// Add GSAP Glow Effect to Cards
function addGlowEffect(card) {
    card.addEventListener("mouseenter", () => {
        gsap.to(card, {
            scale: 1.3,
            zIndex: 10,
            boxShadow: "0 0 15px 5px rgba(218, 159, 147, 0.4), 0 0 30px 10px rgba(218, 159, 147, 0.4)",
            duration: 0.3,
            ease: "power1.out",
        });
    });

    card.addEventListener("mouseleave", () => {
        gsap.to(card, {
            scale: 1,
            xIndex: 1,
            boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)", 
            duration: 0.3,
            ease: "power1.in",
        });
    });
}

  1. Style CSS referencing the color scheme of The Art Institute of Chicago's website.

Check out the website here. Or explore from below embeded images.