<\/span><\/h1>\nCreate a simple input box and button:<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <title>Postcode Lookup<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<h2>Postcode Lookup Tool<\/h2>\r\n\r\n<input type=\"text\" id=\"postcode\" placeholder=\"Enter postcode\">\r\n<button onclick=\"lookupPostcode()\">Search<\/button>\r\n\r\n<pre id=\"result\"><\/pre>\r\n\r\n<script src=\"script.js\"><\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/code><\/pre>\n
\n<\/span>\u00a0Step 2: Add JavaScript Logic<\/span><\/h1>\nCreate script.js<\/code>:<\/p>\nfunction lookupPostcode() {\r\n const postcode = document.getElementById(\"postcode\").value;\r\n\r\n fetch(`https:\/\/api.postcodes.io\/postcodes\/${postcode}`)\r\n .then(response => response.json())\r\n .then(data => {\r\n document.getElementById(\"result\").textContent =\r\n JSON.stringify(data.result, null, 2);\r\n })\r\n .catch(error => {\r\n console.error(\"Error:\", error);\r\n });\r\n}\r\n<\/code><\/pre>\n
\n<\/span>\u00a0Step 3: Test Your Tool<\/span><\/h1>\nTry entering:<\/p>\n
SW1A 1AA\r\n<\/code><\/pre>\nYou should see:<\/p>\n
\n- Latitude<\/li>\n
- Longitude<\/li>\n
- Region<\/li>\n
- Admin district<\/li>\n<\/ul>\n
\n<\/span>\u00a0Step 4: Improve the UI (Optional)<\/span><\/h1>\nInstead of raw JSON, display clean results:<\/p>\n
.then(data => {\r\n const result = data.result;\r\n\r\n document.getElementById(\"result\").innerHTML = `\r\n <p><strong>Postcode:<\/strong> ${result.postcode}<\/p>\r\n <p><strong>Region:<\/strong> ${result.region}<\/p>\r\n <p><strong>District:<\/strong> ${result.admin_district}<\/p>\r\n <p><strong>Latitude:<\/strong> ${result.latitude}<\/p>\r\n <p><strong>Longitude:<\/strong> ${result.longitude}<\/p>\r\n `;\r\n})\r\n<\/code><\/pre>\n
\n<\/span>\u00a0Step 5: Add Validation<\/span><\/h1>\nPrevent errors from bad input:<\/p>\n
if (!postcode) {\r\n alert(\"Please enter a postcode\");\r\n return;\r\n}\r\n<\/code><\/pre>\n
\n<\/span>\u00a0Step 6: Add Advanced Features<\/span><\/h1>\n<\/span>\u00a01. Show Map Location<\/span><\/h3>\nUse:<\/p>\n