Meal API: Elysia backend serving the menu API and a single-file frontend

2026-09-16 20:14:10 +08:00
commit 3899025fa3
6 changed files with 1100 additions and 0 deletions
@@ -0,0 +1,216 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Food Menu</title>
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 24px;
+      background: #f3f4f6;
+      color: #111827;
+      font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+    }
+
+    .card {
+      width: 100%;
+      max-width: 560px;
+      background: #ffffff;
+      border-radius: 12px;
+      padding: 28px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+    }
+
+    h1 {
+      margin: 0 0 20px;
+      font-size: 24px;
+    }
+
+    .controls {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-bottom: 18px;
+    }
+
+    #search-input {
+      flex: 1 1 140px;
+      padding: 10px 12px;
+      font-size: 15px;
+      border: 1px solid #d1d5db;
+      border-radius: 8px;
+    }
+
+    #search-input:focus {
+      outline: 2px solid #2563eb;
+      outline-offset: -1px;
+      border-color: #2563eb;
+    }
+
+    button {
+      padding: 10px 16px;
+      font-size: 15px;
+      font-weight: 600;
+      color: #ffffff;
+      background: #2563eb;
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+    }
+
+    button:hover {
+      background: #1d4ed8;
+    }
+
+    button.secondary {
+      color: #1f2937;
+      background: #e5e7eb;
+    }
+
+    button.secondary:hover {
+      background: #d1d5db;
+    }
+
+    .message {
+      margin: 0 0 16px;
+      padding: 10px 12px;
+      border-radius: 8px;
+      background: #fef3c7;
+      color: #92400e;
+      font-size: 14px;
+    }
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+
+    th,
+    td {
+      padding: 10px 12px;
+      text-align: left;
+      border-bottom: 1px solid #e5e7eb;
+    }
+
+    th {
+      font-size: 13px;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+      color: #6b7280;
+    }
+
+    tbody tr:last-child td {
+      border-bottom: none;
+    }
+  </style>
+</head>
+<body>
+  <main class="card">
+    <h1>Food Menu</h1>
+
+    <form id="search-form" class="controls">
+      <input
+        type="number"
+        id="search-input"
+        placeholder="Enter ID #"
+        min="1"
+        step="1"
+        autocomplete="off"
+      >
+      <button type="submit">Search</button>
+      <button type="button" id="load-btn" class="secondary">Load Menu</button>
+    </form>
+
+    <p id="message" class="message" hidden></p>
+
+    <table id="menu-table" hidden>
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Food</th>
+          <th>Price</th>
+        </tr>
+      </thead>
+      <tbody id="menu-body"></tbody>
+    </table>
+  </main>
+
+  <script>
+    const form = document.getElementById('search-form');
+    const input = document.getElementById('search-input');
+    const loadBtn = document.getElementById('load-btn');
+    const message = document.getElementById('message');
+    const table = document.getElementById('menu-table');
+    const tbody = document.getElementById('menu-body');
+
+    function showMessage(text) {
+      message.textContent = text;
+      message.hidden = false;
+      table.hidden = true;
+    }
+
+    function showItems(items) {
+      tbody.innerHTML = '';
+
+      for (const item of items) {
+        const row = document.createElement('tr');
+
+        const id = document.createElement('td');
+        id.textContent = item.id;
+
+        const food = document.createElement('td');
+        food.textContent = item.food;
+
+        const price = document.createElement('td');
+        price.textContent = `₱${item.price}`;
+
+        row.append(id, food, price);
+        tbody.append(row);
+      }
+
+      message.hidden = true;
+      table.hidden = false;
+    }
+
+    async function fetchMenu(url) {
+      try {
+        const res = await fetch(url);
+        const data = await res.json();
+
+        if (!res.ok) {
+          return showMessage(data.error || 'Something went wrong.');
+        }
+
+        showItems(Array.isArray(data) ? data : [data]);
+      } catch (err) {
+        showMessage('Could not reach the API. Is the server running?');
+      }
+    }
+
+    form.addEventListener('submit', (event) => {
+      event.preventDefault();
+      const id = input.value.trim();
+
+      if (id === '') {
+        return showMessage('Please enter an ID number first.');
+      }
+
+      fetchMenu(`/api/menu/${encodeURIComponent(id)}`);
+    });
+
+    loadBtn.addEventListener('click', () => {
+      input.value = '';
+      fetchMenu('/api/menu');
+    });
+  </script>
+</body>
+</html>