feat: add control flow exercises with solutions and tests

- Introduced new exercises on loops and nested loops, including a seating chart problem.
- Updated existing loop exercise to build a numbered list of exhibits.
- Added ternary operator exercise for concise value selection.
- Created corresponding solution and test files for all new exercises.
- Updated package-lock.json to reflect new dependencies.

Author: kentcdodds

exercises/04.control-flow/03.problem.loops/README.mdx

@@ -1,42 +1,25 @@
 # Loops
 
-👨‍💼 Let's build a fun text banner using loops. We'll make a simple "staircase"
-pattern of `*` characters.
+👨‍💼 Let's practice a simple `for` loop by building a numbered list.
 
-🐨 Open <InlineFile file="index.ts" /> and:
+🐨 Open <InlineFile file="index.ts" /> and use a `for` loop to build a string
+with labels for exhibits 1 through 5. Each label should be on its own line.
 
-1. Use a `for` loop to build 5 rows of stars
-2. Each row should have one more `*` than the previous row
-3. Put each row on its own line using `\n`
-
-💰 Traditional `for` loop structure:
+## How a `for` loop works
 
 ```ts
-for (let i = 0; i < count; i++) {
-	// do something
+for (let i = 0; i < limit; i++) {
+	// repeat work
 }
 ```
 
-💰 String building with a loop:
-
-```ts
-let output = ''
-for (...) {
-	output += 'x'
-}
-```
+Each part of the loop has a job:
 
-💰 You'll need **two loops** for this exercise—an outer loop for each row, and
-an inner loop to build the stars for that row. This is called a "nested loop":
+- **Initializer** (`let i = 0`) runs once before the loop starts
+- **Condition** (`i < limit`) is checked before each iteration
+- **Final expression** (`i++`) runs after each iteration
 
-```ts
-for (let row = 1; row <= 5; row++) {
-	// inner loop builds stars for this row
-	for (let star = 0; star < row; star++) {
-		// add a star
-	}
-}
-```
+`i++` means "add 1 to `i`." It's the same as `i += 1`.
 
 📜 [MDN - for statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for)
 

exercises/04.control-flow/03.problem.loops/index.ts

@@ -1,18 +1,14 @@
-// Star Staircase
-// Using loops to build a fun string pattern
+// Exhibit Labels
+// Using a for loop to build a numbered list
 
-// 🐨 Create a variable `output` starting as an empty string
-// 💰 let output = ''
+// 🐨 Create a variable `exhibitLabels` starting as an empty string
+// 💰 let exhibitLabels = ''
 
-// 🐨 Write a for loop that builds 5 rows of stars
-// Each row should be one star longer than the previous
-// 💰 for (let row = 1; row <= 5; row++)
+// 🐨 Write a for loop that counts from 1 to 5
+// 🐨 On each pass, add a line like "Exhibit 1" to the string
+// 🐨 Put each label on its own line using "\n"
 
-// Inside the loop:
-// 🐨 Build a single line of stars for this row
-// 🐨 Add that line plus a "\n" to the output
-
-// console.log(output)
+// console.log(exhibitLabels)
 
 // 🐨 Export your variable so we can verify your work
-// export { output }
+// export { exhibitLabels }

exercises/04.control-flow/03.solution.loops/README.mdx

@@ -1,13 +1,7 @@
 # Loops
 
-👨‍💼 Great job! You used loops to build a string step by step—a very common
-pattern when generating output.
+👨‍💼 Nice work! You used a simple `for` loop to build a string step by step.
 
-🦉 The string-building pattern:
-
-1. Start with an empty string
-2. Build one piece at a time
-3. Add separators like `\n` between pieces
-
-This pattern shows up when generating reports, formatting text, or building
-simple ASCII art.
+🦉 The loop made it easy to repeat a small action (adding one label) without
+copying and pasting code. This is the heart of loops: repeating a small unit of
+work while keeping track of progress with a counter.

exercises/04.control-flow/03.solution.loops/index.test.ts

@@ -2,18 +2,19 @@ import assert from 'node:assert/strict'
 import { test } from 'node:test'
 import * as solution from './index.ts'
 
-await test('output is exported', () => {
+await test('exhibitLabels is exported', () => {
 	assert.ok(
-		'output' in solution,
-		'🚨 Make sure you export "output" - add: export { output }',
+		'exhibitLabels' in solution,
+		'🚨 Make sure you export "exhibitLabels" - add: export { exhibitLabels }',
 	)
 })
 
-await test('output should match the star staircase', () => {
-	const expected = '*\n**\n***\n****\n*****\n'
+await test('exhibitLabels should list exhibits 1 through 5', () => {
+	const expected =
+		'Exhibit 1\nExhibit 2\nExhibit 3\nExhibit 4\nExhibit 5\n'
 	assert.strictEqual(
-		solution.output,
+		solution.exhibitLabels,
 		expected,
-		'🚨 output should be a 5-line staircase of stars (each row has one more star than the previous)',
+		'🚨 exhibitLabels should list Exhibit 1 through Exhibit 5 on separate lines',
 	)
 })

exercises/04.control-flow/03.solution.loops/index.ts

@@ -1,17 +1,12 @@
-// Star Staircase
-// Using loops to build a fun string pattern
+// Exhibit Labels
+// Using a for loop to build a numbered list
 
-let output = ''
+let exhibitLabels = ''
 
-for (let row = 1; row <= 5; row++) {
-	let line = ''
-	for (let count = 0; count < row; count++) {
-		line += '*'
-	}
-
-	output += `${line}\n`
+for (let exhibitNumber = 1; exhibitNumber <= 5; exhibitNumber++) {
+	exhibitLabels += `Exhibit ${exhibitNumber}\n`
 }
 
-console.log(output)
+console.log(exhibitLabels)
 
-export { output }
+export { exhibitLabels }

exercises/04.control-flow/04.problem.nested-loops/README.mdx

@@ -0,0 +1,21 @@
+# Nested Loops
+
+👨‍💼 Let's generate a seating chart for a small theater. Each row has multiple
+seats, so we'll need a loop inside a loop.
+
+🐨 Open <InlineFile file="index.ts" /> and build a string that looks like this:
+
+```
+A1 A2 A3 A4
+B1 B2 B3 B4
+C1 C2 C3 C4
+```
+
+Each row should be on its own line using `\n`.
+
+Use **nested `for` loops**:
+
+- The **outer loop** controls which row you're on
+- The **inner loop** builds the seat labels for that row
+
+📜 [MDN - for statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for)

exercises/04.control-flow/04.problem.nested-loops/index.ts

@@ -0,0 +1,17 @@
+// Theater Seating Chart
+// Use nested loops to build rows and seats
+
+const rows = ['A', 'B', 'C']
+const seatsPerRow = 4
+
+// 🐨 Create a variable `seatChart` starting as an empty string
+// 💰 let seatChart = ''
+
+// 🐨 Use nested for loops to build the seating chart
+// 🐨 Each row should include seat labels like "A1 A2 A3 A4"
+// 🐨 Put each row on its own line using "\n"
+
+// console.log(seatChart)
+
+// 🐨 Export your variable so we can verify your work
+// export { seatChart }

exercises/04.control-flow/04.problem.nested-loops/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "exercises_04.control-flow_04.problem.nested-loops",
+  "type": "module",
+  "scripts": {
+    "start": "npx @kentcdodds/log-module ./index.ts",
+    "start:watch": "npx @kentcdodds/log-module --watch ./index.ts",
+    "test": "node --test index.test.ts",
+    "test:watch": "node --watch --test index.test.ts"
+  }
+}

exercises/04.control-flow/04.solution.nested-loops/README.mdx

@@ -0,0 +1,10 @@
+# Nested Loops
+
+👨‍💼 Great work! Nested loops are perfect when you need to build a grid, table,
+or other row/column structure.
+
+🦉 A helpful pattern is:
+
+1. Use the **outer loop** to pick the row
+2. Build a **single row string**
+3. Add that row plus `\n` to the full output

exercises/04.control-flow/04.solution.nested-loops/index.test.ts

@@ -0,0 +1,19 @@
+import assert from 'node:assert/strict'
+import { test } from 'node:test'
+import * as solution from './index.ts'
+
+await test('seatChart is exported', () => {
+	assert.ok(
+		'seatChart' in solution,
+		'🚨 Make sure you export "seatChart" - add: export { seatChart }',
+	)
+})
+
+await test('seatChart should match the seating chart', () => {
+	const expected = 'A1 A2 A3 A4\nB1 B2 B3 B4\nC1 C2 C3 C4\n'
+	assert.strictEqual(
+		solution.seatChart,
+		expected,
+		'🚨 seatChart should list rows A-C with seats 1-4 on separate lines',
+	)
+})