Building a To-Do List Application

Build a to-do list web application using Catalyst Advanced I/O Function and Catalyst Data Store that enables you to note down tasks to be done and delete them after they are done.

Configure the Client

Now, let's configure the client component. The 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 given in this section to make sure you fully understand it.

Copy the code given below and paste it in index.html located in client/ directory using an IDE and save the file.

  • View code for index.html

    Copied 
    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>ToDoApp</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script src="main.js"></script>
    </head>
    
    <body>
        <div id="to-do-list-div">
            <form onSubmit="return false;" method="POST">
                <input type="text" id="item" name="item" placeholder="Add a new task.." required />
                <input type="submit" value="Add Task" />
            </form>
            <ul></ul>
        </div>
    </body>
    </html>
    

Copy the code given below and paste it in main.css located in client/ directory and save the file.

  • View code for main.css

    Copied 
    html, body {
        height: 100%;
      }
    .full-height {
        height: 100%;
      }
    
    body{
        background: #fefefe;
        font-family: Arial;
        color: #000000;
        min-height: 100%;
    }
    
    #to-do-list-div{
        position: relative;
        width: 95%;
        background: #dddddd;
        margin: 0 auto;
        padding: 20px;
        box-sizing: border-box;
    }
    
    #to-do-list-div form:after{
        margin: 0;
        content: '';
        display: block;
        clear: both;
    }
    
    input[type="text"]{
        width: 70%;
        padding: 20px;
        background:#f5f4f4;
        border: 0;
        float: left;
        font-size: 20px;
        color: #0b0b0b;
    }
    
    input[type="submit"]{
        padding: 20px;
        width: 25%;
        float: left;
        background: #a4a2a2;
        border: 0;
        box-sizing: border-box;
        color: rgb(26, 26, 26);
        cursor: pointer;
        font-size: 20px;
    }
    
    ul{
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
    
    li{
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        font-family: arial;
        font-size: 20px;
        cursor: pointer;
        letter-spacing: 1px;
    }
    
    li:hover{
        text-decoration: line-through;
        background: rgba(0,0,0,0.2);
    }
    

Copy the code given below and paste it in main.js located in client/ directory and save the file.

  • main.js

    Copied 
    $(document).ready(function(){
    
        //Fires the GET API defined in the function on page load
    	// All URLs to the Advanced I/O function will be of the pattern: /server/{function_name}/{url_path}
        $.ajax({
            type: 'GET',
              url: '/server/to_do_list_function/todo', //Ensure that 'to_do_list_function' is the package name of your function
              async: false,
            success: function(html){
                //Appends the items to the HTML from the server on success
                $("#to-do-list-div ul").append(html);
            }
        });
    
        //Fires the POST API defined in the function
    	// All URLs to the Advanced I/O function will be of the pattern: /server/{function_name}/{url_path}
        $('form').on('submit', function(){
            var itemVal= $("#item").val();
            var todo= {item:itemVal};
            $.ajax({
                type: 'POST',
                contentType: "application/json; charset=utf-8",
                url: '/server/to_do_list_function/todo', //Ensure that 'to_do_list_function' is the package name of your function
                data: JSON.stringify(todo),
                success: function(data){
                    location.reload(); //Reloads the page on success
                }
            });
            return false;
        });
    
        //Fires the DELETE API on the delete button's click
    	// All URLs to the Advanced I/O function will be of the pattern: /server/{function_name}/{url_path}
        $(document).on("click","#to-do-list-div ul li",function()
        {
            var itemRowId = $(this).attr("value"); //The item is deleted using the attribute "value" which indicates the ROWID of the record in the Data Store
    		$.ajax({
    		  type: 'DELETE',
    		  url: '/server/to_do_list_function/todo' + itemRowId, //Appends the ROWID along with the URL 
    		//Ensure that 'to_do_list_function' is the package name of your function
    		  success: function(data){
                  location.reload(); //Reloads the page on success
    		  }
            });
            return false;
    	});
      });
    

The client directory is now configured.

Let's quickly go over the working of the function and the client code:

  1. POST operation
    • When the user enters a to-do list item in the app and saves it, the submit event associated with the Add Task button triggers an Ajax call to the POST API.
    • The main.js in the client handles the Ajax operation and the URL, and it calls the POST API defined in the index.js function file.
    • The POST API defined in index.js inserts the data as a record in the TodoItems table in the Data Store. The list item is inserted as the value of the Notes column.
    • After a record insertion is done, a reload event loads the client app on success.
  2. GET operation
    • The reload event triggers an Ajax call to the GET API. The URL and the Ajax operation are handled in main.js.
    • The GET API defined in index.js triggers the getToDoListFromDataStore function that obtains all the records the Data Store by executing a ZCQL query.
    • The GET API then creates a HTML for the list items retrieved from the Data Store and sends the HTML back to the client for rendering.
    • The main.js appends this HTML obtained from the function and displays on page reload.
  3. DELETE operation
    • When the user clicks on a list item in the client app, the DELETE API is triggered.
    • The main.js handles the Ajax call to the DELETE API and the item is deleted by referring to the ROWID of the record in the Data Store.
    • The DELETE API defined in index.js then executes the delete operation for the record in the TodoItems table matching the ROWID and sends the response back to the client.
    • The main.js reloads the client app upon a successful delete operation, and displays the updated data in the client.