codex-lv2-may-2025

🎯 Capstone Project - All Levels (Concatenated)

This file contains all levels of the capstone project concatenated into a single document. Each level is separated by clear delimiters to allow easy parsing back into individual files.

Structure:

Level 1: Project Planning & Setup

Goal: Plan your capstone project and set up the development environment.

📋 IMPORTANT: Complete Planning First!

Before you start coding, you must work through the planning document:

👉 Week 8 Capstone OUTLINE.md

Complete all sections of the planning document before proceeding with Level 1. This will help you understand the project requirements, technical specifications, and success criteria.

What You’ll Do

Create a new project folder and set up all the necessary files to get started.

Instructions

ℹ Third-Party File Info

Download helpers-full.js from the class repo: https://github.com/rmccrear/codex-lv2-may-2025/tree/main/guides/week5-event-driven-apps/other-dev-files

Place it in your project folder before linking it in index.html.

✅ Check

Open your project folder in VS Code and verify you can see all 4 files:

If any files are missing, create them before moving to Level 2.

Note: What about .gitignore and secret-variables.js? These will be covered in a later level. (Before we add secrets.)

Level 2: Basic HTML Structure & Live Server Test

What You’ll Do

Set up the basic HTML structure, link all necessary files, and test with live-server.

Instructions

Example Script Order in index.html

<!-- Example script order in index.html -->
<script src="helpers-full.js"></script>
<script src="secret-variables.js"></script>
<script src="app.js"></script>

Add a console log to your JavaScript app.js

in app.js

console.log("Hello from app.js");

💡 Code Hints

Need help with the HTML structure? Check out these snippets:

✅ Check

  1. In your terminal, run npx live-server in your project folder
  2. Your browser should automatically open to a local URL (like http://127.0.0.1:8080)
  3. You should see your project title as a large heading (H1)
  4. Open Chrome DevTools (F12) and check the Console tab
    • Look for any red error messages about missing files
    • Check that you can see a console log that says “Hello from app.js”
  5. If you see errors about missing files, double-check your file names and paths

Level 3: Git Setup

What You’ll Do

Initialize version control and push your project to GitHub.

Instructions

✅ Check

  1. Open your terminal/command prompt in your project folder
  2. Run git status - you should see “On branch main” and “nothing to commit, working tree clean”
  3. Run git log --oneline - you should see your commit message like “chore: initial project setup”
  4. IMPORTANT: Check that secret-variables.js is NOT on GitHub:
    • Go to your GitHub repository in a web browser
    • Look through the files - you should NOT see secret-variables.js listed
    • If you see it, check your .gitignore file includes secret-variables.js
  5. If you see any errors, make sure you’re in the correct folder and try the git commands again

🔍 Exploration: Commit Message Prefixes

You might be wondering why we use prefixes like chore: or feature: at the start of commit messages. These are part of a best practice convention called Conventional Commits that helps organize and categorize your changes:

Using these prefixes makes it easier to:

In this level, we use chore: because we’re doing initial project setup - creating the foundation without adding new features yet.

Level 4: Overall Project Check

What You’ll Do

Verify everything is working correctly with both live-server and git.

Instructions

Run comprehensive tests to ensure your project setup is complete and secure.

✅ Check

  1. Live Server Test:
    • Run npx live-server in your project folder
    • Open your browser and navigate to the live-server URL
    • You should see your project title as a large heading (H1)
    • Open Chrome DevTools (F12) and check the Console tab
    • Look for any red error messages - if there are none, you’re good to go!
  2. Git Status Check:
    • Run git status - you should see “On branch main” and “nothing to commit, working tree clean”
    • Run git log --oneline - you should see your commit message
  3. Security Check:
    • Go to your GitHub repository in a web browser
    • Look through the files - you should NOT see secret-variables.js listed
    • If you see it, check your .gitignore file includes secret-variables.js
    • If you do accidentally commit your secret-variables.js, GitHub will not allow you to upload it. Ask for help on how to remove it from your git history.

Check off these items in your README:

🎉 Congratulations!

You’ve set up your project foundation securely. Time to build the UI!

Level 5: UI & DOM Wiring - Basic Interface

Goal: Build the Bootstrap UI, connect it with helpers (or direct DOM methods), and test interactions. (Choose meaningful ids. Example only: <input id="userPrompt">.)

What You’ll Do

Add the basic interface elements to your HTML.

Instructions

In the HTML, add the interface:

💡 Code Hints

Need help with the HTML structure? Check out these snippets:

✅ Check

Navigate to your file in your browser (remember, you’re using live-server) and verify you can see:

Level 6: Bootstrap Styling

What You’ll Do

Add Bootstrap classes to style your input and button.

Instructions

Add Bootstrap classes to style the input and button.

💡 Code Hints

Stuck on styling? Bootstrap has special classes for form elements. Check out the Bootstrap Classes section in SNIPPETS.md for inspiration.

📚 Connect to Previous Lessons

Working with Bootstrap classes? Check out Week 4, Lesson 2: Bootstrap Framework for a complete guide to Bootstrap utilities and components. Focus on the button and form styling sections.

✅ Check

  1. Open your webpage in a browser
  2. You should see your input and button with Bootstrap styling (they should look more polished)
  3. The input should have a clean border and the button should have Bootstrap button styling
  4. Open Chrome DevTools (F12) and check the Console tab for any errors
  5. If the styling doesn’t look right, check that Bootstrap CSS is properly linked in your HTML

Level 7: Card Structure

What You’ll Do

Convert the output area into a proper Bootstrap card.

Instructions

Convert the output <div> into a Bootstrap card with proper structure (card container, body, title, and text).

💡 Code Hints

Building Bootstrap cards? Cards need specific container and content classes to look right. Check out the Bootstrap Classes section in SNIPPETS.md for card structure examples.

✅ Check

  1. Open your webpage in a browser
  2. You should see a Bootstrap card where your output area used to be
  3. The card should have a clean border, padding, and professional appearance
  4. Open Chrome DevTools (F12) and check the Console tab for any errors
  5. If the card doesn’t appear styled, check that you’re using the correct Bootstrap card classes

Level 8: IDs and Testing

What You’ll Do

Add meaningful IDs to all elements and test that they can be accessed.

Instructions

💡 Code Hints

Need help with IDs? Check out these snippets:

✅ Check

  1. Open your webpage in a browser
  2. Open Chrome DevTools (F12) and go to the Console tab
  3. Type document.getElementById("your-input-id") and press Enter
  4. You should see the input element returned (not null)
  5. Test all your IDs this way to make sure they work
  6. Try using setProperty() to test element modification:
    • setProperty("your-input-id", "backgroundColor", "yellow")
    • setProperty("your-button-id", "border", "3px solid red")
  7. If any return null, check that the ID is spelled correctly in your HTML

🔍 Optional: Diving Deeper - DOM Operations

For extra practice, you can also test element access with:

console.log(document.getElementById("your-input-id"))

This will show you the full element object in the console, which can help you understand what properties and methods are available.

You can also use the native DOM style property to modify elements directly:

// Same as setProperty("your-input-id", "backgroundColor", "yellow")
document.getElementById("your-input-id").style.backgroundColor = "yellow";

// Same as setProperty("your-button-id", "border", "3px solid red")
document.getElementById("your-button-id").style.border = "3px solid red";

The DOM Operations approach is the standard way to manipulate styles in professional JavaScript development and is used across all major frameworks and libraries. Learning the native DOM API prepares you for real-world codebases where helper functions aren’t available.

Level 9: Event Listeners

What You’ll Do

Add event listeners to your button and input using the onEvent helper function.

Instructions

💡 Code Hints

Need help with event listeners? Check out these snippets:

✅ Check

  1. Open your webpage in a browser
  2. Open Chrome DevTools (F12) and go to the Console tab
  3. Click your button - you should see a message in the console
  4. Type in your input - you should see messages in the console as you type
  5. If you don’t see messages, check that your event listeners are set up correctly

🔍 Optional: Diving Deeper - Named Functions

Instead of using anonymous functions, you can create named functions for your event handlers:

function clickHandler() {
    console.log("Button was clicked!");
    setText("output", "Hello from the button!");
}

// Use the named functions with onEvent
onEvent("my-button", "click", clickHandler);

Named functions make your code more readable and reusable, especially when you need to use the same handler for multiple elements.

🔍 Optional: Diving Deeper - Native addEventListener

You can also use the native DOM addEventListener method instead of the helper function:

function clickHandler() {
    console.log("Button was clicked!");
    setText("output", "Hello from the button!");
}

// Use native addEventListener
document.getElementById("my-button").addEventListener("click", clickHandler);

This approach gives you direct access to the native DOM API and is the standard method used in professional JavaScript development.

Level 10: Basic Input Handling

What You’ll Do

Get the value from your input and display it in the output area.

Instructions

💡 Code Hints

Need help with input/output? Check out these snippets:

✅ Check

  1. Open your webpage in a browser
  2. Type something in the input box
  3. Click the button
  4. You should see the text you typed appear in the output area
  5. Try typing different things and clicking the button again
  6. If nothing appears, check that you’re using getValue() and setText() correctly

Level 11: Secret Files Setup

What You’ll Do

Create the secret files needed for API keys and version control.

Instructions

📄 secret-variables.js (starter template)

// secret-variables.js
// Store secret keys or tokens here. 
// ⚠️ Do not commit this file to a public repo.

// Put your huggingface secret token here
HF_TOKEN = "your-huggingface-api-token-goes-here";

// Optional: if you are using an API with secret, put it 
API_TOKEN = "your-api-key-goes-here";

📄 .gitignore (starter template)

Copy this and put it in the .gitignore.

Check that the filenames are all spelled exactly right.

Don’t commit before you add your .gitignore

# Secret files (⚠️ do not push secrets!)
secret-variables.js

✅ Check

  1. Create secret-variables.js with the template above
  2. Create .gitignore with the template above
  3. Verify both files exist in your project folder
  4. Make sure the filenames are spelled exactly right
  5. Don’t commit until you create your .gitignore to keep your token off GitHub and prevent it from becoming public information.

Level 12: Input Validation

What You’ll Do

Add validation to check if the input is empty before processing.

Instructions

💡 Code Hints

Need help with validation? Check out these snippets:

✅ Check

  1. Open your webpage in a browser
  2. Click the button without typing anything - you should see an error message
  3. Type something and click the button - you should see the text you typed
  4. Clear the input and click the button again - you should see the error message again
  5. If the validation doesn’t work, check your if statement and error message

Level 13: API Integration Planning

What You’ll Do

Choose and plan your API integration based on your project requirements.

Instructions

💡 Code Hints

Need help choosing APIs? Check out these resources:

📚 Connect to Previous Lessons

Working with APIs? Check out Week 6: APIs and Postman for a complete guide to API integration, testing with Postman, and handling responses.

✅ Check

  1. Review the OUTLINE.md requirements
  2. Choose your APIs and plan your integration
  3. Add your API keys to secret-variables.js
  4. Test that your keys are accessible as global variables
  5. If you need help choosing APIs, ask your instructor or check the suggested list in the outline

Level 14: Basic API Call

What You’ll Do

Make your first API call and display the response.

Instructions

💡 Code Hints

Need help with API calls? Check out these snippets:

✅ Check

  1. Open your webpage in a browser
  2. Click the button to trigger your API call
  3. You should see the API response in the output area
  4. Open Chrome DevTools (F12) and check the Console tab for any errors
  5. If you see errors, check your API URL and response handling

Level 15: API Response Processing

What You’ll Do

Process the API response to extract and display meaningful data.

Instructions

💡 Code Hints

Need help with response processing? Check out these snippets:

✅ Check

  1. Open your webpage in a browser
  2. Click the button to trigger your API call
  3. You should see formatted data in the output area (not raw JSON)
  4. The data should be meaningful and well-formatted
  5. If you see raw JSON or errors, check your response processing code

Level 16: Error Handling (Optional Challenge)

What You’ll Do

Add proper error handling to your API calls.

Instructions

💡 Code Hints

Need help with error handling? Check out these snippets:

✅ Check

  1. Open your webpage in a browser
  2. Click the button to trigger your API call
  3. You should see the API response in the output area
  4. Temporarily break your API URL (add “x” to the end)
  5. Click the button again - you should see a user-friendly error message
  6. Fix the API URL and test again - it should work normally

Level 17: User Interaction Design

What You’ll Do

Design and implement user interactions that make your API calls more dynamic and useful. This is your chance to get creative and bring your unique idea to life! Think about what would make your app engaging and fun to use. Consider how users will discover and interact with your creation - will they click buttons, type inputs, or explore different options? This is where your project transforms from a simple API call into something truly special that showcases your creativity and problem-solving skills.

Instructions

💡 Code Hints

Need help with user interactions? Check out these snippets:

✅ Check

  1. Open your webpage in a browser
  2. Test your chosen interaction pattern:
    • If using buttons, click each one to verify it works
    • If using inputs, type different values and test the results
    • If using conditional logic, test different input scenarios
  3. Verify that your API calls work with the user interactions
  4. Make sure the user experience feels intuitive and responsive

Level 18: AI Integration Planning

What You’ll Do

Choose and plan your AI model integration based on your project requirements.

Instructions

💡 Code Hints

Need help choosing AI models? Check out these resources:

📚 Connect to Previous Lessons

Working with AI models? Check out Week 7: AI Models and APIs for a complete guide to AI integration, Hugging Face models, and prompt engineering.

✅ Check

  1. Review the OUTLINE.md requirements
  2. Choose your AI models and plan your integration
  3. Add your AI API keys to secret-variables.js
  4. Test that your keys are accessible as global variables
  5. If you need help choosing AI models, ask your instructor or check the suggested list in the outline

Level 19: Basic AI Call

What You’ll Do

Make your first AI model call and display the response.

Instructions

💡 Code Hints

Need help with AI calls? Check out these snippets:

✅ Check

  1. Open your webpage in a browser
  2. Click the button to trigger your AI call
  3. You should see the AI response in the output area
  4. Open Chrome DevTools (F12) and check the Console tab for any errors
  5. If you see errors, check your AI API URL and response handling

Level 20: AI Response Processing

What You’ll Do

Process the AI response to extract and display meaningful data.

Instructions

💡 Code Hints

Need help with AI response processing? Check out these snippets:

✅ Check

  1. Open your webpage in a browser
  2. Click the button to trigger your AI call
  3. You should see formatted data in the output area (not raw JSON)
  4. The data should be meaningful and well-formatted
  5. If you see raw JSON or errors, check your response processing code

Level 21: AI Error Handling (Optional Challenge)

What You’ll Do

Add proper error handling to your AI model calls.

Instructions

💡 Code Hints

Need help with AI error handling? Check out these snippets:

✅ Check

  1. Open your webpage in a browser
  2. Click the button to trigger your AI call
  3. You should see the AI response in the output area
  4. Temporarily break your AI API URL (add “x” to the end)
  5. Click the button again - you should see a user-friendly error message
  6. Fix the AI API URL and test again - it should work normally

Level 22: AI Interaction Design

What You’ll Do

Design and implement user interactions that make your AI calls more dynamic and engaging. This is where you can really showcase your creativity with AI! Think about how users will interact with your AI - will they ask questions, give instructions, or explore different AI personalities? Consider what would make your AI app feel magical and intuitive. This is your opportunity to create something that demonstrates the power of AI while being fun and useful for your users.

Instructions

💡 Code Hints

Need help with AI interactions? Check out these snippets:

✅ Check

  1. Open your webpage in a browser
  2. Test your chosen AI interaction pattern:
    • If using question-answer, try different types of questions
    • If using creative writing, test different prompt styles
    • If using personality chat, verify the AI maintains its character
    • If using task assistance, test different types of tasks
    • If using data-enhanced AI, test with different API data to see how it affects AI responses
  3. Verify that your AI calls work smoothly with the user interactions
  4. Make sure the AI responses feel engaging and relevant to user inputs
  5. Test edge cases like empty inputs or very long prompts
  6. If using API data in prompts, verify the data is properly formatted and the AI uses it meaningfully (see Preformatted Raw Text Formatting with CSS for formatting help)

Level 23: Integration Testing

What You’ll Do

Test that all your integrations (API and AI) work together correctly.

Instructions

💡 Code Hints

Need help with testing? Check out these resources:

✅ Check

  1. Open your webpage in a browser
  2. Test your API calls with different inputs
  3. Test your AI calls with different prompts
  4. Test error handling for both
  5. Make sure everything works together smoothly
  6. If you find issues, fix them before moving to the next level

Level 24: UI Polish

What You’ll Do

Polish your user interface with better styling and user experience.

Instructions

💡 Code Hints

Need help with UI polish? Check out these resources:

✅ Check

  1. Open your webpage in a browser
  2. Your interface should look polished and professional
  3. Add loading states for API calls
  4. Improve the overall user experience
  5. Test that all functionality still works after styling changes

Level 25: Final Testing

What You’ll Do

Perform comprehensive testing of your entire application.

Instructions

💡 Code Hints

Need help with testing? Check out these resources:

✅ Check

  1. Open your webpage in a browser
  2. Test all functionality thoroughly
  3. Test with different inputs and edge cases
  4. Test error handling
  5. Make sure everything works as expected
  6. Fix any issues you find

Level 26: Documentation

What You’ll Do

Update your README.md with comprehensive project documentation.

Instructions

💡 Code Hints

Need help with documentation? Check out these resources:

✅ Check

  1. Update your README.md with comprehensive documentation
  2. Include setup instructions
  3. Include usage instructions
  4. Include API information
  5. Add screenshots if helpful
  6. Make sure the documentation is clear and complete

Level 27: Final Commit

What You’ll Do

Commit all your final changes and push to GitHub.

Instructions

💡 Code Hints

Need help with git? Check out these resources:

✅ Check

  1. Run git status to see what files have changed
  2. Add all changes with git add .
  3. Create a commit with a meaningful message
  4. Push to GitHub with git push
  5. Verify your changes are on GitHub

Level 28: Project Review

What You’ll Do

Review your project against the requirements and make any final adjustments.

Instructions

💡 Code Hints

Need help with review? Check out these resources:

✅ Check

  1. Review the OUTLINE.md requirements
  2. Check that you’ve met all the technical requirements
  3. Check that you’ve met all the functional requirements
  4. Make any final adjustments needed
  5. Test everything one more time

Level 29: Final Polish

What You’ll Do

Add final polish to your project to make it presentation-ready.

Instructions

💡 Code Hints

Need help with final polish? Check out these resources:

✅ Check

  1. Add any final styling improvements
  2. Add any final functionality improvements
  3. Make sure everything is working perfectly
  4. Prepare for presentation
  5. Test everything one final time

Level 30: Presentation Prep

What You’ll Do

Prepare your project for presentation and demonstration.

Instructions

💡 Code Hints

Need help with presentation prep? Check out these resources:

✅ Check

  1. Prepare a demo script
  2. Test your demo thoroughly
  3. Prepare for questions
  4. Make sure everything is ready
  5. Practice your presentation

Level 31: Final Testing

What You’ll Do

Perform one final comprehensive test of your entire application.

Instructions

💡 Code Hints

Need help with final testing? Check out these resources:

✅ Check

  1. Test all functionality one more time
  2. Test with different inputs and edge cases
  3. Test error handling
  4. Make sure everything is working perfectly
  5. Fix any issues you find

Level 32: Final Commit

What You’ll Do

Commit all your final changes and push to GitHub.

Instructions

💡 Code Hints

Need help with git? Check out these resources:

✅ Check

  1. Run git status to see what files have changed
  2. Add all changes with git add .
  3. Create a commit with a meaningful message
  4. Push to GitHub with git push
  5. Verify your changes are on GitHub

Level 33: Project Submission

What You’ll Do

Submit your project for evaluation.

Instructions

💡 Code Hints

Need help with submission? Check out these resources:

✅ Check

  1. Submit your project according to your instructor’s guidelines
  2. Make sure all requirements are met
  3. Prepare for evaluation
  4. Be ready to explain your project

Level 34: Project Complete

What You’ll Do

Celebrate your completed capstone project!

Instructions

🎉 Congratulations!

You’ve successfully completed your capstone project! You’ve built a full-stack web application that integrates:

What You’ve Learned

Through this project, you’ve gained experience with:

Next Steps

🎊 Well Done!

You’ve completed a significant milestone in your coding journey. Your capstone project demonstrates your ability to build real-world applications and solve complex problems with code.

Project Complete! 🎉