Task: Modify Front-End

In this task, we will write code that changes how the front-end application appears.

1. Open VS Code and prepare to edit the file named "app.js"

2. Locate the following line, which is part of the structure that defines the menu.

{label:"Logout",function:"logout()", home:"Logout"},

3. Below that line, add the following:

//This menu item allows users to view the daily tasks to be performed
{label:"Daily Task",function:"navigate({fn:'show_tasks'})"},

This will modify the menu for authenticated users to include an option to show the daily tasks, which calls a function named "show_tasks"

4. Also in app.js, find the function named "show_tasks". Modify it to appear as follows:

async function show_tasks(store){

    hide_menu()
    tag("canvas").innerHTML=`
    <div class="page">
        <h2>Daily Tasks</h2>
        <div id="tasks_panel">
        <i class="fas fa-spinner fa-pulse"></i>
        </div>
    </div>
    `
}

5. Save the file. The app running in your browser should now have a menu choice called "Daily Tasks" that renders the HTML entered in step 4.

modify-front-end

Task: Modify Front-End

Next