Log in to your [Glide](https://glideapps.com/?utm_source=14daysofnocode-lesson&utm_medium=referral&utm_campaign=14daysofnocode) dashboard.

Select '**Basic App**'. \
\
This template will speed up the process of creating a to-do list app.

By default, this template is set to a 'List' style. Change the style to '**Checklist**'.\
\
This will give you the functionality of changing the status of a note/task later on.

You're now going to customise the data input for the app. \
\
Click '**Data**'.

You'll see that this template includes some test data, which you're going to customise.\
\
Click the **+ new field** button in the table.

Name this field '**Task**', ensure the 'Type' is set to '**Text**' and click '**Save**'.

Click and drag this field left until it appears as the first field in the table.

You're now going to create a 'Status' button which you can use to set a task to complete or incomplete within your to-do list.\
\
**Click the drop-down field menu** from the arrow button within the '**Name**' field.

Give the first 3 tasks in the table the task names 'Task 1', 'Task 2' and 'Task 3'. \
\
This is just for demonstration purposes as you're going to be testing the functionality of your app using these tasks in a moment.

Click the '**Layout**' button at the top of the page to head back to the app editor.

You're now going to map the 'Task' field you added in the table to the item titles in your list.\
\
Click '**Collection**' from the left-hand menu.

In the right-hand menu, remove "**Status**" and replace it with "**Task**"

You'll see that the items in your app have now updated. The bold title for each item in the list is now mapped to the 'Task' field in the table that you just customised.\
\
The three tasks that you gave task names to should appear in the list. Items in the table without task names will just appear with short descriptions.\
\
You'll also see here that the '**Checked**' item data is automatically mapped to your '**Status**' table field. You'll see how this works in a moment.

You're now presented with the components and options specifically for this 'screen' within your app.\
\
Click the '**Title**' component.

On the right-hand side of the screen you'll see the options for this section of the screen.

Change the Title from "**Status**" to **Task**"\
\
This is because you want the Task name to appear in bold as the title on this screen.

Select the '**Fields**' component from the left-hand menu.

You're now going to add a new '**Switch**' component. \
\
This 'Switch' will be used to determine whether an item is complete or incomplete. You'll see how this works in a moment.\
\
Click the **+ button** next to 'Components'.

Search and select the '**Switch**' element.

You'll see that a Switch button has been added to this screen, and it's automatically mapped to the '**Status**' field in the database.\
\
Let's test it, so you can see how it works.

Now you can test how this 'Status' switch works. \
\
Let's assume you've completed the task and want to cross it off your list.\
\
Click the checkbox on this screen and you'll see the item is now greyed out.

Viewing as Scott Colenutt
3:11
Items
Scott's App
Items
Add

Task 1

A short description of the item

Task 2

A short description of the item

Task 3

A short description of the item

A short description of the item

A short description of the item

A short description of the item

A short description of the item

A short description of the item

A short description of the item

Close

Scott Colenutt

scottcolenutt22@gmail.com

Menu

Items

Categories

Now click the text within '**Task 2**' to be taken into the item.

Toggle the '**Status**' button on (assume for this app that toggling the button 'on' is marking it as complete).

Click the back arrow to go to the home screen.

You'll see the task is now greyed out within your items list. 

Now let's see how this relates to the database.\
\
Click '**Data**'.

Click '**Layout**' to head back to the app editor.

You'll see that 'Task 3' is also greyed out as it's been checked in your database (meaning it's complete).

You're now going to add a '**Delete**' button. \
\
This will allow you to remove items from the database by clicking on a button within the app.\
\
Enter '**Task 1**' from your app.

**Click the + button** next to '**Components**'.

Search and select the '**Button**' action.

You'll see a button is now added to the item screen.\
\
On the right-hand menu, select open the '**ACTION**' menu.

Change the button title to '**Delete Note**'

Now, test to see if this action is working as expected by clicking the '**Delete Note**' button you just created for Task 1.

Go back to your app home screen and you will see that Task 1 no longer appears.\
\
Now, delete each item without a task name.

You'll see that everything is functioning as expected as these items have been removed from your database. \
\
Click '**Layout**' to head back to your app.

Now let's give your app a tiny bit of customisation by adding a heading at the top of the home screen.\
\
**Click the + button** next to 'Components'.

Search and select the '**Headline**' component.

Drag the 'Headline' component to the top of the components list. You'll see that this will bring it to the top of your app's home screen.

Using the option from the right-hand menu, **centre align this headline.**

**Now change the headline text** to '\[your name\] to-do list'

Select the drop-down menu for the headline style.

Great, almost there...\
\
You're now going to test how your app works when adding a new item.\
\
**Click the + icon** on the home screen.

In this '**Add item**' screen you'll see that the component is incorrectly mapped to the 'Status' field.\
\
You now need to correctly map this component.\
\
Select the 'Text Entry: Name' component from the left-hand menu.

On the right-hand menu, click the drop-down menu in the '**Column**' field.

Boom 💥 you've got a functioning to-do list app!\
\
Today you've got hands on with the front end and back end development of a to-do list app in Glide. \
\
You've customised the app to clearly mark completed items, you've mapped components to items in the app's database, and you've configured a component with an action to delete items from the database.\
\
Great work today. 👏👏👏\
\
If you want, you can publish your app by clicking the '**Publish**' button in the top-right hand corner of the screen and following the instructions.

Glideapps

Day 14 of #100DaysofNoCode
Day 6 of #14DaysofNoCode

Create a To-do List App