📊 Build a Weekly Report Generator

Session 2, Topic 3 | Automate Your Reporting

← Back to Course Dashboard / Session 2 / Topic 3
⏱️ 45 minutes

Stop Starting from Scratch Every Week

Build a smart HTML form that transforms your weekly data into professionally formatted reports with one click. No more rewriting the same email structure every Friday!

🎯 Learning Objectives

  • Create a form-based report generator
  • Auto-format data into professional email templates
  • Implement one-click copy functionality
  • Save report data for future reference
  • Generate PDF exports (optional)

🏗️ What We're Building

A local HTML tool that includes:

🚀 Step-by-Step Build Process

Create Project Structure

  1. Open VSCodium to your CoordinatorTools folder
  2. Right-click in Explorer → "New Folder" → name it reports
  3. Right-click reports folder → "New File" → name it weekly-generator.html

Your folder structure:

📁 CoordinatorTools/ 📁 dashboard/ 📄 index.html 📁 reports/ 📄 weekly-generator.html

Prepare the AI Prompt

Copy this complete prompt:

Create an HTML Weekly Report Generator with these features: FORM INPUTS: - Week dates (start and end date pickers) - Number of student meetings held (number input) - Number of faculty consultations (number input) - Events organized this week (text input) - Key achievements (text area, 4-5 lines) - Challenges faced (text area, 3-4 lines) - Next week priorities (text area, 4-5 lines) - Special announcements (optional text area) FUNCTIONALITY: 1. "Generate Report" button that creates formatted output 2. Report preview section that displays formatted email 3. "Copy to Clipboard" button 4. "Clear Form" button 5. "Save Draft" button (uses localStorage) 6. "Load Last Report" button REPORT FORMAT: Subject: Weekly Report - [Week Dates] Dear Team, Here's a summary of this week's activities: METRICS: - Student Meetings: [number] - Faculty Consultations: [number] - Events: [list] KEY ACHIEVEMENTS: [bulleted list] CHALLENGES: [bulleted list] NEXT WEEK PRIORITIES: [bulleted list] [Special Announcements section if filled] Best regards, [Your Name - customizable] STYLING: - Professional teal/blue theme - Clear sections with labels - Responsive layout - Easy-to-read preview - Success/error notifications Include complete HTML with embedded CSS and JavaScript.

Generate with AI

  • Paste prompt into ChatGPT, Claude, or Gemini
  • Wait for complete HTML generation
  • Review code for completeness

Implement in VSCodium

  1. Copy all AI-generated code
  2. Click on weekly-generator.html in VSCodium
  3. Paste code into editor
  4. Save (Ctrl+S)

Test Your Generator

  1. Right-click file → "Reveal in File Explorer"
  2. Double-click weekly-generator.html
  3. Fill in sample data:
    • Week: Feb 3-7, 2025
    • Meetings: 12
    • Consultations: 5
    • Events: Career Fair, Study Skills Workshop
    • Achievement: Successfully launched mentorship program
  4. Click "Generate Report"
  5. Review formatted output
  6. Click "Copy to Clipboard"
  7. Paste into email client to verify

Test Save/Load Functions

  • Fill form with data
  • Click "Save Draft"
  • Clear the form
  • Click "Load Last Report"
  • Verify data reappears

💡 Pro Tips for Weekly Reports

  • Set a Reminder: Every Friday at 3pm to fill out report
  • Track Throughout Week: Keep running list of achievements
  • Consistent Format: Recipients will appreciate predictability
  • Quantify When Possible: Numbers make impact clear
  • Save Historical Data: Export/save old reports for annual reviews
  • Customize Template: Adjust format to match your supervisor's preferences

🎨 Customization Ideas

Add More Fields:

Prompt: "Add these fields to my report generator: Budget spending this week, New partnerships, Student success stories"

Change Report Format:

Prompt: "Format the report as bullet points instead of paragraphs"

Add Charts:

Prompt: "Add a simple bar chart showing meeting numbers over last 4 weeks"

Email Integration:

Prompt: "Add a 'Send Email' button that opens email client with pre-filled message"

✅ Privacy Benefit: This tool runs entirely in your browser. No data is sent to any server. Your reports stay on your computer unless you explicitly share them.

🔗 Link from Your Dashboard

Add this tool to your Coordinator Portal:

  1. Open your dashboard/index.html
  2. Find the tools section
  3. Add a new card linking to ../reports/weekly-generator.html
  4. Or ask AI: "Add a tool card for my Weekly Report Generator at ../reports/weekly-generator.html"

✅ Topic Completion Checklist

🎓 What You've Learned

Next Topic: Create a Student Resource Hub →