Everything you need on one page: the AI prompt to start from, what each CRUD action looks like in code, and fixes for the errors you'll actually hit.
Copy this, fill in the bracketed parts, and paste it to your AI tool.
I'm a beginner learning web development. Create a simple CRUD
(Create, Read, Update, Delete) web app for a [THEME] list, using
only plain HTML, CSS, and JavaScript: no server, no PHP, no
database. Use the browser's localStorage to save the data so it
persists after refreshing the page. Each item should have these
fields: [FIELD 1], [FIELD 2], [FIELD 3]. Put everything in a
single HTML file with a form to add items, a list showing all
items with Edit and Delete buttons, and clear comments explaining
each part. Keep it beginner-friendly.<script> section instead and ask AI to complete one TODO at a time: you'll understand the result much better than asking for everything at once.
| Action | What it does | localStorage code pattern |
|---|---|---|
| Create | Add a new record to the list | list.push(newItem); saveItems(list); |
| Read | Load and display the list | JSON.parse(localStorage.getItem(key)) |
| Update | Find a record by id, change its fields | list.map(i => i.id === id ? updated : i) |
| Delete | Remove a record by id | list.filter(i => i.id !== id) |
| What you see | Likely cause | Try this |
|---|---|---|
| Page looks blank or broken | A missing or misplaced <script> tag, or a typo |
Open the console (F12 → Console) and read the red error line: paste it to your AI and ask it to fix that specific error |
| Data disappears after refresh | saveItems() isn't being called after Create/Update/Delete |
Check that every action that changes the list also calls localStorage.setItem(...) right after |
| Edit or Delete does nothing | The button's id isn't matching the record's id correctly | Console.log the id you're comparing on both sides to see if they actually match |
| Clicking Add does nothing | The form's submit event isn't calling e.preventDefault(), or the button isn't inside the form |
Confirm the button is type="submit" inside a <form>, and the JS listens for "submit" |
Press F12 (or right-click → Inspect) and open the Console tab. Errors appear in red with a file name and line number. The demo page also logs a line every time you Create, Update, or Delete a record: open it there first to see what a "healthy" console looks like.