> 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="/files/zv2TaEm0CMmAuLu0Uqjd" 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.