Task 1 (Connect functions) Task 2 (Scenario Verification) Task 3 (Error Verification) Mission 1 (Quality Check) Mission 2 (E2E Verification) 📊 View Summary ← Classroom
Day 7 Task 01 Function connection

Task 01. Feature Integration

Map JavaScript events to static HTML screen components and execute data storage loading and integration.

Task 01 Task 01 Function connection practice guide

📥 Practice Input

  • • day7_meeting_notes.md (meeting minutes)

💾 Practice output (Output)

  • • day7_connected_feature.html

1. Story and practice background

A junior planner completed a prototype of the login screen and reservation list screen. However, when the representative pressed the login button during the meeting, nothing happened and the screen remained static. “The screen is pretty, but when I click on it, it doesn’t proceed to the next step. When will the actual reservation data be saved and the member information recorded in the session be connected?” After hearing the feedback, I realized that linking screen configuration and data control logic was urgently needed.

In this exercise, you will learn how to use Codex AI to attach event listeners (Click, Submit Event) to the static login form and reservation registration card components, and to connect data storage (Local Storage, etc.) and virtual API function calls organically so that the screen performs click response and data loading operations normally.

2. Learning objectives

  • You can properly connect HTML elements and JavaScript events (Event Listeners).
  • Data entered by the user in the input form can be collected and loaded into a virtual API or storage.
  • By referring to AI's suggestions, you can self-complement any missing or missing exception event processing steps during function connection.

🛠️Practical guide to follow along

  1. Create file for practice: Click the download button below day7_meeting_notes.md file automation/ Save it within the folder.
  2. Codex Function Assembly Delegation: Instruct logic integration by passing the **Codex request prompt** below into the Codex Client prompt input window.
  3. Check data loading: Upon completion of registration, check whether the warning message in the browser is displayed properly and verify that the input values are correctly synchronized in the Application -> LocalStorage tab of the developer tool.

Download practice materials

Codex request prompt

Task 01 Prompt
We are trying to connect a JavaScript feature to the sign-up screen code in day7_unconnected_feature.html provided. Please write an integration script that 1) checks the validity of input values ​​when the sign-up complete button is clicked, 2) saves the information in the browser's local storage, and 3) moves to the dashboard screen when successful. Please also suggest missing cancellation button response or duplicate subscription check logic.

4. Example results

Codex analyzes the meeting transcript and outputs normalized data entity mappings and a Mermaid ERD script as shown below.

file namerolemain componentsstorage type
day7_connected_feature.htmlHandling and verification of registration form submissionsignup-form, submit-btnLocalStorage (JSON format)

5. AI utilization points

  • Action flow guide: The state change steps that occur in the browser background when a screen button is pressed are derived using a sequential algorithm.
  • Secondary branch detection: In addition to processing successful registration, we preemptively suggest a 'validity check' statement, such as when a user accidentally presses the submit button while leaving a blank field.