App path Foundations

Keep track of things

An app whose screen is always drawn from one object that holds its data.

Example brief

A household wants a chore planner: add a chore, tick it off, remove it, and see a friendly message when the list is empty.

An example. Use your own idea next.

Steps

Name the fields each item has, such as a name and a due date.
Ask for one object and one , so the screen is always drawn from the data.
Add, tick and remove items. Check what the list says when it is empty.

What you will learn

State: The data an app is holding right now, such as its list of items and which screen is showing.
Render function: One function that draws the screen from the state. Change the state, call it again, and the screen is right.
Cross-site scripting: An attack where typed text is run as code. Showing text with textContent, never innerHTML, prevents it.

A sample prompt

A chore planner for a family of four. Each chore has a name and a due date. People add, tick off and remove chores, and see a friendly message when the list is empty. Use one state object and a render function.

Write yours first, then compare.

To complete it

Pass all 9 checks on one version, then accept.