Beginner level · Module 5: Interactive Page Project · Lesson 1 of 3
Planning the Price Board
Decide the data shape, the page layout and the functions before writing code.
In this lesson you will
- Design the data structure for the project
- Sketch the interface and list the functions needed
Key concepts
data modelwireframefunction listbuild order
The lesson
Start with the data: each entry is an object such as { id, item, unit, price }. Decide where entries are stored (an array) and which values are calculated (cheapest, dearest) rather than stored.
Sketch the page: a form to add an entry, a sortable list and a summary area. A quick paper sketch reveals missing pieces, such as where validation messages will appear.
List the functions — addEntry, removeEntry, sortEntries, render, validate — and the order to build them. Build the smallest working version first, then add features.
Step by step
- Write the shape of one entry object.
- Sketch the page layout on paper.
- List the functions and what each does.
- Agree the build order with the instructor.
Practice activity
Submit the data shape, sketch and function list for the Market Price Board.
Expected result: An approved plan that covers every required feature.
Check your understanding
-
Why store cheapest and dearest as calculations rather than data?
Show answer
They can be derived from the entries and would otherwise get out of date.
-
What should be built first?
Show answer
The smallest working version, before extra features.
Taught live by an instructor — online or in person. Free course lessons are for self-study and do not lead to a certificate — see registration options.