---
title: "Configure the client"
url: https://docs.catalyst.zoho.com/en/tutorials/museum-finder/configure-client/
description: "Build a Museum Finder web application using Catalyst Functions that helps you find museums based on ratings and traveller type criteria, and automate its workflow using Catalyst Circuits."
last_updated: 2026-08-28T07:59:38Z
service: All Services
type: tutorial
related_links:
  - name: "Client Directory Structure"
    url: /en/cli/v1/project-directory-structure/client-directory
---

# Configure the Client

Let's now configure the client component. The [client directory](https://docs.catalyst.zoho.com/en/cli/v1/project-directory-structure/client-directory) contains:

* The `index.html` file that contains the HTML code for the front-end application
* The `main.css` file that contains the CSS code for the front-end application
* The `main.js` file that contains the JavaScript code
* The `client-package.json` configuration file

We will be coding `index.html`, `main.css`, and `main.js`.

> **Note:** Please go through the code in this section to make sure you fully understand it. 

Copy the code below and paste it in the respective files located in the `client/` directory using an IDE and save the files.

**index.html**

```xml
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Museum Finder</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
    <!-- Google Fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
    <!-- Bootstrap core CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- Material Design Bootstrap -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet">
    <script src="https://static.zohocdn.com/catalyst/sdk/js/4.6.2/catalystWebSDK.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- JQuery -->
    <!-- Bootstrap tooltips -->
    <script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <!-- MDB core JavaScript -->
    <script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js"></script>
</head>
<body>
    <div id="maindiv">
        <nav class="navbar navbar-expand-lg navbar-dark brown">
            <a class="navbar-brand" href="">Best Museum Finder ®</a>
        </nav>
        <br><br><br>
        <center>
            <h2>Get the list of best museums in the US based on your Choice and Rating !</h2>
            <br><br><br>
            <form id="myForm">
                <label for="Type">Traveller Type: </label>
                <select name="Type" id="Type">
                    <option disabled selected value> -- select an option -- </option>
                    <option value="Families">Families</option>
                    <option value="Couples">Couples</option>
                    <option value="Solo">Solo</option>
                    <option value="Business">Business</option>
                    <option value="Friends">Friends</option>
                    <option>----------------------</option>
                </select>                 
                <label for="Rating">Select the rating : </label>
                <select name="Rating" id="Rating">
                    <option disabled selected value> -- select an option -- </option>
                    <option value="Excellent">Excellent</option>
                    <option value="Very good">Very good</option>
                    <option value="Average">Average</option>
                    <option value="Poor">Poor</option>
                    <option value="Terrible">Terrible</option>
                    <option>----------------------</option>
                </select><br><br><br>
                Enter the number of Museums you want : <input type="text" id="count" required><br><br><br>
                Enter your Mail ID : <input type="email" id="mailid" required><br><br><br><br>
                <button type="button" id="button" class="btn btn-brown" data-toggle="modal"
                    data-target="#basicExampleModal" onclick="triggerCircuit()">Submit details</button></form>
        </center>
    </div>
    <div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <center><br><p id="popuptext"></p><br>
                        <button type="button" class="btn btn-brown" data-dismiss="modal">Close</button>
                    </center>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

```

**main.css**

```css
.modal {
    padding-top: 350px;
  }

```

**main.js**

```javascript
function triggerCircuit() {
	var count = document.getElementById("count").value;
    var Rating = document.getElementById("Rating").value;
    var Type = document.getElementById("Type").value;
    var MailID = document.getElementById("mailid").value;
    document.getElementById("myForm").reset();

    if (count || Rating || Type || MailID) {
        console.log(count, Rating, Type, MailID);

        $.ajax({
            url: "/server/circuit/triggerCircuit",
            type: "post",
            contentType: "application/json",
            data: JSON.stringify({
                "count": count,
                "rating": Rating,
                "traveller": Type,
                "mail_id": MailID
            }),
            success: function (data) {
                console.log(data); //You can view these logs from Logs in the Catalyst console
                document.getElementById("popuptext").innerHTML = data.message;
            },
            error: function (error) {
                console.log(error);
                document.getElementById("popuptext").innerHTML = "Please try again after sometime";
            }
        });
    } else {
        document.getElementById("popuptext").innerHTML = "Please provide data in the all the fields";
    }
}

```

As discussed in the previous section, the `main.js` function obtains the input values provided by the user in the client application and passes it to the circuit function by triggering its API. The HTTP `POST` method is used to post the data to the circuit function.

The data passed includes the values for the number of museums required by the user, the preferred rating and traveller type, and the user's email address.

The client directory is now configured. We will now deploy the function and client components to the remote console.