=================
Writing some code
=================

Let's change the application interface. We'll remove the menu that 
:doc:`Default code </intro/default_code>` 
creates and open
the **Tasks** journal when a user opens the application in a Web browser. 

Select **Task** node in the project tree and click on the **Client module** 
button:

.. image:: /intro/_images/tasks_client.png
	:align: center
	:alt: Todo client code button

The 
:doc:`Code editor </admin/code_editor>`
will be displayed with the task client module.

.. image:: /intro/_images/todo_client_code.png
	:align: center
	:alt: Todo task client code

In the 
:doc:`on_page_loaded </refs/client/task/on_page_loaded>`
event handler let's remove code that creates the main menu
and add the following line:

.. code-block:: console

    task.tasks.view($("#content"));

.. image:: /intro/_images/todo_client_changed.png
	:align: center
	:alt: Todo task client code changed
	
This line of code will create a view form of the **Tasks** journal and add it 
to the div with id="content" of the page. See 
:doc:`Forms </programming/interface/forms>`.

Now select the **Tasks** journal in the project tree and click on the 
**Client module** button. Select the **Events** tab in the left panel of the 
code editor and double click on the 
:doc:`on_after_append </refs/client/item/on_after_append>`
item in the list. The following lines of code will appear in the editor:

.. code-block:: console

    function on_after_append(item) {
    
    }
    
This event is triggered after the 
:doc:`append </refs/client/item/m_append>`
method of the **Tasks** journal 
is executed. Let's add a line of code to this event handler: 

.. code-block:: console

    function on_after_append(item) {
        item.date.value = new Date();
    }

This code will set a value of the **created** field of a new task 
to the current date.

.. image:: /intro/_images/tasks_client_code.png
	:align: center
	:alt: Tasks journal client code
