Premium JavaScript project

Build a Decision Helper

Build a decision helper that models two choices, compares shared factors, handles ties, and renders a recommendation.

A read-only browser preview that displays two options, factor-level winners, and a simple recommendation from your JavaScript data model.

Easy18 guided stagesData modelingComparison logicDerived resultsDOM rendering

RecommendationAgency Job2 factors

SalaryAgency Job

CommuteStartup Job

Remote daysAgency Job

Finished project preview

Unlock the interactive stages

Upgrade to use the editor, browser preview, tests, and saved progress for every stage.

Staged implementation
Automated tests
Saved progress

Unlock project

Project guide

Build a decision helper from structured data and reusable logic

Create a browser-based tool that compares two options across shared factors. You’ll model flexible decision data, keep comparison rules in small functions, handle ties explicitly, derive one recommendation, and render the reasoning so the result remains understandable.

Applied skills

Data modelingComparison logicDerived resultsDOM rendering

Before you start

Create objects and arrays that describe related data
Write functions with parameters, return values, and conditionals
Understand comparisons and basic DOM element creation

What you’ll build and practice

Model options and comparison factors as reusable data
Compare values with small, testable JavaScript functions
Handle tied factors without forcing a false winner
Derive an overall recommendation from factor results
Render the options, recommendation, and reasoning in the DOM

Build a Decision Helper in Decision Helper

Read

Meet the first version of a decision helper: two competing options, shared comparison details, factor winners, and one rendered recommendation.

Part 1: Describe the Data in Decision Helper

Read

Start the decision helper by planning the data shape before writing comparison or DOM code.

Model the Decision in Decision Helper

Code

Create the first JavaScript data model for a decision helper by storing a decision title and two flexible option records.

Add Comparison Details in Decision Helper

Code

Fill the decision model with matching numeric attributes so two custom options can be compared in later stages.

Understand the Decision Data in Decision Helper

Read

Learn how the decision object separates option facts from the rules used to judge those facts.

Add Decision Factors in Decision Helper

Code

Add factor records that connect each raw attribute to a readable label and a higher-or-lower comparison rule.

Part 2: Compare One Factor in Decision Helper

Read

Move from describing decision data to comparing one factor at a time before calculating a full recommendation.

Compare Two Values in Decision Helper

Code

Write a tiny helper that chooses the better of two numbers using a higher-or-lower comparison rule.

Compare One Factor in Decision Helper

Code

Use a factor key to read matching attribute values and return the option name that wins one comparison.

Handle Ties in Decision Helper

Code

Update the one-factor comparison so equal values are treated as a tie instead of accidentally picking one option.

Compare Every Factor in Decision Helper

Code

Loop through every decision factor and return display-friendly comparison results without choosing the final winner yet.

Get the Recommendation in Decision Helper

Code

Use the factor-level results to return one overall recommendation without adding DOM code yet.

Part 3: Show the Decision in Decision Helper

Read

Pause before the DOM work and connect the completed decision logic to the page-rendering plan.

Render the Decision Header in Decision Helper

Code

Use the existing decision data to fill the prepared page with the decision title and two option names.

Render the Recommendation in Decision Helper

Code

Display the existing recommendation result on the prepared page without recalculating it in the DOM code.

Render the Factor Results in Decision Helper

Code

Render the factor-level result list from getFactorResults so the page shows why the recommendation was made.

Render the Whole Decision in Decision Helper

Code

Create one render function that refreshes the whole decision page by calling the smaller render helpers.

Decision Helper Complete in Decision Helper

Read

Close out the project by reviewing the app structure, the read-only rendering boundary, and the under-construction continuation.

Ready to build the project?

Unlock the interactive stages, run the tests, and keep your code saved as you work through the full project.

View plans