📋 Job Board

\n setNewJob({...newJob, title: e.target.value})}\n required \n />\n setNewJob({...newJob, company: e.target.value})}\n required \n />\n

setNewJob({...newJob, description: e.target.value})}\n            required \n          />\n          <input \n            type=\"text\" \n            placeholder=\"Location\" \n            value={newJob.location}\n            onChange={(e) => setNewJob({...newJob, location: e.target.value})}\n            required \n          />\n          <button type=\"submit\">Post Job 🚀</button>\n        </form>\n\n        <div className=\"job-list\">\n          {jobs.map((job, index) => (\n            <div key={index} className=\"job-item\">\n              <h3>{job.title}</h3>\n              <p>{job.company} - {job.location}</p>\n              <p>{job.description}</p>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      <div className=\"chat-room\">\n        <h2>💬 Chat Room</h2>\n        <div className=\"message-list\">\n          {messages.map((msg, index) => (\n            <div key={index} className=\"message\">\n              {msg.text}\n            </div>\n          ))}\n        </div>\n        <form onSubmit={sendMessage} className=\"message-form\">\n          <input \n            type=\"text\" \n            placeholder=\"Type a message\" \n            value={newMessage}\n            onChange={(e) => setNewMessage(e.target.value)}\n            required \n          />\n          <button type=\"submit\">Send</button>\n        </form>\n      </div>\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(<JobBoard />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n  const KEY = \"jobBoardAndChatApp\";\n  const SCHEMA_VERSION = 1;\n\n  // Create tables for jobs and messages\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_jobs_${SCHEMA_VERSION} (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      title TEXT NOT NULL,\n      company TEXT NOT NULL,\n      description TEXT NOT NULL,\n      location TEXT NOT NULL,\n      created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n    )\n  `);\n\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_messages_${SCHEMA_VERSION} (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      text TEXT NOT NULL,\n      created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n    )\n  `);\n\n  // Handle different routes\n  if (request.method === 'GET') {\n    const url = new URL(request.url);\n    \n    if (url.pathname === '/jobs') {\n      const jobs = await sqlite.execute(`SELECT * FROM ${KEY}_jobs_${SCHEMA_VERSION} ORDER BY created_at DESC LIMIT 20`);\n      return new Response(JSON.stringify(jobs.rows), {\n        headers: { 'Content-Type': 'application/json' }\n      });\n    }\n\n    if (url.pathname === '/messages') {\n      const messages = await sqlite.execute(`SELECT * FROM ${KEY}_messages_${SCHEMA_VERSION} ORDER BY created_at DESC LIMIT 50`);\n      return new Response(JSON.stringify(messages.rows), {\n        headers: { 'Content-Type': 'application/json' }\n      });\n    }\n  }\n\n  if (request.method === 'POST') {\n    const body = await request.json();\n    \n    if (request.url.includes('/jobs')) {\n      await sqlite.execute(`\n        INSERT INTO ${KEY}_jobs_${SCHEMA_VERSION} \n        (title, company, description, location) \n        VALUES (?, ?, ?, ?)\n      `, [body.title, body.company, body.description, body.location]);\n      return new Response('Job posted', { status: 200 });\n    }\n\n    if (request.url.includes('/messages')) {\n      await sqlite.execute(`\n        INSERT INTO ${KEY}_messages_${SCHEMA_VERSION} \n        (text) \n        VALUES (?)\n      `, [body.text]);\n      return new Response('Message sent', { status: 200 });\n    }\n  }\n\n  return new Response(`\n    <html>\n      <head>\n        <title>Job Board & Chat</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n        <style>${css}</style>\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script src=\"https://esm.town/v/std/catch\"></script>\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  background-color: #f4f4f4;\n  margin: 0;\n  padding: 20px;\n  box-sizing: border-box;\n}\n\n.container {\n  display: flex;\n  gap: 20px;\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n.job-board, .chat-room {\n  background-color: white;\n  border-radius: 15px;\n  box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n  padding: 20px;\n  width: 50%;\n}\n\n.job-form, .message-form {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-bottom: 20px;\n}\n\n.job-form input, \n.job-form textarea, \n.message-form input {\n  padding: 10px;\n  border: 1px solid #ddd;\n  border-radius: 5px;\n}\n\n.job-form button, \n.message-form button {\n  background-color: #4CAF50;\n  color: white;\n  border: none;\n  padding: 10px;\n  border-radius: 5px;\n  cursor: pointer;\n}\n\n.job-list, .message-list {\n  max-height: 400px;\n  overflow-y: auto;\n}\n\n.job-item {\n  border-bottom: 1px solid #eee;\n  padding: 10px 0;\n}\n\n.message {\n  background-color: #f0f0f0;\n  margin: 5px 0;\n  padding: 10px;\n  border-radius: 5px;\n}\n\n.source-link {\n  display: block;\n  text-align: center;\n  margin-top: 20px;\n  color: #888;\n  text-decoration: none;\n}\n\n@media (max-width: 768px) {\n  .container {\n    flex-direction: column;\n  }\n  .job-board, .chat-room {\n    width: 100%;\n  }\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/Maranatha/jobBoardAndChatApp/code/main.tsx","extension","actionData","errors"]
</article></body></html>