Guided Build: Functionality & Data

From Static to Dynamic

In Session 1, you built the core screen of your project. It looks like something — but it doesn't DO much yet. Today, you're making it functional. By the end of this session, users will be able to interact with your project and their actions will be saved.

This is the hardest session. Adding real functionality is where most bugs happen. That's normal. You have your Bug Report Template (PDF) and your AI troubleshooting skills from Lesson 5.3. You'll use both today.

Track 1: Personal Productivity Tool — Session 2

Only follow this step if you're on Track 1. If you're on Track 2 or 3, click "Next" to find your track.

What you're adding today: User input (add new items), data persistence (saves between sessions), and progress calculation.

Step 1: Add the ability to create new items. Right now your list shows hardcoded items. Let's make users able to add their own:

"Add an 'Add Habit' feature to my app. Include: (1) an input field where the user types a habit name, (2) an 'Add' button, (3) when clicked, the new habit appears in the list with a checkbox, (4) the input field clears after adding. Here's my current code: [paste your index.html]. Add this feature without breaking the existing layout."

Expected result: Your app should now let you type a habit name, click Add, and see it appear in the list. The existing habits should still be there.

Step 2: Make checkboxes actually work. Clicking a checkbox should mark a habit as complete for today and update the progress display:

"Make the checkboxes functional. When a user checks a habit: (1) it should visually change (strikethrough text, green check, or dimmed appearance), (2) the progress counter at the top should update (e.g., '3/5 habits completed today'), (3) unchecking should reverse both changes. Here's my current code: [paste code]."

Step 3: Add data persistence with localStorage. Right now, if you close the browser, all your data disappears. Let's fix that:

"Add localStorage to my habit tracker so data persists between browser sessions. Save: (1) the list of habits (names and whether each is checked today), (2) the date of the last visit (so we can reset checkmarks each new day), (3) streak counts (how many consecutive days each habit was completed). Load saved data when the page opens. If it's a new day, reset today's checkmarks but keep the habit list and streaks. Here's my current code: [paste code]."

Expected result: Close your browser tab. Reopen the file. Your habits should still be there. Check a few habits, close, reopen — checked status should persist. Open it the next day and checkmarks should reset but streaks should be tracked.

Step 4: Add a delete option. Users need to be able to remove habits they no longer want to track:

"Add a delete button (small '×' icon) to each habit. When clicked, show a confirmation ('Delete this habit?') and if confirmed, remove it from the list and from localStorage. Here's my current code: [paste code]."

Track 2: Creative Portfolio or Community Site — Session 2

Only follow this step if you're on Track 2. If you're on a different track, click "Next" to continue.

What you're adding today: Real content pages, interactive features (filtering, search, or recommendations), and polish.

Step 1: Build out your primary content page. Your homepage has a preview grid. Now build the full page that it links to (Gallery, Recommendations, Opportunities, etc.):

"Build the full [Gallery / Recommendations / Opportunities] page for my [project type] site. Include: (1) a grid of [items] with images (use colored placeholder divs for now), titles, and short descriptions, (2) category tags on each item, (3) a filter bar at the top where users can click category buttons to filter the displayed items, (4) smooth animations when items filter in/out. Use the same header/footer as my homepage. Here's my homepage code for reference: [paste]. I have [8–12] items to display. Here are their titles, descriptions, and categories: [list them]."

Expected result: A content page with your items displayed in a grid, category tags visible, and filter buttons that actually work — clicking "Fantasy" shows only fantasy books, etc.

Step 2: Build your About/Contact page.

"Create an About page for my site. Include: (1) a brief bio or site description (2–3 paragraphs), (2) the story of why I made this site, (3) a simple contact form with Name, Email, and Message fields (it doesn't need to actually send emails — just show a 'Message sent!' confirmation). Same header/footer. Here's my info: [write 2–3 sentences about yourself/your project]."

Step 3: Add an interactive feature. A portfolio or community site becomes memorable when it has something interactive. Choose ONE: a search bar, a recommendation quiz ("Answer 3 questions and I'll recommend..."), a dark/light mode toggle, or sort options (newest, oldest, highest rated).

"Add a [search bar / recommendation quiz / dark mode toggle / sort dropdown] to my [content page]. Here's my current code: [paste]. Make sure it integrates smoothly with the existing filtering system."

Track 3: Data Explorer Dashboard — Session 2

Only follow this step if you're on Track 3. If you're on a different track, click "Next" to continue.

What you're adding today: User input for new data, interactive filters, and dynamic chart updates.

Step 1: Add data entry. Users need to be able to add new data points to your dashboard:

"Add a data entry form to my dashboard. Include fields for: [list your data fields, e.g., Date, Category, Amount, Description]. When the user clicks 'Add Entry,' the new data should: (1) appear in the data table, (2) update both charts automatically, (3) recalculate the summary metrics, (4) save to localStorage so it persists. Here's my current code: [paste]."

Expected result: A form appears on your dashboard. When you add an entry, the table updates, the charts redraw with the new data, and the summary numbers change. Close and reopen — your added data is still there.

Step 2: Add filters.

"Add filter controls to my dashboard: (1) a date range selector (This Week, This Month, This Year, All Time), (2) a category dropdown to filter by [your categories]. When a filter is selected, update the charts, table, and summary metrics to show only matching data. Here's my current code: [paste]."

Step 3: Add a third visualization. A good dashboard tells a story with multiple views. Add one more chart:

"Add a [line chart showing trends over time / doughnut chart showing proportions / horizontal bar chart comparing categories] to my dashboard. It should respond to the same filters as the other charts. Place it in a logical position in the layout. Here's my current code: [paste]."

Session 2 Troubleshooting

This session has more things that can break. Here are fixes for the most common problems:

Data isn't saving between sessions:

"My localStorage implementation isn't working. Data disappears when I close the browser. Here's my save/load code: [paste the localStorage sections]. Debug this and fix it. Show me a console.log test I can run to verify it's working."

Charts don't update when data changes: Chart.js charts need to be explicitly updated. If you add data and the chart doesn't change:

"My Chart.js chart doesn't update when I add new data. I'm adding data to the array but the chart stays the same. Show me how to properly update Chart.js charts after data changes. Here's my current chart code: [paste]."

New features broke existing ones: This happens when new code conflicts with old code. Don't panic:

"After adding [new feature], my [existing feature] stopped working. It was working before. Here's my full code: [paste]. Find what the new code broke in the old feature and fix it without removing the new feature."

KEY CONCEPTS

KEY CONCEPTS — LESSON 5.4

1. Session 2 transforms your static screen into a working project: user input, data persistence, and dynamic updates.

2. localStorage saves data between browser sessions so users don't lose their work. Always test that it actually persists by closing and reopening.

3. This session has the most bugs — that's expected. Use the bug report pattern: what you expected, what happened, what you tried, relevant code.

4. Always save a backup before each session. If something breaks badly, you can revert instead of starting over.

5. By the end of this session, your project should handle real user input and save data between visits.