Web Build 076

JavaScript basics: Template strings

Build template strings inside the persistent Civic calendar: Template strings starter project.

JavaScript basics

10 minutes Core Lesson 76 of 120

constletfunctionifarrayreturn

Lesson 76 of 120 0/120 lessons 0/18 missions JavaScript basics · 10 minutes

0%

Continue View profile

New learnerrank 0XP 0%complete

Current edit

Name the lesson values

Add the exact const declarations for the lesson topic and project name.

Target: app.js · Replace the starter comment in app.js.
Evidence: Two descriptive constants store the lesson values.

app.js javascript

Preview allowlisted render

Console text only

Instructions 10 minutes

Load exact snippets or type matching Web code. Run each task, compare the preview, then press Check to save the lesson.

Start with the Current task. Edit its named project file, press Run, compare the reviewed preview, then continue. Press Check only after every task is complete.

Name the lesson values

Add the exact const declarations for the lesson topic and project name.

Target app.js · Replace the starter comment in app.js. Evidence Two descriptive constants store the lesson values. Snippet

const lessonTopic = "Template strings";
const projectName = "Civic calendar: Template strings";

Next up

Define a small function

Add the exact buildStatus function and return statement.

Target app.js · After the first declarations. Evidence A named function accepts a parameter and returns a status string. Snippet

function buildStatus(topic) {
  return `${topic} is ready`;
}

Next up

Use the function and collection

Add the exact learningSteps array, function call, and console statement, then Run and Check.

Target app.js · At the end of app.js. Evidence The function result and array length are used in a final statement. Snippet

const learningSteps = ["read", "run", "check"];
const statusMessage = buildStatus(lessonTopic);
console.log(statusMessage, learningSteps.length);

Next up

Save progress

Keep learning across sessions.

Create a free account to sync completed lessons, XP, streaks, course status, and your next lesson across sessions.

Checking account status...

Progress sync is idle.

0XP New learnerrank 0day streak 0best streak 0daily streak 0lessons 0courses 0missions 0tasks Noverified

Continue

Progress sync stores completion IDs, scores, streaks, badges, and game settings. Terminal contents, editor snippets, lab scratch, email, and real names are never published on leaderboards or share cards.

Lesson support

What to notice while you play.

Objective

Complete a project-shaped template strings build while preserving each passing edit.

Hint

Start with the Current task. Open app.js, use Show exact edit when needed, Run, then follow the highlighted next task.

Why it matters

JavaScript basics becomes durable when every syntax choice is tied to a visible project outcome and a specific piece of evidence.

Common mistakes

Editing the wrong file instead of app.js.
Replacing earlier passing work instead of preserving it for the next step.
Pressing Check before every task has passed Run.
Expecting learner HTML, CSS, or JavaScript to execute; the preview uses reviewed scene states only.

Reference

Snippets in this lesson.

Run

Render a simulated preview from the current lesson snippet.

Check

Save the lesson after the required task snippets are complete.

Hint

Show the lesson hint without changing progress.

Reset

Clear local Web lab scratch state for this browser.