Beginner level · Module 5: Interactive Page Project · Lesson 2 of 3
Building the Price Board
Implement the features one at a time using the render pattern, checking the page after each step.
In this lesson you will
- Implement adding, removing and sorting with the render pattern
- Highlight calculated results in the page
Key concepts
render after changesorting with compare functionshighlighting with classesincremental build
The lesson
Implement adding entries first and check the list renders. Then add removing, then sorting by price or name, then the cheapest and dearest highlights.
Sort a copy of the data for display so the original order is kept: [...entries].sort((a, b) => a.price - b.price). Use Math.min and Math.max with map to find the price range.
After every feature, open the console and check there are no errors. Small, checked steps are faster than writing everything and debugging at the end.
Step by step
- Implement adding entries and rendering.
- Implement removing with event delegation.
- Implement sorting by price and by name.
- Highlight the cheapest and dearest entries.
Practice activity
Implement all features of the Market Price Board.
Expected result: Every feature works and the console shows no errors.
Check your understanding
-
Why sort a copy of the entries?
Show answer
To keep the original order of the data unchanged.
-
How can you find the highest price in an array of entries?
Show answer
Math.max(...entries.map((e) => e.price)).
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.