app.js

$(document).ready(function() {
    // Hover to show the recipe
    $(".card").hover(
        function() {
            const card = $(this);
            let recipe;
            switch (card.find("h3").text()) {
                case "Mistletoe Martini":
                    recipe = "Mix vodka, cranberry juice, and lime juice. Serve chilled.";
                    break;
                case "Snowfall Sangria":
                    recipe = "Combine white wine, apple cider, and cinnamon sticks.";
                    break;
                case "Winter Wonderland":
                    recipe = "Combine sparkling water, pomegranate juice, and garnish with rosemary.";
                    break;
                case "Holiday Mule":
                    recipe = "Mix vodka, ginger beer, and cranberry juice. Garnish with lime.";
                    break;
                case "Festive Berry Punch":
                    recipe = "Mix berries, sparkling water, and mint leaves.";
                    break;
                default:
                    recipe = "Recipe not available.";
            }
            card.find("p").text(recipe);
        },
        function() {
            // Reset the text on mouse leave
            const mainIngredients = {
                "Mistletoe Martini": "Main Ingredients: Vodka, cranberry juice, lime",
                "Snowfall Sangria": "Main Ingredients: White wine, apple cider, cinnamon",
                "Winter Wonderland": "Main Ingredients: Sparkling water, pomegranate juice, rosemary",
                "Holiday Mule": "Main Ingredients: Vodka, ginger beer, cranberry",
                "Festive Berry Punch": "Main Ingredients: Mixed berries, sparkling water, mint"
            };
            const drinkName = $(this).find("h3").text();
            $(this).find("p").text(mainIngredients[drinkName]);
        }
    );

    // Click to show calories
    $(".card").click(function() {
        const calories = $(this).data("calories");
        $(this).find("p").text(`Calories: ${calories}`);
    });
});