Module 3 of 14
Add a Box for New Tasks
What you'll learn
- How to add a text box to a web page.
Step-by-step instructions
- Open your my-task-list Codex task.
- Type this message and press Return:
Please add one small feature to my task-list page: a text box where I can type a new task. Inside the empty box, show the light hint text “What do you need to do?” Do not add a button or make the task save yet. Tell me exactly how to check the change in my browser.
- Open or refresh the browser page. To refresh, click the circular arrow near the address bar.
- Mac users: You can also press
Command+R. - Windows users: You can also press
Ctrl+R.
- Click the box and type:
Buy groceries
How to check it worked: The words appear in the box.
If something doesn't work
I can see the task box, but clicking it does not let me type. Please fix just that one problem.
What just happened?
Codex added a text box, sometimes called an input. It is a place where a person can type information into a web page. The hint text disappears when you begin typing.
The box does not save anything yet. Separating “type a task” from “add a task” keeps this module simple and easy to check.
Module checklist
- You can see the task box.
- It shows What do you need to do? before you type.
- You can type into it.
Next module: You will add an Add Task button and use it to build a list.