docs: refactor validation and warnings codelab to use sample app

packages/docs/docs/codelabs/validation-and-warnings/codelab-overview.mdx

@@ -26,12 +26,14 @@ In this codelab, you'll create a new custom block type that generates a list of
   className="codelabImage"
 />
 
-You can find the code for the [completed custom block](https://github.com/RaspberryPiFoundation/blockly/tree/main/packages/docs/docs/codelabs/validation-and-warnings/complete-code/index.js) on GitHub.
+You can find the code for the [completed custom block](https://github.com/RaspberryPiFoundation/blockly/tree/main/packages/docs/docs/codelabs/validation-and-warnings/complete-code) on GitHub.
 
 ### What you'll need
 
 - A browser.
 - A text editor.
-- Basic knowledge of JavaScript.
+- Basic knowledge of HTML, CSS, and JavaScript.
+- node.js and npm installed ([instructions](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)).
+- Comfort using the command line/terminal.
 - Basic understanding of the [Blockly toolbox](/guides/configure/toolboxes/toolbox).
 - Basic understanding of [using JSON to define custom blocks](/guides/create-custom-blocks/define/structure-json).

packages/docs/docs/codelabs/validation-and-warnings/complete-code/README.md

@@ -0,0 +1,14 @@
+# Completed code
+
+The finished code for the [block validation and warnings](../codelab-overview.mdx) codelab.
+
+## Run it
+
+To run the complete code, navigate to the `complete-code` folder in your terminal, then run: 
+
+```bash
+npm install   # downloads the libraries the app needs (one time)
+npm start     # opens the app at http://localhost:...
+```
+
+New to npm? See [installing node & npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).

packages/docs/docs/codelabs/validation-and-warnings/complete-code/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "validation-and-warnings-codelab",
+  "version": "1.0.0",
+  "description": "A sample app using Blockly",
+  "main": "index.js",
+  "private": true,
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack --mode production",
+    "start": "webpack serve --open --mode development"
+  },
+  "keywords": [
+    "blockly"
+  ],
+  "author": "",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "css-loader": "^6.7.1",
+    "html-webpack-plugin": "^5.5.0",
+    "source-map-loader": "^4.0.1",
+    "style-loader": "^3.3.1",
+    "webpack": "^5.93.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4"
+  },
+  "dependencies": {
+    "blockly": "^13.0.0"
+  }
+}

packages/docs/docs/codelabs/validation-and-warnings/complete-code/src/blocks/text.js

@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright 2026 Raspberry Pi Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as Blockly from 'blockly/core';
+
+// Create a custom block called 'add_text' that adds
+// text to the output div on the sample app.
+// This is just an example and you should replace this with your
+// own custom blocks.
+const addText = {
+  type: 'add_text',
+  message0: 'Add text %1',
+  args0: [
+    {
+      type: 'input_value',
+      name: 'TEXT',
+      check: 'String',
+    },
+  ],
+  previousStatement: null,
+  nextStatement: null,
+  colour: 160,
+  tooltip: '',
+  helpUrl: '',
+};
+
+// A custom block that generates a list of numbers counting up from FIRST to
+// LAST. It validates itself using the 'list_range_validation' extension.
+const listRange = {
+  type: 'list_range',
+  message0: 'create list of numbers from %1 up to %2',
+  args0: [
+    {
+      type: 'field_number',
+      name: 'FIRST',
+      value: 0,
+      min: 0,
+      precision: 2,
+    },
+    {
+      type: 'field_number',
+      name: 'LAST',
+      value: 5,
+      min: 0,
+      precision: 1,
+    },
+  ],
+  output: 'Array',
+  style: 'list_blocks',
+  extensions: ['list_range_validation'],
+};
+
+// Create the block definitions for the JSON-only blocks.
+// This does not register their definitions with Blockly.
+// This file has no side effects!
+export const blocks = Blockly.common.createBlockDefinitionsFromJsonArray([
+  addText,
+  listRange,
+]);

packages/docs/docs/codelabs/validation-and-warnings/complete-code/src/generators/javascript.js

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright 2026 Raspberry Pi Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Order } from 'blockly/javascript';
+
+// Export all the code generators for our custom blocks,
+// but don't register them with Blockly yet.
+// This file has no side effects!
+export const forBlock = Object.create(null);
+
+forBlock['add_text'] = function (block, generator) {
+  const text = generator.valueToCode(block, 'TEXT', Order.NONE) || "''";
+  const addText = generator.provideFunction_(
+    'addText',
+    `function ${generator.FUNCTION_NAME_PLACEHOLDER_}(text) {
+
+  // Add text to the output area.
+  const outputDiv = document.getElementById('output');
+  const textEl = document.createElement('p');
+  textEl.innerText = text;
+  outputDiv.appendChild(textEl);
+}`,
+  );
+  // Generate the function call for this block.
+  const code = `${addText}(${text});\n`;
+  return code;
+};
+
+forBlock['list_range'] = function (block, generator) {
+  const first = block.getFieldValue('FIRST');
+  const last = block.getFieldValue('LAST');
+  const numbers = [];
+  for (let i = first; i <= last; i++) {
+    numbers.push(i);
+  }
+  const code = '[' + numbers.join(', ') + ']';
+  return [code, Order.NONE];
+};