# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mydukaan.io/basic-code-editing/adding-the-javascript.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.