> For the complete documentation index, see [llms.txt](https://docs.mydukaan.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.mydukaan.io/basic-code-editing/adding-the-javascript.md).

# 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&amp;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.