\n Alphabets: {JSON.stringify(response.alphabets)}\n

\n ),\n 'Numbers': () => (\n

\n Numbers: {JSON.stringify(response.numbers)}\n

\n ),\n 'Highest alphabet': () => (\n

\n Highest Alphabet: {JSON.stringify(response.highest_alphabet)}\n

\n )\n };\n\n return (\n

\n {selectedOptions.map(option => renderOptions[option]())}\n

\n );\n };\n\n return (\n

setInputJson(e.target.value)}\n          placeholder='Enter JSON (e.g., { \"data\": [\"M\",\"1\",\"334\",\"4\",\"B\"] })'\n          rows={4}\n        />\n        <button type=\"submit\">Submit</button>\n      </form>\n\n      {error && <div className=\"error-message\">{error}</div>}\n\n      {response && (\n        <div className=\"dropdown-container\">\n          <label>Select Response Options:</label>\n          <div className=\"checkbox-group\">\n            {['Alphabets', 'Numbers', 'Highest alphabet'].map(option => (\n              <label key={option} className=\"checkbox-label\">\n                <input\n                  type=\"checkbox\"\n                  checked={selectedOptions.includes(option)}\n                  onChange={() => {\n                    setSelectedOptions(prev => \n                      prev.includes(option) \n                        ? prev.filter(o => o !== option)\n                        : [...prev, option]\n                    );\n                  }}\n                />\n                {option}\n              </label>\n            ))}\n          </div>\n        </div>\n      )}\n\n      {renderResponse()}\n\n      <a \n        href={import.meta.url.replace(\"esm.town\", \"val.town\")} \n        target=\"_top\" \n        className=\"source-link\"\n      >\n        View Source\n      </a>\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<BFHLApp />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  const url = new URL(request.url);\n\n  // GET method handler\n  if (request.method === 'GET' && url.pathname === '/bfhl') {\n    return new Response(JSON.stringify({\n      operation_code: 1\n    }), {\n      headers: { 'Content-Type': 'application/json' },\n      status: 200\n    });\n  }\n\n  // POST method handler\n  if (request.method === 'POST' && url.pathname === '/bfhl') {\n    try {\n      const { data } = await request.json();\n\n      // Validate input\n      if (!Array.isArray(data)) {\n        return new Response(JSON.stringify({\n          is_success: false,\n          error: 'Invalid input format'\n        }), { \n          status: 400,\n          headers: { 'Content-Type': 'application/json' } \n        });\n      }\n\n      // Separate numbers and alphabets\n      const numbers = data.filter(item => !isNaN(Number(item)));\n      const alphabets = data.filter(item => \n        typeof item === 'string' && /^[a-zA-Z]$/.test(item)\n      );\n\n      // Find highest alphabet (case-insensitive)\n      const highestAlphabet = alphabets.length > 0 \n        ? [alphabets.reduce((a, b) => \n            a.toLowerCase() > b.toLowerCase() ? a : b\n          )]\n        : [];\n\n      return new Response(JSON.stringify({\n        is_success: true,\n        user_id: \"siddharth_jain_17092002\",\n        email: \"siddharth.jain@technovert.com\",\n        roll_number: \"SJ2002\",\n        numbers: numbers,\n        alphabets: alphabets,\n        highest_alphabet: highestAlphabet\n      }), {\n        headers: { 'Content-Type': 'application/json' }\n      });\n    } catch (error) {\n      return new Response(JSON.stringify({\n        is_success: false,\n        error: 'Invalid request body'\n      }), { \n        status: 400,\n        headers: { 'Content-Type': 'application/json' } \n      });\n    }\n  }\n\n  // Default response for unsupported routes\n  return new Response(`\n    <html>\n      <head>\n        <title>SJ2002</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n        <script src=\"https://esm.town/v/std/catch\"></script>\n        <style>${css}</style>\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n      </body>\n    </html>\n  `, {\n    headers: { 'Content-Type': 'text/html' }\n  });\n}\n\nconst css = `\nbody {\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n  margin: 0;\n  padding: 20px;\n  background-color: #f4f4f4;\n  display: flex;\n  justify-content: center;\n}\n\n.bfhl-container {\n  width: 100%;\n  max-width: 500px;\n  background-color: white;\n  padding: 20px;\n  border-radius: 8px;\n  box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\n.input-form {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-bottom: 20px;\n}\n\ntextarea {\n  width: 100%;\n  padding: 10px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  resize: vertical;\n  min-height: 100px;\n}\n\nbutton {\n  padding: 10px;\n  background-color: #007bff;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n}\n\n.error-message {\n  color: red;\n  margin-bottom: 15px;\n}\n\n.dropdown-container {\n  margin-bottom: 20px;\n}\n\n.checkbox-group {\n  display: flex;\n  gap: 15px;\n}\n\n.checkbox-label {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n\n.response-container {\n  background-color: #f9f9f9;\n  padding: 15px;\n  border-radius: 4px;\n}\n\n.source-link {\n  display: block;\n  margin-top: 20px;\n  text-align: center;\n  color: #666;\n  text-decoration: none;\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/Adi56/thankfulSilverWhale/code/main.tsx","extension","actionData","errors"]
</article></body></html>