Adding the Javascript

✍️ Objective - When user clicks on category card, it should show the category name in a popup

Open the file layout.js and add the following code to it

/* layout.js */

document.querySelectorAll('.category-link').forEach(link => {
  link.addEventListener('click', event => {
    event.preventDefault();
    const categoryName = event.currentTarget.querySelector('.category-name').textContent;
    alert(`You clicked on ${categoryName}`);
  });
});

This JavaScript code adds a click event listener to each .category-link element. When a user clicks on a category card, a popup appears with a message displaying the category name. Go ahead and deploy this change and see your action happening live on the preview site.

Once successfully deployed it would look something like above when a category card is clicked. Up next, its time to bundle up everything and show some real data using Nunjucks.