Module 4 of 14
Add Tasks to Your List
What you'll learn
- How to add a button.
- How to turn typed words into a task on the list.
Step-by-step instructions
- Type this message and press Return:
Please add one small feature to my task-list page: an “Add Task” button next to the task box. Do not make the button do anything yet. Tell me exactly how to check it in my browser.
- Refresh the page.
How to check it worked: You can see an Add Task button.
- Type this message and press Return:
Now make the “Add Task” button do one thing: when I type a task and click the button, add that task underneath the box as a new item in my list. Then clear the task box so it is empty again. Do not add any other features. Tell me exactly how to test this.
- Type Buy groceries in the box and click Add Task.
- Add Call Mum in the same way.
How to check it worked: Both tasks appear underneath the box, and the box empties after each task is added.
If something doesn't work
I can see the Add Task button, but clicking it does not add my typed task to the list. Please fix just that one problem.
What just happened?
Codex connected two parts of the page: the text box and the button. When someone clicks the button, the app takes the words from the box and shows them as a task.
This is the first behaviour in your app: an action by a person causes the page to change.
Module checklist
- The Add Task button is visible.
- It adds a typed task to the list.
- The task box clears afterward.
Next module: You will mark a task as finished.