---
title: "Configure the client"
url: https://docs.catalyst.zoho.com/en/tutorials/newsapp/java/configure-client/
description: "Build a web news application that automatically fetches news from a third-party service periodically using the Catalyst Job Scheduling Cron component, and a Job Function and Advanced I/O function coded in Java."
last_updated: 2025-11-19T15:07:41Z
service: All Services
type: tutorial
related_links:
  - name: "Client"
    url: /en/cli/v1/project-directory-structure/introduction
  - name: "Advanced I/O Function"
    url: /en/serverless/help/functions/advanced-io
---

# Configure the Client

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

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

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

> **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 of your project using an IDE and save the files.

**index.html**

```xml
<!DOCTYPE html>
<html>
<title>NewsApp</title>
<script src="main.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body onload="fetchNews('HEADLINES')">
    <center>
        <h1>Welcome to The Daily Broadcast</h1>
        <h3>Today's News</h3>
        <h2>HEADLINES</h2><br>
    </center>
    <div class="sidenav">
        <img src="https://i.pinimg.com/236x/e6/71/5f/e6715f8bd963c783f75f11fdc37fa4aa.webp" width="220" height="200"
            onclick="fetchNews('HEADLINES')"><br>
        <a onclick="return fetchNews('BUSINESS');">Business</a><br>
        <a onclick="return fetchNews('ENTERTAINMENT');">Entertainment</a><br>
        <a onclick="return fetchNews('HEALTH');">Health</a><br>
        <a onclick="return fetchNews('SCIENCE');">Science</a><br>
        <a onclick="return fetchNews('SPORTS');">Sports</a><br>
        <a onclick="return fetchNews('TECHNOLOGY');">Technology</a><br>
    </div>
    <div class="loading" id="loader" style="display: none;"></div>
    <div class="main">
        <ul id="newsList"></ul>
    </div>
</body>
</html>

```

**main.css**

```css
.sidenav {
    height: 100%;
    width: 220px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
}
a{
    cursor: pointer;
}
.sidenav a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 25px;
    font-family: "Helvetica", sans-serif;
    color: #818181;
    display: block;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.main {
    margin-left: 200px;
    font-size: 20px;
    padding: 0px 10px;
    font-family: "Poynter", sans-serif;
}

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

    .sidenav a {
        font-size: 18px;
    }
}

.loading {
    height: 0;
    width: 0;
    padding: 15px;
    border: 6px solid rgb(155, 155, 155);
    border-right-color: rgb(88, 88, 88);
    border-radius: 22px;
    -webkit-animation: rotate 1s infinite linear;
    /* left, top and position just for the demo! */
    position: absolute;
    left: 50%;
    top: 50%;
  }
  
  @-webkit-keyframes rotate {
    /* 100% keyframe for  clockwise. 
       use 0% instead for anticlockwise */
    100% {
      -webkit-transform: rotate(360deg);
    }
  }

```

**main.js**

```javascript
function fetchNews(name) {
    //Since we display the news items as nodes, removes the existing nodes for every category change 
    const nodes = document.getElementById("newsList");
    nodes.innerHTML = '';
    document.getElementById("loader").style.display = "block";
    var tablename = name;
    console.log(tablename);
    //Makes an API call to the Advanced I/O function to fetch the news item from a particular table 
    $.ajax({
        url: "/server/NewsApp_AIO/fetchData?tablename=" + tablename, //If you initialized the Advanced I/O function with a different name, ensure you replace news_app_function with that name.
        type: "get",
        success: function (response) {
            var data = response;
            var i;
            document.getElementById("loader").style.display = "none";
            //Parses the response from the Advanced I/O function, and renders it in the HTML page by creating a list of nodes
            for (i = 0; i < data.content.length; i++) {
                var list = document.getElementById('newsList');
                var anchor = document.createElement('a');
                var li = document.createElement('li');
                var linebreak = document.createElement("br");
                anchor.href = data.content[i][tablename].url;
                anchor.innerText = data.content[i][tablename].title;
                anchor.setAttribute('target', '_blank');
                li.appendChild(anchor);
                list.appendChild(li);
                list.appendChild(linebreak);
            }
        }, error: function (error) {
            alert(error.data);
        }
    });
}

```

> **Note**: If you have chosen a different name for your Advanced I/O function, then replace **news_app_function** with that name in line **10**.

The client directory is now configured.

### Working of Functions and Client

Let us quickly go through the working of the function and client components of the application:

* When a recursive cron is configured to execute in a specified time interval say once every hour and associated with the job function `FetchNews.java`, it automatically initiates the function's execution once every hour. 

* An API call to http://newsapi.org/v2/top-headlines is made to fetch the news headlines. This request is authenticated using the API key obtained from NewsAPI. The choice of country, the API key, and the news category associated with the respective table in the Data Store are passed as query parameters.

* The `pushNewstoDatastore` method inserts the data obtained from the API call for the `title` and `url` parameters into a list. A [ ZCQL query](https://docs.catalyst.zoho.com/en/cloud-scale/help/zcql/introduction) then obtains the row count of each table. If data is already populated in a table from a previous API call made to NewsAPI, the data is replaced with the updated news items. If no rows exist, new data is pushed to the table.

* The script defined in the client component `main.js` makes an API call to the Advanced I/O function by executing a `GET` request to the route `/fetchData` defined in the function. The table names are passed in the request URL.

* The Advanced I/O function queries the relevant tables in the Data Store and obtains the `title` and `url` of the news items. This is constructed as a JSON response and passed back to `main.js`.

* `main.js` parses the JSON response obtained from the function and renders it in the HTML page by creating a list of nodes.