| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <title>Simulated API: /api/create and /api/list</title> |
| <style> |
| body { font-family: Arial, sans-serif; margin: 2rem; } |
| button { margin: 0.5rem 0; padding: 0.5rem 1rem; font-size: 1rem; } |
| pre { background: #f0f0f0; padding: 1rem; border-radius: 5px; } |
| </style> |
| </head> |
| <body> |
|
|
| <h1>Simulated API Endpoints</h1> |
|
|
| <button id="createPinBtn">POST /api/create (Generate PIN)</button> |
| <button id="listPinsBtn">GET /api/list (List all PINs)</button> |
|
|
| <h2>Response:</h2> |
| <pre id="responseOutput">Click a button to simulate API call.</pre> |
|
|
| <script> |
| |
| const generatedPins = []; |
| |
| |
| function handleRequest(path, method) { |
| if (path === "/api/create" && method === "POST") { |
| |
| const pin = Math.floor(1000 + Math.random() * 9000); |
| |
| generatedPins.push(pin); |
| return { |
| endpoint: "/api/create", |
| method: "POST", |
| status: "success", |
| pin: pin |
| }; |
| } |
| |
| if (path === "/api/list" && method === "GET") { |
| return { |
| endpoint: "/api/list", |
| method: "GET", |
| status: "success", |
| pins: [...generatedPins] |
| }; |
| } |
| |
| return { |
| status: "error", |
| message: "Endpoint or method not supported" |
| }; |
| } |
| |
| |
| const createPinBtn = document.getElementById("createPinBtn"); |
| const listPinsBtn = document.getElementById("listPinsBtn"); |
| const responseOutput = document.getElementById("responseOutput"); |
| |
| |
| createPinBtn.addEventListener("click", () => { |
| const response = handleRequest("/api/create", "POST"); |
| responseOutput.textContent = JSON.stringify(response, null, 2); |
| }); |
| |
| listPinsBtn.addEventListener("click", () => { |
| const response = handleRequest("/api/list", "GET"); |
| responseOutput.textContent = JSON.stringify(response, null, 2); |
| }); |
| </script> |
|
|
| </body> |
| </html> |
