IMPORTANT: BOOKMARK THIS PAGE NOW!
STEP 3. AI App Builder Course
Lesson 1: Unlocking the Power of AI: Building Applications with ChatGPT π
Next Module
Lesson 2: Creating a Simple Rebrandable Web Application with ChatGPT
Next Module
Lesson 3: Creating a Dynamic Network Marketing Calculator for Your Team π‘
Next Module
Lesson 4: Taking Your Application Development to the Next Level π
Next Module
Lesson 5: Creating an Engaging Membership System from Scratch π
Next Module
Lesson 6: Building a Simple and Effective Training Hub with Flat File Storage π
Next Module
Lesson 7: Create AI-Powered Apps That Make You Money πΈ
π Bonus: Copy the Prompt Used in This Lesson
You're going to create a fully functional HTML and JavaScript app that allows a user to generate an AI-written email based on a few form inputs. This app will connect to the OpenAI GPT-3.5 API using a user-provided API key.
Hereβs what I want:
1. The app must be built using:
- Plain HTML
- Bootstrap 5 for layout/styling
- Vanilla JavaScript (no external JS frameworks)
2. On the page, include a Bootstrap form with the following inputs:
- A short textarea for "Product Description"
- A dropdown for "Email Length" with options: "Short", "Medium", "Detailed"
- A dropdown for "Tone" with options: "Curiosity-driven", "Friendly", "Hype", "Vague but persuasive"
- A text field for "Personalization Tag" (e.g. %FIRSTNAME%)
- A text field for "Target URL"
- A text field for "Your Name"
- A text field for "Contact Info" (optional)
- A checkbox: "Include P.S.?"
- A checkbox: "Include P.P.S.?"
- A checkbox: "Include subject line suggestions?"
3. Also include a text field at the top labeled "Your OpenAI API Key" so the user can paste their own API key.
4. Add a big Bootstrap "Generate Email" button.
5. When the button is clicked, the app should:
- Collect all form values
- Build a system prompt for GPT-3.5 that includes:
- An instruction to write a marketing email using the tone, personalization tag, and email length
- Instructions to include a call-to-action using the provided target URL
- If the user selected P.S. or P.P.S., include those too
- If subject lines were requested, generate 3 subject line suggestions
- Use fetch() to call the OpenAI completion endpoint and display the results on the page in a styled Bootstrap container
- Show the output email in one area and the subject lines (if requested) in another
- Add a "Copy to Clipboard" button below each output block
6. The app should work entirely client-side. No PHP. No server backend.
Optional: Suggest to the user to save the HTML file and reuse it later.
This app will be used in a teaching lesson showing how network marketers can build and customize their own email-generating apps using ChatGPT + Bootstrap + JavaScript.
β
Prompt copied to clipboard!
Training Complete β Youβre Ready!

