# 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

```javascript
/* 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.

<figure><img src="https://869317877-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEpxvKr8371wMxhqFS6hu%2Fuploads%2FYcHM8o3K3xMQTb6FOINK%2FScreenshot%202023-03-30%20at%2019.12.45.png?alt=media&#x26;token=4c46d6dc-1363-4bef-90b0-7ec7f8ccc855" alt=""><figcaption></figcaption></figure>

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.