JavaScript lesson · 30 min

JavaScript Final Recap Project

Review the beginner JavaScript path by combining data, functions, arrays, validation, and rendering decisions.

Code runs locally in your browser

What you will practice

Connect the main JavaScript ideas from the course.
Turn raw data into a readable summary.
Practice thinking in small named steps.

What this means

A recap project is not about new syntax. It is about proving that earlier ideas can work together.

Useful programs usually read data, validate it, transform it, and present a result.

Small functions make a project easier for beginners because each function has one job you can test in your head.

If this is your first time seeing this

This lesson is a checkpoint, not a brand-new topic.

The goal is to see how arrays, objects, functions, booleans, and strings cooperate in one small task.

Mini glossary

Recap: A review that connects earlier ideas.
Summary: A shorter result created from a larger set of data.
Helper function: A small function created to keep one piece of logic clear.

Example from everyday life

A final recap is like packing a small travel bag after learning each item separately. You already know shirts, tickets, chargers, and keys; now the skill is choosing the right items and putting them together.

How it works step by step

The example starts with a list of lesson records.
`filter` keeps only completed lessons.
`map` turns the completed lessons into display titles.
A helper function builds a friendly progress sentence.

Where you will use this

A course dashboard summarizes progress.
A task app counts completed and remaining items.
A developer tool turns raw results into a short report.

Before you run the code

If this lesson feels comfortable, you are ready to start learning Node.js because Node uses the same JavaScript language in a server runtime.

The next course changes where JavaScript runs, not the whole language from scratch.

Common beginner mistakes

Trying to solve the whole task in one line.
Changing the original data when a summary would be enough.
Forgetting that this is the same JavaScript you will use in Node.js.

JavaScript editor

const lessons = [
  { title: "Variables", complete: true },
  { title: "Functions", complete: true },
  { title: "DOM Events", complete: true },
  { title: "Node.js Runtime", complete: false }
];

function makeProgressSummary(items) {
  const completed = items.filter((lesson) => lesson.complete);
  const titles = completed.map((lesson) => lesson.title);
  const percent = Math.round((completed.length / items.length) * 100);

  return {
    percent,
    titles,
    message: `Completed ${completed.length} of ${items.length} lessons`
  };
}

const summary = makeProgressSummary(lessons);

console.log(summary.message);
console.log(`Progress: ${summary.percent}%`);
console.log(`Ready for Node: ${summary.titles.includes("DOM Events")}`);

Console output

Run the code to see console output here.

Exercise checks0 of 2 checks passed.

WaitingSummarizes completed lessons

WaitingCalculates the progress percentage

Code runs locally in a temporary browser worker with a timeout. It is not sent to Lumio analytics or executed on the server.

Try changing this next

Mark the Node.js lesson complete and watch the percentage change.
Add one more lesson record.
Return a second message for remaining lessons.

Previous lesson All courses