+

+

+

CRUD API Demo

+

+

+

+

+

+

+

+

+

+

+

+

+

Built with vanilla JavaScript

+

+ buildHtml

+ baseUrl https://crud.scroll.pub

+ metaTags

+ editButton /edit.html

+ title CRUD API Demo

+ style.css

+ body.html

+ script.js

+ {

+ "id": "msg_01SyZgSjHf18J8QUWJa1Mo5W",

+ "type": "message",

+ "role": "assistant",

+ "model": "claude-3-5-sonnet-20241022",

+ "content": [

+ {

+ "type": "text",

+ "text": "Let me create a sleek CRUD API demo website.\n\n---domain---\ncrud.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://crud.scroll.pub\nmetaTags\neditButton /edit.html\ntitle CRUD API Demo\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n

\n \n

\n\n

\n

\n

\n

Add/Edit Item

\n

\n \n

\n Name\n \n

\n

\n Description\n \n

\n Save Item\n

\n

\n\n

\n

Items List

\n

\n

\n

\n

\n\n\n\n---style.css---\n:root {\n --primary-color: #2a6bf2;\n --secondary-color: #1a1b4b;\n --background-color: #f8f9fa;\n --text-color: #333;\n --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n --transition: all 0.3s ease;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background: var(--background-color);\n}\n\nheader {\n background: var(--secondary-color);\n color: white;\n padding: 1rem;\n box-shadow: var(--shadow);\n}\n\nh1 {\n font-size: 1.8rem;\n font-weight: 700;\n text-align: center;\n}\n\n.crud-container {\n max-width: 1200px;\n margin: 2rem auto;\n padding: 0 1rem;\n display: grid;\n grid-template-columns: 1fr;\n gap: 2rem;\n}\n\n@media (min-width: 768px) {\n .crud-container {\n grid-template-columns: 1fr 2fr;\n }\n}\n\n.form-container {\n background: white;\n padding: 2rem;\n border-radius: 8px;\n box-shadow: var(--shadow);\n}\n\n.input-group {\n margin-bottom: 1.5rem;\n}\n\nlabel {\n display: block;\n margin-bottom: 0.5rem;\n font-weight: 500;\n}\n\ninput, textarea {\n width: 100%;\n padding: 0.8rem;\n border: 2px solid #ddd;\n border-radius: 4px;\n transition: var(--transition);\n}\n\ninput:focus, textarea:focus {\n border-color: var(--primary-color);\n outline: none;\n}\n\n.btn-primary {\n background: var(--primary-color);\n color: white;\n padding: 0.8rem 1.5rem;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n transition: var(--transition);\n}\n\n.btn-primary:hover {\n background: var(--secondary-color);\n transform: translateY(-2px);\n}\n\n.items-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n gap: 1.5rem;\n}\n\n.item-card {\n background: white;\n padding: 1.5rem;\n border-radius: 8px;\n box-shadow: var(--shadow);\n transition: var(--transition);\n}\n\n.item-card:hover {\n transform: translateY(-5px);\n}\n\n.item-actions {\n display: flex;\n gap: 1rem;\n margin-top: 1rem;\n}\n\n.btn-edit, .btn-delete {\n padding: 0.5rem 1rem;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n transition: var(--transition);\n}\n\n.btn-edit {\n background: #ffd700;\n}\n\n.btn-delete {\n background: #ff4444;\n color: white;\n}\n\nfooter {\n text-align: center;\n padding: 2rem;\n background: var(--secondary-color);\n color: white;\n margin-top: 2rem;\n}\n\n---script.js---\nclass CrudAPI {\n constructor() {\n this.items = JSON.parse(localStorage.getItem('items')) || [];\n this.currentId = this.items.length > 0 ? Math.max(...this.items.map(item => item.id)) + 1 : 1;\n this.form = document.getElementById('itemForm');\n this.itemsList = document.getElementById('itemsList');\n this.init();\n }\n\n init() {\n this.form.addEventListener('submit', (e) => this.handleSubmit(e));\n this.renderItems();\n }\n\n handleSubmit(e) {\n e.preventDefault();\n const itemId = document.getElementById('itemId').value;\n const itemName = document.getElementById('itemName').value;\n const itemDescription = document.getElementById('itemDescription').value;\n\n if (itemId) {\n this.updateItem(parseInt(itemId), itemName, itemDescription);\n } else {\n this.createItem(itemName, itemDescription);\n }\n\n this.form.reset();\n document.getElementById('itemId').value = '';\n }\n\n createItem(name, description) {\n const item = {\n id: this.currentId++,\n name,\n description,\n createdAt: new Date().toISOString()\n };\n this.items.push(item);\n this.saveToLocalStorage();\n this.renderItems();\n }\n\n updateItem(id, name, description) {\n const index = this.items.findIndex(item => item.id === id);\n if (index !== -1) {\n this.items[index] = { ...this.items[index], name, description };\n this.saveToLocalStorage();\n this.renderItems();\n }\n }\n\n deleteItem(id) {\n this.items = this.items.filter(item => item.id !== id);\n this.saveToLocalStorage();\n this.renderItems();\n }\n\n editItem(id) {\n const item = this.items.find(item => item.id === id);\n if (item) {\n document.getElementById('itemId').value = item.id;\n document.getElementById('itemName').value = item.name;\n document.getElementById('itemDescription').value = item.description;\n }\n }\n\n renderItems() {\n this.itemsList.innerHTML = this.items\n .map(item => `\n \n `)\n .join('');\n }\n\n saveToLocalStorage() {\n localStorage.setItem('items', JSON.stringify(this.items));\n }\n\n escapeHtml(unsafe) {\n return unsafe\n .replace(/&/g, \"&\")\n .replace(//g, \">\")\n .replace(/\"/g, \""\")\n .replace(/'/g, \"'\");\n }\n}\n\nconst crudApi = new CrudAPI();\n\n---end---\n\nThis creates a beautiful, responsive CRUD application with local storage persistence. The design features a modern, clean interface with smooth animations and transitions. It includes:\n\n- Form for creating/editing items\n- Grid layout for displaying items\n- Edit and delete functionality\n- Data persistence using localStorage\n- Security measures (HTML escaping)\n- Responsive design\n- Smooth animations\n- Professional color scheme\n- Accessibility features\n- Clean, semantic HTML\n\nUsers can create, read, update, and delete items with a smooth, professional interface that works great on both desktop and mobile devices."

+ }

+ ],

+ "stop_reason": "end_turn",

+ "stop_sequence": null,

+ "usage": {

+ "input_tokens": 278,

+ "cache_creation_input_tokens": 0,

+ "cache_read_input_tokens": 0,

+ "output_tokens": 2326

+ }

+ }

+ # crud.scroll.pub

+ Website generated by Claude from prompt: I want a website with a crud api

+ class CrudAPI {

+ constructor() {

+ this.items = JSON.parse(localStorage.getItem('items')) || [];

+ this.currentId = this.items.length > 0 ? Math.max(...this.items.map(item => item.id)) + 1 : 1;

+ this.form = document.getElementById('itemForm');

+ this.itemsList = document.getElementById('itemsList');

+ this.init();

+ }

+

+ init() {

+ this.form.addEventListener('submit', (e) => this.handleSubmit(e));

+ this.renderItems();

+ }

+

+ handleSubmit(e) {

+ e.preventDefault();

+ const itemId = document.getElementById('itemId').value;

+ const itemName = document.getElementById('itemName').value;

+ const itemDescription = document.getElementById('itemDescription').value;

+

+ if (itemId) {

+ this.updateItem(parseInt(itemId), itemName, itemDescription);

+ } else {

+ this.createItem(itemName, itemDescription);

+ }

+

+ this.form.reset();

+ document.getElementById('itemId').value = '';

+ }

+

+ createItem(name, description) {

+ const item = {

+ id: this.currentId++,

+ name,

+ description,

+ createdAt: new Date().toISOString()

+ };

+ this.items.push(item);

+ this.saveToLocalStorage();

+ this.renderItems();

+ }

+

+ updateItem(id, name, description) {

+ const index = this.items.findIndex(item => item.id === id);

+ if (index !== -1) {

+ this.items[index] = { ...this.items[index], name, description };

+ this.saveToLocalStorage();

+ this.renderItems();

+ }

+ }

+

+ deleteItem(id) {

+ this.items = this.items.filter(item => item.id !== id);

+ this.saveToLocalStorage();

+ this.renderItems();

+ }

+

+ editItem(id) {

+ const item = this.items.find(item => item.id === id);

+ if (item) {

+ document.getElementById('itemId').value = item.id;

+ document.getElementById('itemName').value = item.name;

+ document.getElementById('itemDescription').value = item.description;

+ }

+ }

+

+ renderItems() {

+ this.itemsList.innerHTML = this.items

+ .map(item => `

+

+ `)

+ .join('');

+ }

+

+ saveToLocalStorage() {

+ localStorage.setItem('items', JSON.stringify(this.items));

+ }

+

+ escapeHtml(unsafe) {

+ return unsafe

+ .replace(/&/g, "&")

+ .replace(/