How coding-camp-2025/web-notes-app works
This repository contains two stages of a web notes app. Project 2 is the API-backed workflow: users submit validated notes or act on rendered note cards; the controller performs asynchronous REST requests, refreshes the list, and manages a loading indicator. Project 1 is the earlier local-data version, persisting notes in localStorage. The README documents reusable responsive components and validation; sampled source supports the core flows, but project 2’s HTML and styling were not sampled, so their detailed DOM wiring is not mapped.
Main entry points: main.js App controller · index.js Local app entry · note-items.js Note card · note-list.js Note list
Components 16
API-backed app
- App controller
notes-app project 2/src/js/main.js - Form validation
notes-app project 2/src/js/main.js - Loading indicator
notes-app project 2/src/js/main.js
Reusable interface
- Note list
notes-app project 2/src/js/component/note-list.js - Note card
notes-app project 2/src/js/component/note-items.js - App header
notes-app project 2/src/js/component/app-header.js - App footer
notes-app project 2/src/js/component/app-footer.js - Responsive styling
notes-app project 2/src/css/style.css
Local app
- Local app entry
notes-app project 1/src/js/index.js - Sample notes
notes-app project 1/src/js/data/sample-notes.js - Browser localStorage
- Local note list
notes-app project 1/src/js/component/note-list.js - Local note card
notes-app project 1/src/js/component/note-items.js
External services
- Notes REST API
- Notes database
Other components
- User
Connections 17
- User → App controller: submits or toggles
- App controller → Form validation: validates input
- App controller → Loading indicator: shows and hides
- App controller → Notes REST API: fetches and mutates
- Notes REST API → Notes database: reads and writes
- App controller → Note list: sets notes
- Note list → Note card: renders cards
- Note card → App controller: invokes note actions
- User → Note card: acts on card
- User → Local app entry: uses local app
- Local app entry → Sample notes: loads and adds
- Local app entry → Browser localStorage: reads and writes
- Local app entry → Local note list: supplies notes
- Local note list → Local note card: renders cards
- User → App header: views interface
- User → App footer: views interface
- User → Responsive styling: uses styled layout