DOM Manipulation

Render Badges

Render Badges

Rendering repeated data means each item should become its own element. A single joined string may look close, but it removes the structure that CSS and later JavaScript need.

Badges are a small version of the same pattern used for cards, rows, and navigation items.

Your task: Render each status in the statuses array as a span.status-badge inside the badge row.

Free with a JS Exercises account

Sign in to start coding, run your solution, and keep your progress saved for later. No payment needed.

By continuing, you agree to our Terms and Privacy Policy. We'll send occasional product updates and news. You can unsubscribe anytime.

Render Badges

Rendering repeated data means each item should become its own element. A single joined string may look close, but it removes the structure that CSS and later JavaScript need.

Badges are a small version of the same pattern used for cards, rows, and navigation items.

Your task: Render each status in the statuses array as a span.status-badge inside the badge row.

Free with a JS Exercises account

Sign in to start coding, run your solution, and keep your progress saved for later. No payment needed.

By continuing, you agree to our Terms and Privacy Policy. We'll send occasional product updates and news. You can unsubscribe anytime.

Console

Run code to see output.