Build an AI-Assisted IT Idea Generator

Use ChatGPT to build and publish an interactive IT project idea generator.

Introduction

30 Second Summary

Picking an IT project often starts with too many possibilities. A useful idea also needs a clear first move.

In this project, you will build an IT Project Idea Generator that matches an IT area and difficulty to a focused project. Your AI-assisted workflow uses structured prompting with ChatGPT. You will review its output before publishing your tested app with GitHub Pages.

What You'll Build

Your live page turns Cloud Computing plus Intermediate into Deployment Readiness Checklist, complete with a description, three deliverables, and a first action.

By the end of this project, you'll have:

  • A responsive project generator that recommends a matching idea for web development, cybersecurity, cloud computing, or data analytics.
  • A repeatable AI-assisted workflow for defining requirements, reviewing generated code, reporting a limitation, and verifying its correction.
  • A public deployment that runs in a normal browser from a shareable GitHub Pages link.
  • Secret Mission: Turn the finished build into a concise repository case study that explains the problem, your AI collaboration, your testing, and the result.

Are there any prerequisites?

You need basic comfort working with files and folders on Windows. No prior JavaScript experience is required.

Before We Start

This step locks in the purpose of your generator before any hands-on work begins. Your commitment also keeps ChatGPT in the role of a collaborator whose output you review and test.

Set Up the AI Build Workspace

AI output can become messy when its files have no clear home. Vague instructions also invite it to guess what you meant.

In this step, you will create a local folder in Visual Studio Code. You will verify a starter page before giving ChatGPT a structured build brief.

In this step, get ready to:
  • Create the local project folder in Visual Studio Code.
  • Verify the starter page in a browser.
  • Give ChatGPT a structured build brief.
Create the local workspace

A workspace gives Visual Studio Code one folder to treat as the project. Keeping this project in its own folder makes every later file easier to review.

  • Press the Windows logo key+E to open File Explorer.
  • Select Documents in the left navigation pane.
  • Select New in the toolbar.
  • Select Folder.
  • Type it-project-idea-generator as the folder name.
  • Press Enter.

You should see it-project-idea-generator listed inside Documents.

Visual Studio Code may show a Workspace Trust dialog when you open the folder. This folder contains only files you create during the project.

  • Press the Windows key to open the search bar.
  • Type Visual Studio Code.
  • Press Enter to open Visual Studio Code.
  • Select File from the top menu.
  • Select Open Folder....
  • Select the Documents\it-project-idea-generator folder.
  • Select Select Folder.
  • Select Yes, I trust the authors if the Workspace Trust dialog appears.

You should see it-project-idea-generator at the top of the Explorer view.

  • Select New File... in the Explorer view.
  • Type index.html as the file name.
  • Press Enter.

Your Explorer view should now list index.html inside the project folder.

Build and verify the starter page

HTML gives the browser the structure it displays. This starter page creates one visible heading that proves the local file works.

  • Add the starter page to index.html by replacing the empty editor with this code:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>IT Project Idea Generator</title>
</head>
<body>
  <h1>IT Project Idea Generator</h1>
</body>
</html>

What does this starter page do?

  • The <!DOCTYPE html> line tells the browser to use modern HTML.
  • The <head> section stores page metadata.
  • The <title> element sets the browser tab name.
  • The <h1> element creates the visible page heading.
  • Save index.html by pressing Ctrl+S.
  • Right-click index.html in the Explorer view.
  • Select Reveal in File Explorer.

Before you open the file, what heading do you expect the browser to show?

  • Double-click index.html in File Explorer.

Your browser should show IT Project Idea Generator as a visible heading.

That first result is working. Your browser can read the local page directly.

Don't see the heading?

  • Confirm that index.html is saved in the Documents\it-project-idea-generator folder.
  • Check that the file name ends with .html.
  • Compare your file with the full-code tab below.

Help me fix my local starter page.

✔️ Awesome, I've got everything!

Your starter page now matches the project checkpoint.

ⓧ I'd like to double check the full code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>IT Project Idea Generator</title>
</head>
<body>
  <h1>IT Project Idea Generator</h1>
</body>
</html>
Write the structured build brief

Structured prompting gives ChatGPT a clear target. Boundaries keep generated code compatible with a public static page.

  • Open a new browser tab.
  • Go to ChatGPT.
  • Sign in to your ChatGPT account.
  • Start a new conversation for this project.

Your build brief uses four labeled sections. Each section gives ChatGPT one kind of information to follow.

  • Add a Goal section that requests a responsive IT Project Idea Generator matching the selected area and difficulty.
  • Add a Context section containing your audience-and-decision sentence from Step 0.
  • Add an Output section requiring one self-contained index.html file.
  • Under Output, request a final verification checklist.
  • Add a Boundaries section that allows no packages.
  • Under Boundaries, forbid API keys.
  • Under Boundaries, require accessible labels.
  • Under Boundaries, require responsive styling.

Your brief now separates the desired result from the limits ChatGPT must respect.

Before you review the sent brief, do you expect every requirement to be easy to find?

  • Send the completed build brief to ChatGPT.
  • Review your sent message for the four labeled sections.

You should see Goal, Context, Output, and Boundaries as distinct parts of your message.

Before you make the final browser check, which heading should the local page display?

  • Return to File Explorer from earlier.
  • Double-click index.html.

Your browser should still show IT Project Idea Generator as the visible heading.

Your workspace now has a verified starting point plus a brief that keeps ChatGPT focused. Next up, you will turn that brief into the visible generator interface.

Build the Visible Generator Interface

Your starter page proves that the browser can load your local HTML file. A useful AI-assisted workflow now needs a reviewed interface that turns the build brief into something you can test.

In this step, you ask ChatGPT for a focused interface draft. You then build the reviewed structure before testing its controls.

In this step, get ready to:
  • Request a focused interface draft from ChatGPT.
  • Build the reviewed page structure in index.html.
  • Test the visible controls in the browser.
Review ChatGPT's interface draft

AI output is a proposal that needs human review. Your build brief gives you a checklist for catching missing elements before generated code reaches your file.

  • Switch back to the dedicated ChatGPT conversation from the previous step.
  • Ask ChatGPT to draft only the HTML and CSS for your build brief.
  • Require the draft to keep all code inside one self-contained index.html file.
  • Check that the draft contains a visible page heading.
  • Check that the area selector has an accessible label.
  • Check that the difficulty selector has an accessible label.
  • Check that the hidden resultCard contains every result field from the brief.
  • Ask ChatGPT to correct its draft if any requirement is missing.

Why review the draft?

A structured prompt narrows the task. Human review confirms that the response actually follows those constraints.

This review keeps your decisions in charge of the build.

Build the reviewed interface

The reviewed code below is the source of truth for your page. You will add it in small sections so each change produces a result you can inspect.

  • Switch back to index.html in Visual Studio Code.
  • Place your cursor immediately above </head>.
  • Add the page foundation by pasting this code:
  <style>
    :root {
      color-scheme: dark;
      --background: #08111f;
      --surface: #111d30;
      --surface-light: #182842;
      --text: #f5f7fb;
      --muted: #a9b7cb;
      --accent: #66e3c4;
      --accent-dark: #08241e;
      --border: #2a3b55;
    }

    * {
      box-sizing: border-box;
    }

    body {
      min-height: 100vh;
      margin: 0;
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at top left, #17355c 0, transparent 35%),
        var(--background);
    }
  </style>

What does this code do?

  • The values inside :root create a reusable colour palette for the page.
  • The universal selector keeps element sizing predictable.
  • The body rules create the dark gradient background.
  • Save index.html.
  • Switch back to the browser from the previous step.
  • Refresh the local page.

You should see the starter heading against a dark blue gradient. The stylesheet is now connected to the page.

Still seeing a white background?

  • Check that the opening <style> tag sits inside <head>.
  • Check that the closing </style> tag appears before </head>.

Help me find why the CSS foundation in my index.html file is not appearing in the browser.

  • Find the existing <h1>IT Project Idea Generator</h1> line inside <body>.
  • Replace that line with the hero structure below:
  <main>
    <section class="hero">
      <p class="eyebrow">AI-assisted portfolio builder</p>
      <h1>Find your next IT project</h1>
      <p>
        Choose an IT area and a difficulty level to generate a focused project
        you can build, test, and discuss in your portfolio.
      </p>
    </section>
  </main>

  <script>
  </script>

What does this code do?

  • The main element contains the primary page content.
  • The hero section explains what the generator helps a visitor do.
  • The empty script element reserves the location for browser behavior.
  • Save index.html.
  • Refresh the local page in your browser.

You should see the eyebrow text above a new heading. A short description should appear below it.

Missing part of the hero?

  • Check that the hero sits between the opening <main> tag and closing </main> tag.
  • Check that each paragraph has a matching closing tag.

Help me compare my hero HTML with the required structure.

  • Place your cursor immediately above </style>.
  • Add the hero layout rules by pasting this code:
    main {
      width: min(920px, calc(100% - 32px));
      margin: 0 auto;
      padding: 64px 0;
    }

    .hero {
      max-width: 700px;
      margin-bottom: 32px;
    }

    .eyebrow,
    .result-label {
      margin: 0 0 8px;
      color: var(--accent);
      font-size: 0.8rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

How does the layout work?

  • The main rules center the content inside a readable maximum width.
  • The .hero rules limit the width of the introduction.
  • The eyebrow style uses the accent colour to create a small visual label.
  • Save index.html.
  • Refresh the local page.

You should see the content centered with space around it. The eyebrow should appear in green uppercase text.

Is the content still touching the edge?

  • Check that the main selector is inside the existing style element.
  • Check that margin: 0 auto remains inside the main rule.

Help me debug why my main layout is not centered.

  • Keep your cursor immediately above </style>.
  • Add the hero typography by pasting this code:
    h1,
    h2,
    h3,
    p {
      margin-top: 0;
    }

    h1 {
      margin-bottom: 16px;
      font-size: clamp(2.4rem, 8vw, 4.8rem);
      line-height: 0.98;
    }

    .hero p:last-child {
      max-width: 620px;
      color: var(--muted);
      font-size: 1.05rem;
      line-height: 1.7;
    }

What changes here?

  • The shared heading rules remove inconsistent space above text.
  • The clamp() value lets the main heading scale with the screen width.
  • The final hero paragraph uses a muted colour to keep the heading prominent.
  • Save index.html.
  • Refresh the local page.

You should see a larger heading with a compact line height. The description should appear in muted text.

Is the heading still small?

  • Check that the selector begins with h1.
  • Check that the clamp() value has both parentheses.

Help me find the typo in my hero typography CSS.

  • Find the closing </section> tag for the hero.
  • Place your cursor on the blank line after that tag.
  • Add the generator controls by pasting this code:
    <section class="generator-panel" aria-labelledby="generator-title">
      <h2 id="generator-title">Generate an idea</h2>

      <div class="controls">
        <div class="control">
          <label for="area">IT area</label>
          <select id="area">
            <option value="web">Web Development</option>
            <option value="cybersecurity">Cybersecurity</option>
            <option value="cloud">Cloud Computing</option>
            <option value="data">Data Analytics</option>
          </select>
        </div>

        <div class="control">
          <label for="difficulty">Difficulty</label>
          <select id="difficulty">
            <option value="beginner">Beginner</option>
            <option value="intermediate">Intermediate</option>
          </select>
        </div>
      </div>

      <button id="generateButton" type="button">Generate project idea</button>
    </section>

How are the controls structured?

  • Each label points to its selector through matching for and id values.
  • The area selector contains four IT categories.
  • The difficulty selector contains two levels.
  • The generateButton identifier gives the button a precise target for later behavior.
  • Save index.html.
  • Refresh the local page.

You should see two selectors below the hero. You should also see the Generate project idea button.

Are the controls outside the page?

  • Check that the generator section appears before the closing </main> tag.
  • Check that both select elements have closing tags.

Help me repair the HTML structure around my generator controls.

  • Place your cursor immediately above </style>.
  • Add the panel layout by pasting this code:
    .generator-panel,
    .result-card {
      padding: 28px;
      border: 1px solid var(--border);
      border-radius: 22px;
      background: rgba(17, 29, 48, 0.92);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    }

    .controls {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
      margin: 24px 0;
    }

    .control {
      display: grid;
      gap: 8px;
    }

    label {
      color: var(--muted);
      font-size: 0.92rem;
      font-weight: 700;
    }

How does the panel layout work?

  • The shared panel style creates the rounded surface around interface content.
  • The .controls grid places the selectors in two columns.
  • The .control grid keeps each label close to its selector.
  • Save index.html.
  • Refresh the local page.

You should see the controls inside a rounded panel. The two selectors should sit side by side.

Are the selectors still stacked?

  • Check that display: grid appears inside the .controls rule.
  • Check that both control groups remain inside the element with class="controls".

Help me debug why my two selectors are not appearing in columns.

  • Keep your cursor immediately above </style>.
  • Style the selectors and button by pasting this code:
    select,
    button {
      width: 100%;
      min-height: 48px;
      border-radius: 12px;
      font: inherit;
    }

    select {
      padding: 0 14px;
      border: 1px solid var(--border);
      color: var(--text);
      background: var(--surface-light);
    }

    button {
      border: 0;
      color: var(--accent-dark);
      background: var(--accent);
      font-weight: 800;
      cursor: pointer;
    }

What does this styling add?

  • The shared rules give every control the same width.
  • The selectors use a darker surface colour that fits the panel.
  • The button uses the accent colour to mark the main action.
  • Save index.html.
  • Refresh the local page.

You should see two dark selectors. The full-width button should appear in green.

Is the button still unstyled?

  • Check that the selector is written as button.
  • Check that background: var(--accent) sits inside the button rule.

Help me debug why my button CSS is not being applied.

  • Keep your cursor immediately above </style>.
  • Add the interaction states by pasting this code:
    button:hover {
      filter: brightness(1.08);
    }

    button:focus-visible,
    select:focus-visible {
      outline: 3px solid #ffffff;
      outline-offset: 3px;
    }

Why add interaction states?

  • The hover state gives pointer users visual feedback.
  • The focus state gives keyboard users a visible position indicator.
  • Save index.html.
  • Refresh the local page.
  • Move your pointer over the Generate project idea button.
  • Press Tab until one of the controls receives focus.

The button should brighten when you hover over it. A focused control should have a white outline.

Missing the focus outline?

  • Check that both selectors end with :focus-visible.
  • Check that a comma separates the button selector from the select selector.

Help me debug why the focus outline is missing from my form controls.

  • Find the closing </section> tag for the generator panel.
  • Place your cursor on the blank line after that tag.
  • Add the result structure by pasting this code:
    <article id="resultCard" class="result-card hidden" aria-live="polite">
      <p class="result-label">Your project idea</p>
      <h2 id="ideaTitle"></h2>
      <p id="ideaDescription"></p>

      <h3>What you will build</h3>
      <ul>
        <li id="deliverableOne"></li>
        <li id="deliverableTwo"></li>
        <li id="deliverableThree"></li>
      </ul>

      <h3>First action</h3>
      <p id="ideaNextStep"></p>
    </article>

What does the result structure hold?

  • The ideaTitle element holds the generated project name.
  • The ideaDescription element holds its summary.
  • The three deliverable elements hold the expected project outcomes.
  • The ideaNextStep element holds the first action.
  • Save index.html.
  • Refresh the local page.

You should see the empty result structure below the button. This confirms that every result element exists in the page.

Missing a result heading?

  • Check that the article appears before the closing </main> tag.
  • Check that every opening heading tag has a matching closing tag.

Help me compare my result-card HTML with the required element IDs.

  • Place your cursor immediately above </style>.
  • Style the result card and its initial state by pasting this code:
    .result-card {
      margin-top: 24px;
    }

    .result-card h2 {
      margin-bottom: 12px;
      font-size: clamp(1.8rem, 5vw, 2.7rem);
    }

    .result-card > p:not(.result-label),
    .result-card li {
      color: var(--muted);
      line-height: 1.65;
    }

    .result-card h3 {
      margin: 24px 0 10px;
    }

    .result-card ul {
      padding-left: 22px;
    }

    .hidden {
      display: none;
    }

How is the result card prepared?

  • The result rules create spacing for the generated title.
  • The description and deliverables use muted text for readability.
  • The .hidden rule keeps the empty card out of view when the page first loads.
  • Save index.html.
  • Refresh the local page.

The empty result structure should disappear. You should see only the hero and generator panel.

Can you still see the empty result?

  • Check that the article includes class="result-card hidden".
  • Check that the .hidden rule contains display: none.

Help me debug why my hidden result card is still visible.

  • Keep your cursor immediately above </style>.
  • Add the mobile layout by pasting this code:
    @media (max-width: 640px) {
      main {
        padding: 36px 0;
      }

      .controls {
        grid-template-columns: 1fr;
      }

      .generator-panel,
      .result-card {
        padding: 22px;
      }
    }

How does the mobile layout respond?

  • The media query applies when the page width is 640px or less.
  • The control grid changes to one column on narrow screens.
  • The panels use smaller padding so more space remains for content.
  • Save index.html.
  • Refresh the local page.
  • Narrow the browser window until the selectors stack vertically.
  • Widen the browser window until the selectors return to two columns.

That is the visible interface working across two layouts. Your generator now has a clear structure that you can test like a visitor.

Do the selectors stay side by side?

  • Check that the media query appears before the closing </style> tag.
  • Check that grid-template-columns: 1fr sits inside the .controls rule.

Help me debug why my responsive control layout is not stacking on a narrow screen.

✔️ Awesome, I've got everything!

Your reviewed interface is complete. Make sure index.html is saved before testing the controls.

ⓧ I'd like to double check the full code

  • Compare your complete index.html file with this reference:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>IT Project Idea Generator</title>
  <style>
    :root {
      color-scheme: dark;
      --background: #08111f;
      --surface: #111d30;
      --surface-light: #182842;
      --text: #f5f7fb;
      --muted: #a9b7cb;
      --accent: #66e3c4;
      --accent-dark: #08241e;
      --border: #2a3b55;
    }

    * {
      box-sizing: border-box;
    }

    body {
      min-height: 100vh;
      margin: 0;
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at top left, #17355c 0, transparent 35%),
        var(--background);
    }

    main {
      width: min(920px, calc(100% - 32px));
      margin: 0 auto;
      padding: 64px 0;
    }

    .hero {
      max-width: 700px;
      margin-bottom: 32px;
    }

    .eyebrow,
    .result-label {
      margin: 0 0 8px;
      color: var(--accent);
      font-size: 0.8rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    h1,
    h2,
    h3,
    p {
      margin-top: 0;
    }

    h1 {
      margin-bottom: 16px;
      font-size: clamp(2.4rem, 8vw, 4.8rem);
      line-height: 0.98;
    }

    .hero p:last-child {
      max-width: 620px;
      color: var(--muted);
      font-size: 1.05rem;
      line-height: 1.7;
    }

    .generator-panel,
    .result-card {
      padding: 28px;
      border: 1px solid var(--border);
      border-radius: 22px;
      background: rgba(17, 29, 48, 0.92);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    }

    .controls {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
      margin: 24px 0;
    }

    .control {
      display: grid;
      gap: 8px;
    }

    label {
      color: var(--muted);
      font-size: 0.92rem;
      font-weight: 700;
    }

    select,
    button {
      width: 100%;
      min-height: 48px;
      border-radius: 12px;
      font: inherit;
    }

    select {
      padding: 0 14px;
      border: 1px solid var(--border);
      color: var(--text);
      background: var(--surface-light);
    }

    button {
      border: 0;
      color: var(--accent-dark);
      background: var(--accent);
      font-weight: 800;
      cursor: pointer;
    }

    button:hover {
      filter: brightness(1.08);
    }

    button:focus-visible,
    select:focus-visible {
      outline: 3px solid #ffffff;
      outline-offset: 3px;
    }

    .result-card {
      margin-top: 24px;
    }

    .result-card h2 {
      margin-bottom: 12px;
      font-size: clamp(1.8rem, 5vw, 2.7rem);
    }

    .result-card > p:not(.result-label),
    .result-card li {
      color: var(--muted);
      line-height: 1.65;
    }

    .result-card h3 {
      margin: 24px 0 10px;
    }

    .result-card ul {
      padding-left: 22px;
    }

    .hidden {
      display: none;
    }

    @media (max-width: 640px) {
      main {
        padding: 36px 0;
      }

      .controls {
        grid-template-columns: 1fr;
      }

      .generator-panel,
      .result-card {
        padding: 22px;
      }
    }
  </style>
</head>
<body>
  <main>
    <section class="hero">
      <p class="eyebrow">AI-assisted portfolio builder</p>
      <h1>Find your next IT project</h1>
      <p>
        Choose an IT area and a difficulty level to generate a focused project
        you can build, test, and discuss in your portfolio.
      </p>
    </section>

    <section class="generator-panel" aria-labelledby="generator-title">
      <h2 id="generator-title">Generate an idea</h2>

      <div class="controls">
        <div class="control">
          <label for="area">IT area</label>
          <select id="area">
            <option value="web">Web Development</option>
            <option value="cybersecurity">Cybersecurity</option>
            <option value="cloud">Cloud Computing</option>
            <option value="data">Data Analytics</option>
          </select>
        </div>

        <div class="control">
          <label for="difficulty">Difficulty</label>
          <select id="difficulty">
            <option value="beginner">Beginner</option>
            <option value="intermediate">Intermediate</option>
          </select>
        </div>
      </div>

      <button id="generateButton" type="button">Generate project idea</button>
    </section>

    <article id="resultCard" class="result-card hidden" aria-live="polite">
      <p class="result-label">Your project idea</p>
      <h2 id="ideaTitle"></h2>
      <p id="ideaDescription"></p>

      <h3>What you will build</h3>
      <ul>
        <li id="deliverableOne"></li>
        <li id="deliverableTwo"></li>
        <li id="deliverableThree"></li>
      </ul>

      <h3>First action</h3>
      <p id="ideaNextStep"></p>
    </article>
  </main>

  <script>
  </script>
</body>
</html>
Test the interface behavior

A visible interface needs a user test before you add more code. This check separates what the page displays from what its controls currently accomplish.

  • Return the browser to a normal desktop width.
  • Refresh the local index.html page.
  • Choose Cloud Computing from the IT area selector.
  • Choose Intermediate from the Difficulty selector.

Before you select the button, do you think the result card will reveal a complete project idea?

  • Select Generate project idea.

The selectors accept your choices, but the result card stays hidden. This is the intended shortfall that your interface test needed to expose.

What did this test prove?

The page currently contains structure and styling. Its empty script element has no JavaScript behavior that responds to the button.

You now have clear reproduction steps for the missing behavior.

  • Switch back to your dedicated ChatGPT conversation.
  • Report that you selected Cloud Computing for the area.
  • Report that you selected Intermediate for the difficulty.
  • Report that the controls were visible when you selected the button.
  • Report that the button did not reveal the result card.

You have turned an AI draft into a reviewed interface with a reproducible limitation. Next, you will add the data and event logic that makes the generator respond.

Make the Generator Respond

Your reviewed interface now presents every control a visitor needs. The inert button shows the exact gap between a polished mock-up and a working product.

In this step, JavaScript connects those controls to the result card through DOM updates. You will ask ChatGPT for a focused correction before reviewing its work yourself.

In this step, get ready to:
  • Report the inert button with clear reproduction steps.
  • Add eight project ideas plus the interaction logic to index.html.
  • Review every page connection before testing three selector combinations.
Request a minimal fix

A useful bug report gives ChatGPT a repeatable path to the problem. Clear boundaries keep its response focused on the missing behavior.

  • Switch back to the dedicated ChatGPT conversation from the previous step.
  • Provide the reproduction step where you choose an IT area.
  • Provide the reproduction step where you choose a difficulty.
  • Report that selecting Generate project idea leaves the result card hidden.
  • Request a minimal fix that preserves the existing HTML.
  • Require the fix to preserve the existing CSS.
  • Request an ideas array plus the showIdea function.
  • Request the generateIdea function plus a click event listener for generateButton.

Why Use Reproduction Steps?

Reproduction steps describe an observable failure that ChatGPT can address. The preservation requirements protect the reviewed interface from unnecessary changes.

You still decide whether the proposed correction fits your page. Human review turns generated code into a verified change.

Add the data and interaction

An array of objects stores one recommendation for each area and difficulty combination. The interaction logic finds the matching object before placing its content into the result card.

  • Return to index.html in Visual Studio Code.
  • Locate the empty <script> element near the bottom of the file.
  • Replace the empty space inside <script> by copying every JavaScript block below in sequence:
    const ideas = [
      {
        area: "web",
        difficulty: "beginner",
        title: "Student Portfolio Site",
        description: "Create a responsive personal site that introduces your skills and presents your best coursework or practice projects.",
        deliverables: [
          "A clear introduction and skills section",
          "Project cards with outcomes and evidence",
          "Accessible contact and navigation links"
        ],
        nextStep: "Sketch the page sections on paper before writing the first HTML elements."
      },
      {
        area: "web",
        difficulty: "intermediate",
        title: "Help Desk Ticket Dashboard",
        description: "Build a browser dashboard that organizes sample support tickets by priority, status, and category.",
        deliverables: [
          "A ticket summary with useful totals",
          "Filters for priority and status",
          "A responsive ticket list for narrow screens"
        ],
        nextStep: "Define five sample tickets and the fields each ticket needs."
      },

What Do These Records Store?

  • The first object stores the beginner Web Development recommendation.
  • The second object stores the intermediate Web Development recommendation.
  • Each deliverables array contains the three list items shown in the result card.
      {
        area: "cybersecurity",
        difficulty: "beginner",
        title: "Phishing Awareness Quiz",
        description: "Create an educational quiz that asks users to identify common warning signs in fictional messages.",
        deliverables: [
          "Five fictional message examples",
          "Immediate feedback for every answer",
          "A final score with practical safety reminders"
        ],
        nextStep: "Write one fictional message and list the clues a learner should notice."
      },
      {
        area: "cybersecurity",
        difficulty: "intermediate",
        title: "Security Incident Timeline",
        description: "Visualize a fictional security incident so a viewer can follow detection, response, recovery, and lessons learned.",
        deliverables: [
          "A time-ordered incident view",
          "Severity and status labels",
          "A lessons-learned summary"
        ],
        nextStep: "Create six fictional incident events with timestamps and short descriptions."
      },

What Does This Segment Cover?

These objects cover both Cybersecurity difficulty levels. Their matching values let the generator distinguish between the two recommendations.

      {
        area: "cloud",
        difficulty: "beginner",
        title: "Cloud Architecture Explorer",
        description: "Create an interactive diagram that explains how a small web application could separate its interface, logic, and data.",
        deliverables: [
          "Three clearly labeled architecture layers",
          "Clickable explanations for each layer",
          "A short description of how a request moves through the system"
        ],
        nextStep: "Draw three boxes for interface, logic, and data, then describe the role of each box."
      },
      {
        area: "cloud",
        difficulty: "intermediate",
        title: "Deployment Readiness Checklist",
        description: "Build a checklist that helps a small team review reliability, security, monitoring, and recovery before a deployment.",
        deliverables: [
          "Grouped readiness questions",
          "A completion score that updates automatically",
          "A summary of unfinished checks"
        ],
        nextStep: "Write three readiness questions for each of the four review areas."
      },

How Is Cloud Computing Covered?

These objects add one beginner Cloud Computing recommendation. They also add one intermediate recommendation.

      {
        area: "data",
        difficulty: "beginner",
        title: "Study Progress Dashboard",
        description: "Turn sample study-session records into a visual summary of time spent, topics covered, and weekly progress.",
        deliverables: [
          "A small sample dataset",
          "Summary totals by topic",
          "A clear weekly progress view"
        ],
        nextStep: "Create ten fictional study records with a date, topic, and duration."
      },
      {
        area: "data",
        difficulty: "intermediate",
        title: "IT Support Trend Analyzer",
        description: "Analyze a sample set of support requests to reveal frequent issue categories and changes over time.",
        deliverables: [
          "A cleaned sample support dataset",
          "Issue totals grouped by category",
          "A written summary of two patterns in the data"
        ],
        nextStep: "Define the columns for a sample support-request dataset before collecting records."
      }
    ];

How Is the Dataset Completed?

The final two objects cover both Data Analytics difficulty levels. The completed array now contains eight combinations.

    const areaSelect = document.getElementById("area");
    const difficultySelect = document.getElementById("difficulty");
    const generateButton = document.getElementById("generateButton");
    const resultCard = document.getElementById("resultCard");
    const ideaTitle = document.getElementById("ideaTitle");
    const ideaDescription = document.getElementById("ideaDescription");
    const deliverableOne = document.getElementById("deliverableOne");
    const deliverableTwo = document.getElementById("deliverableTwo");
    const deliverableThree = document.getElementById("deliverableThree");
    const ideaNextStep = document.getElementById("ideaNextStep");

How Do the Constants Connect the Page?

Each getElementById call finds one existing element through its exact ID. The constants keep references to both selectors plus every field that the script updates.

    function showIdea(idea) {
      if (!idea) {
        return;
      }

      ideaTitle.textContent = idea.title;
      ideaDescription.textContent = idea.description;
      deliverableOne.textContent = idea.deliverables[0];
      deliverableTwo.textContent = idea.deliverables[1];
      deliverableThree.textContent = idea.deliverables[2];
      ideaNextStep.textContent = idea.nextStep;
      resultCard.classList.remove("hidden");
    }

What Does showIdea Do?

  • The guard stops the function when no matching idea exists.
  • Each textContent assignment replaces one result field with content from the selected object.
  • The classList.remove("hidden") call reveals the completed result card.
    function generateIdea() {
      const selectedIdea = ideas.find((idea) =>
        idea.area === areaSelect.value &&
        idea.difficulty === difficultySelect.value
      );

      showIdea(selectedIdea);
    }

    generateButton.addEventListener("click", generateIdea);

How Does the Button Choose an Idea?

  • The find method returns the first object that matches both selected values.
  • The showIdea call sends that matching object to the display function.
  • The addEventListener call runs generateIdea when the visitor selects the button.

Before you test the correction, do you expect the default selector values to find a matching project?

  • Save index.html.
  • Switch back to the browser from the previous step.
  • Refresh the local page.
  • Keep Web Development selected in the IT area field.
  • Keep Beginner selected in the Difficulty field.
  • Select Generate project idea.

You will see the result card with Student Portfolio Site as its title. The description plus three deliverables plus first action will also appear.

Does the Button Still Look Inert?

  • Confirm that every JavaScript block sits between the opening and closing <script> tags.
  • Check that the eight objects remain inside the ideas array.
  • Compare the braces plus parentheses with the code above.

Help me debug why the generator button does not reveal the result card.

Review the wiring and test results

Generated code can appear convincing while one mismatched ID disconnects it from the page. Your review checks every JavaScript reference against the existing HTML.

  • Return to the DOM constants in index.html.
  • Compare each getElementById value with its matching HTML id.
  • Review the ideas array for one beginner object in every area.
  • Review the ideas array for one intermediate object in every area.

ID Review Checklist

  • The first selector reference matches area.
  • The second selector reference matches difficulty.
  • The button reference matches generateButton.
  • The card reference matches resultCard.
  • The title reference matches ideaTitle.
  • The description reference matches ideaDescription.
  • The three list references match deliverableOne, deliverableTwo, and deliverableThree.
  • The first action reference matches ideaNextStep.
  • Select Cybersecurity in the IT area field.
  • Select Intermediate in the Difficulty field.
  • Select Generate project idea.

You will see Security Incident Timeline as the title. The rest of the card will change to the matching Cybersecurity content.

Before the final check, do you expect every result field to change when both selector values change?

  • Select Cloud Computing in the IT area field.
  • Select Intermediate in the Difficulty field.
  • Select Generate project idea.

You will see Deployment Readiness Checklist as the title. Its matching description will appear directly below it.

What Should the Complete Result Show?

  • The first deliverable reads Grouped readiness questions.
  • The second deliverable reads A completion score that updates automatically.
  • The third deliverable reads A summary of unfinished checks.
  • The first action reads Write three readiness questions for each of the four review areas..

🙋‍♀️ Does One Combination Show the Wrong Result?

  • Check that each object's area value matches an option value from the first selector.
  • Check that each object's difficulty value matches an option value from the second selector.
  • Confirm that every object remains separated by a comma.

Help me find why one selector combination returns the wrong project idea.

✔️ Awesome, I've got everything!

Your local index.html contains all eight recommendations. The selectors now produce a complete matching result.

ⓧ I'd like to double check the full code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>IT Project Idea Generator</title>
  <style>
    :root {
      color-scheme: dark;
      --background: #08111f;
      --surface: #111d30;
      --surface-light: #182842;
      --text: #f5f7fb;
      --muted: #a9b7cb;
      --accent: #66e3c4;
      --accent-dark: #08241e;
      --border: #2a3b55;
    }

    * {
      box-sizing: border-box;
    }

    body {
      min-height: 100vh;
      margin: 0;
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at top left, #17355c 0, transparent 35%),
        var(--background);
    }

    main {
      width: min(920px, calc(100% - 32px));
      margin: 0 auto;
      padding: 64px 0;
    }

    .hero {
      max-width: 700px;
      margin-bottom: 32px;
    }

    .eyebrow,
    .result-label {
      margin: 0 0 8px;
      color: var(--accent);
      font-size: 0.8rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    h1,
    h2,
    h3,
    p {
      margin-top: 0;
    }

    h1 {
      margin-bottom: 16px;
      font-size: clamp(2.4rem, 8vw, 4.8rem);
      line-height: 0.98;
    }

    .hero p:last-child {
      max-width: 620px;
      color: var(--muted);
      font-size: 1.05rem;
      line-height: 1.7;
    }

    .generator-panel,
    .result-card {
      padding: 28px;
      border: 1px solid var(--border);
      border-radius: 22px;
      background: rgba(17, 29, 48, 0.92);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    }

    .controls {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
      margin: 24px 0;
    }

    .control {
      display: grid;
      gap: 8px;
    }

    label {
      color: var(--muted);
      font-size: 0.92rem;
      font-weight: 700;
    }

    select,
    button {
      width: 100%;
      min-height: 48px;
      border-radius: 12px;
      font: inherit;
    }

    select {
      padding: 0 14px;
      border: 1px solid var(--border);
      color: var(--text);
      background: var(--surface-light);
    }

    button {
      border: 0;
      color: var(--accent-dark);
      background: var(--accent);
      font-weight: 800;
      cursor: pointer;
    }

    button:hover {
      filter: brightness(1.08);
    }

    button:focus-visible,
    select:focus-visible {
      outline: 3px solid #ffffff;
      outline-offset: 3px;
    }

    .result-card {
      margin-top: 24px;
    }

    .result-card h2 {
      margin-bottom: 12px;
      font-size: clamp(1.8rem, 5vw, 2.7rem);
    }

    .result-card > p:not(.result-label),
    .result-card li {
      color: var(--muted);
      line-height: 1.65;
    }

    .result-card h3 {
      margin: 24px 0 10px;
    }

    .result-card ul {
      padding-left: 22px;
    }

    .hidden {
      display: none;
    }

    @media (max-width: 640px) {
      main {
        padding: 36px 0;
      }

      .controls {
        grid-template-columns: 1fr;
      }

      .generator-panel,
      .result-card {
        padding: 22px;
      }
    }
  </style>
</head>
<body>
  <main>
    <section class="hero">
      <p class="eyebrow">AI-assisted portfolio builder</p>
      <h1>Find your next IT project</h1>
      <p>
        Choose an IT area and a difficulty level to generate a focused project
        you can build, test, and discuss in your portfolio.
      </p>
    </section>

    <section class="generator-panel" aria-labelledby="generator-title">
      <h2 id="generator-title">Generate an idea</h2>

      <div class="controls">
        <div class="control">
          <label for="area">IT area</label>
          <select id="area">
            <option value="web">Web Development</option>
            <option value="cybersecurity">Cybersecurity</option>
            <option value="cloud">Cloud Computing</option>
            <option value="data">Data Analytics</option>
          </select>
        </div>

        <div class="control">
          <label for="difficulty">Difficulty</label>
          <select id="difficulty">
            <option value="beginner">Beginner</option>
            <option value="intermediate">Intermediate</option>
          </select>
        </div>
      </div>

      <button id="generateButton" type="button">Generate project idea</button>
    </section>

    <article id="resultCard" class="result-card hidden" aria-live="polite">
      <p class="result-label">Your project idea</p>
      <h2 id="ideaTitle"></h2>
      <p id="ideaDescription"></p>

      <h3>What you will build</h3>
      <ul>
        <li id="deliverableOne"></li>
        <li id="deliverableTwo"></li>
        <li id="deliverableThree"></li>
      </ul>

      <h3>First action</h3>
      <p id="ideaNextStep"></p>
    </article>
  </main>

  <script>
    const ideas = [
      {
        area: "web",
        difficulty: "beginner",
        title: "Student Portfolio Site",
        description: "Create a responsive personal site that introduces your skills and presents your best coursework or practice projects.",
        deliverables: [
          "A clear introduction and skills section",
          "Project cards with outcomes and evidence",
          "Accessible contact and navigation links"
        ],
        nextStep: "Sketch the page sections on paper before writing the first HTML elements."
      },
      {
        area: "web",
        difficulty: "intermediate",
        title: "Help Desk Ticket Dashboard",
        description: "Build a browser dashboard that organizes sample support tickets by priority, status, and category.",
        deliverables: [
          "A ticket summary with useful totals",
          "Filters for priority and status",
          "A responsive ticket list for narrow screens"
        ],
        nextStep: "Define five sample tickets and the fields each ticket needs."
      },
      {
        area: "cybersecurity",
        difficulty: "beginner",
        title: "Phishing Awareness Quiz",
        description: "Create an educational quiz that asks users to identify common warning signs in fictional messages.",
        deliverables: [
          "Five fictional message examples",
          "Immediate feedback for every answer",
          "A final score with practical safety reminders"
        ],
        nextStep: "Write one fictional message and list the clues a learner should notice."
      },
      {
        area: "cybersecurity",
        difficulty: "intermediate",
        title: "Security Incident Timeline",
        description: "Visualize a fictional security incident so a viewer can follow detection, response, recovery, and lessons learned.",
        deliverables: [
          "A time-ordered incident view",
          "Severity and status labels",
          "A lessons-learned summary"
        ],
        nextStep: "Create six fictional incident events with timestamps and short descriptions."
      },
      {
        area: "cloud",
        difficulty: "beginner",
        title: "Cloud Architecture Explorer",
        description: "Create an interactive diagram that explains how a small web application could separate its interface, logic, and data.",
        deliverables: [
          "Three clearly labeled architecture layers",
          "Clickable explanations for each layer",
          "A short description of how a request moves through the system"
        ],
        nextStep: "Draw three boxes for interface, logic, and data, then describe the role of each box."
      },
      {
        area: "cloud",
        difficulty: "intermediate",
        title: "Deployment Readiness Checklist",
        description: "Build a checklist that helps a small team review reliability, security, monitoring, and recovery before a deployment.",
        deliverables: [
          "Grouped readiness questions",
          "A completion score that updates automatically",
          "A summary of unfinished checks"
        ],
        nextStep: "Write three readiness questions for each of the four review areas."
      },
      {
        area: "data",
        difficulty: "beginner",
        title: "Study Progress Dashboard",
        description: "Turn sample study-session records into a visual summary of time spent, topics covered, and weekly progress.",
        deliverables: [
          "A small sample dataset",
          "Summary totals by topic",
          "A clear weekly progress view"
        ],
        nextStep: "Create ten fictional study records with a date, topic, and duration."
      },
      {
        area: "data",
        difficulty: "intermediate",
        title: "IT Support Trend Analyzer",
        description: "Analyze a sample set of support requests to reveal frequent issue categories and changes over time.",
        deliverables: [
          "A cleaned sample support dataset",
          "Issue totals grouped by category",
          "A written summary of two patterns in the data"
        ],
        nextStep: "Define the columns for a sample support-request dataset before collecting records."
      }
    ];

    const areaSelect = document.getElementById("area");
    const difficultySelect = document.getElementById("difficulty");
    const generateButton = document.getElementById("generateButton");
    const resultCard = document.getElementById("resultCard");
    const ideaTitle = document.getElementById("ideaTitle");
    const ideaDescription = document.getElementById("ideaDescription");
    const deliverableOne = document.getElementById("deliverableOne");
    const deliverableTwo = document.getElementById("deliverableTwo");
    const deliverableThree = document.getElementById("deliverableThree");
    const ideaNextStep = document.getElementById("ideaNextStep");

    function showIdea(idea) {
      if (!idea) {
        return;
      }

      ideaTitle.textContent = idea.title;
      ideaDescription.textContent = idea.description;
      deliverableOne.textContent = idea.deliverables[0];
      deliverableTwo.textContent = idea.deliverables[1];
      deliverableThree.textContent = idea.deliverables[2];
      ideaNextStep.textContent = idea.nextStep;
      resultCard.classList.remove("hidden");
    }

    function generateIdea() {
      const selectedIdea = ideas.find((idea) =>
        idea.area === areaSelect.value &&
        idea.difficulty === difficultySelect.value
      );

      showIdea(selectedIdea);
    }

    generateButton.addEventListener("click", generateIdea);
  </script>
</body>
</html>

How to Use This Reference

Compare this file with your saved index.html from top to bottom. Keep every identifier plus value exactly as shown.

That is the behavior gap closed. Your generator now turns two visitor choices into a complete project recommendation.

Next up, you will publish the finished app with GitHub Pages so other people can try it.

Publish the App with GitHub Pages

Your generator now returns a complete project idea for every area and difficulty combination. The next goal is to give the app a public address that other people can visit.

A local file proves the app works on your computer. A public deployment turns that result into evidence you can share with classmates, collaborators, or employers.

A public GitHub repository stores the completed file. GitHub Pages serves that file as a website.

In this step, get ready to:
  • Create a public repository with a README.
  • Commit the completed index.html file to the repository.
  • Configure GitHub Pages and verify the live generator.
Create the public repository

GitHub Pages needs a repository containing the files it publishes. The public repository also gives your project a permanent home for its code and documentation.

Keep Public Files Safe

Your repository and deployed site are visible to anyone. Keep passwords, API keys, personal contact details, and other sensitive information out of every committed file.

  • Switch to the browser from earlier.
  • Open a new browser tab.
  • Go to the GitHub website.
  • Complete GitHub's sign-in flow with your existing account.
  • Select New repository from your GitHub dashboard.
  • Enter it-project-idea-generator as the repository name.
  • Set the repository visibility to public.
  • Turn Add README on.

The form should now show the repository name, public visibility, and the README option.

  • Select Create repository.

Good progress. Your public it-project-idea-generator repository now opens on the main branch with a GitHub-created README.md file.

Commit the completed app

GitHub Pages looks for an entry file such as index.html when it publishes a site. Your completed local file already contains the responsive interface and generator logic.

  • Switch back to Visual Studio Code from earlier.
  • Return to the open index.html tab.
  • Press Ctrl+A to select the entire file.
  • Press Ctrl+C to copy the selected code.
  • Return to the browser tab containing your GitHub repository.
  • Select Add file above the repository file list.
  • Select Create new file.

You should see GitHub's file editor with fields for a filename and file content.

  • Enter index.html as the filename.
  • Press Ctrl+V to paste the completed file.
  • Select Preview above the editor.

The preview confirms that GitHub accepted the completed file content before you commit it.

  • Select Commit changes....
  • Enter Add completed project idea generator as the commit message.
  • Keep the current-branch option selected.

The commit dialog should show the current main branch as the destination.

  • Confirm the commit in the dialog.

You should return to the repository file list. It now contains index.html and README.md on the main branch.

✔️ Awesome, I've got everything!

Your repository now contains the completed generator and its README. You are ready to publish the site.

ⓧ I'd like to double check the full code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>IT Project Idea Generator</title>
  <style>
    :root {
      color-scheme: dark;
      --background: #08111f;
      --surface: #111d30;
      --surface-light: #182842;
      --text: #f5f7fb;
      --muted: #a9b7cb;
      --accent: #66e3c4;
      --accent-dark: #08241e;
      --border: #2a3b55;
    }

    * {
      box-sizing: border-box;
    }

    body {
      min-height: 100vh;
      margin: 0;
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at top left, #17355c 0, transparent 35%),
        var(--background);
    }

    main {
      width: min(920px, calc(100% - 32px));
      margin: 0 auto;
      padding: 64px 0;
    }

    .hero {
      max-width: 700px;
      margin-bottom: 32px;
    }

    .eyebrow,
    .result-label {
      margin: 0 0 8px;
      color: var(--accent);
      font-size: 0.8rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    h1,
    h2,
    h3,
    p {
      margin-top: 0;
    }

    h1 {
      margin-bottom: 16px;
      font-size: clamp(2.4rem, 8vw, 4.8rem);
      line-height: 0.98;
    }

    .hero p:last-child {
      max-width: 620px;
      color: var(--muted);
      font-size: 1.05rem;
      line-height: 1.7;
    }

    .generator-panel,
    .result-card {
      padding: 28px;
      border: 1px solid var(--border);
      border-radius: 22px;
      background: rgba(17, 29, 48, 0.92);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    }

    .controls {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
      margin: 24px 0;
    }

    .control {
      display: grid;
      gap: 8px;
    }

    label {
      color: var(--muted);
      font-size: 0.92rem;
      font-weight: 700;
    }

    select,
    button {
      width: 100%;
      min-height: 48px;
      border-radius: 12px;
      font: inherit;
    }

    select {
      padding: 0 14px;
      border: 1px solid var(--border);
      color: var(--text);
      background: var(--surface-light);
    }

    button {
      border: 0;
      color: var(--accent-dark);
      background: var(--accent);
      font-weight: 800;
      cursor: pointer;
    }

    button:hover {
      filter: brightness(1.08);
    }

    button:focus-visible,
    select:focus-visible {
      outline: 3px solid #ffffff;
      outline-offset: 3px;
    }

    .result-card {
      margin-top: 24px;
    }

    .result-card h2 {
      margin-bottom: 12px;
      font-size: clamp(1.8rem, 5vw, 2.7rem);
    }

    .result-card > p:not(.result-label),
    .result-card li {
      color: var(--muted);
      line-height: 1.65;
    }

    .result-card h3 {
      margin: 24px 0 10px;
    }

    .result-card ul {
      padding-left: 22px;
    }

    .hidden {
      display: none;
    }

    @media (max-width: 640px) {
      main {
        padding: 36px 0;
      }

      .controls {
        grid-template-columns: 1fr;
      }

      .generator-panel,
      .result-card {
        padding: 22px;
      }
    }
  </style>
</head>
<body>
  <main>
    <section class="hero">
      <p class="eyebrow">AI-assisted portfolio builder</p>
      <h1>Find your next IT project</h1>
      <p>
        Choose an IT area and a difficulty level to generate a focused project
        you can build, test, and discuss in your portfolio.
      </p>
    </section>

    <section class="generator-panel" aria-labelledby="generator-title">
      <h2 id="generator-title">Generate an idea</h2>

      <div class="controls">
        <div class="control">
          <label for="area">IT area</label>
          <select id="area">
            <option value="web">Web Development</option>
            <option value="cybersecurity">Cybersecurity</option>
            <option value="cloud">Cloud Computing</option>
            <option value="data">Data Analytics</option>
          </select>
        </div>

        <div class="control">
          <label for="difficulty">Difficulty</label>
          <select id="difficulty">
            <option value="beginner">Beginner</option>
            <option value="intermediate">Intermediate</option>
          </select>
        </div>
      </div>

      <button id="generateButton" type="button">Generate project idea</button>
    </section>

    <article id="resultCard" class="result-card hidden" aria-live="polite">
      <p class="result-label">Your project idea</p>
      <h2 id="ideaTitle"></h2>
      <p id="ideaDescription"></p>

      <h3>What you will build</h3>
      <ul>
        <li id="deliverableOne"></li>
        <li id="deliverableTwo"></li>
        <li id="deliverableThree"></li>
      </ul>

      <h3>First action</h3>
      <p id="ideaNextStep"></p>
    </article>
  </main>

  <script>
    const ideas = [
      {
        area: "web",
        difficulty: "beginner",
        title: "Student Portfolio Site",
        description: "Create a responsive personal site that introduces your skills and presents your best coursework or practice projects.",
        deliverables: [
          "A clear introduction and skills section",
          "Project cards with outcomes and evidence",
          "Accessible contact and navigation links"
        ],
        nextStep: "Sketch the page sections on paper before writing the first HTML elements."
      },
      {
        area: "web",
        difficulty: "intermediate",
        title: "Help Desk Ticket Dashboard",
        description: "Build a browser dashboard that organizes sample support tickets by priority, status, and category.",
        deliverables: [
          "A ticket summary with useful totals",
          "Filters for priority and status",
          "A responsive ticket list for narrow screens"
        ],
        nextStep: "Define five sample tickets and the fields each ticket needs."
      },
      {
        area: "cybersecurity",
        difficulty: "beginner",
        title: "Phishing Awareness Quiz",
        description: "Create an educational quiz that asks users to identify common warning signs in fictional messages.",
        deliverables: [
          "Five fictional message examples",
          "Immediate feedback for every answer",
          "A final score with practical safety reminders"
        ],
        nextStep: "Write one fictional message and list the clues a learner should notice."
      },
      {
        area: "cybersecurity",
        difficulty: "intermediate",
        title: "Security Incident Timeline",
        description: "Visualize a fictional security incident so a viewer can follow detection, response, recovery, and lessons learned.",
        deliverables: [
          "A time-ordered incident view",
          "Severity and status labels",
          "A lessons-learned summary"
        ],
        nextStep: "Create six fictional incident events with timestamps and short descriptions."
      },
      {
        area: "cloud",
        difficulty: "beginner",
        title: "Cloud Architecture Explorer",
        description: "Create an interactive diagram that explains how a small web application could separate its interface, logic, and data.",
        deliverables: [
          "Three clearly labeled architecture layers",
          "Clickable explanations for each layer",
          "A short description of how a request moves through the system"
        ],
        nextStep: "Draw three boxes for interface, logic, and data, then describe the role of each box."
      },
      {
        area: "cloud",
        difficulty: "intermediate",
        title: "Deployment Readiness Checklist",
        description: "Build a checklist that helps a small team review reliability, security, monitoring, and recovery before a deployment.",
        deliverables: [
          "Grouped readiness questions",
          "A completion score that updates automatically",
          "A summary of unfinished checks"
        ],
        nextStep: "Write three readiness questions for each of the four review areas."
      },
      {
        area: "data",
        difficulty: "beginner",
        title: "Study Progress Dashboard",
        description: "Turn sample study-session records into a visual summary of time spent, topics covered, and weekly progress.",
        deliverables: [
          "A small sample dataset",
          "Summary totals by topic",
          "A clear weekly progress view"
        ],
        nextStep: "Create ten fictional study records with a date, topic, and duration."
      },
      {
        area: "data",
        difficulty: "intermediate",
        title: "IT Support Trend Analyzer",
        description: "Analyze a sample set of support requests to reveal frequent issue categories and changes over time.",
        deliverables: [
          "A cleaned sample support dataset",
          "Issue totals grouped by category",
          "A written summary of two patterns in the data"
        ],
        nextStep: "Define the columns for a sample support-request dataset before collecting records."
      }
    ];

    const areaSelect = document.getElementById("area");
    const difficultySelect = document.getElementById("difficulty");
    const generateButton = document.getElementById("generateButton");
    const resultCard = document.getElementById("resultCard");
    const ideaTitle = document.getElementById("ideaTitle");
    const ideaDescription = document.getElementById("ideaDescription");
    const deliverableOne = document.getElementById("deliverableOne");
    const deliverableTwo = document.getElementById("deliverableTwo");
    const deliverableThree = document.getElementById("deliverableThree");
    const ideaNextStep = document.getElementById("ideaNextStep");

    function showIdea(idea) {
      if (!idea) {
        return;
      }

      ideaTitle.textContent = idea.title;
      ideaDescription.textContent = idea.description;
      deliverableOne.textContent = idea.deliverables[0];
      deliverableTwo.textContent = idea.deliverables[1];
      deliverableThree.textContent = idea.deliverables[2];
      ideaNextStep.textContent = idea.nextStep;
      resultCard.classList.remove("hidden");
    }

    function generateIdea() {
      const selectedIdea = ideas.find((idea) =>
        idea.area === areaSelect.value &&
        idea.difficulty === difficultySelect.value
      );

      showIdea(selectedIdea);
    }

    generateButton.addEventListener("click", generateIdea);
  </script>
</body>
</html>

What Should the File Contain?

This reference is the exact completed index.html file. It includes the page structure, responsive styling, eight idea objects, DOM constants, both generator functions, and the button event listener.

Deploy the public site

The publishing source tells GitHub Pages which branch and folder contain the website. You will publish from the main branch and the repository root.

  • Select Settings from the repository navigation.
  • Select Pages from the settings sidebar.

You should see the Pages settings with a Build and deployment section.

  • Choose Deploy from a branch as the publishing source.
  • Select main as the branch.

The source row should now show main as the branch that GitHub Pages publishes.

  • Select /(root) as the folder.
  • Select Save.

Publishing can take up to 10 minutes, so a short wait here is normal. GitHub is turning the committed static files into your public site.

  • Refresh the Pages settings until Visit site appears.
  • Select Visit site.

Your public page should load with the same two selectors and generator button as the local version.

Before you test the deployment, do you expect the public copy to return the same project as your local file?

  • Select Cloud Computing from the IT area selector.
  • Select Intermediate from the difficulty selector.
  • Select Generate project idea.

You should see Deployment Readiness Checklist with its matching description, three deliverables, and first action. That confirms the public deployment serves the completed app and its JavaScript behavior.

That is the final build milestone complete. Your IT Project Idea Generator is live and ready to share from its public GitHub Pages address.

Secret mission

Turn the Build into a Portfolio Case Study

Your generator is live for anyone to try. Now turn its build story into a concise README case study that shows how you directed ChatGPT, found a limitation, tested the fix, and verified the public result.

Clean Up Your Resources

Clean Up Your Resources

Decide whether to keep your resources running, pause them to come back later, or delete them entirely. This project path costs $0.

Keep Public Content Safe

Your GitHub repository is public. Your GitHub Pages site is also public.

Keep passwords, API keys, personal contact details, and other sensitive information out of both resources.

Resources you used:

  • Local project folder: Documents\it-project-idea-generator.
  • Public repository: it-project-idea-generator on branch main. It contains the completed index.html plus the evidence-based README.md.
  • GitHub Pages deployment: public site published from main using /(root).

Keep everything running

No action is needed. Choose this option while the live app remains useful as portfolio evidence.

  • Keep the public repository available with its completed app and case study.
  • Leave the GitHub Pages deployment live so visitors can test the generator.
  • Retain Documents\it-project-idea-generator as your editable local copy.

Pause - I'll come back to this later

Unpublish the public site to pause the live showcase. Your repository content and local files remain available.

  • Return to the it-project-idea-generator repository on GitHub.
  • Select Settings from the repository navigation.
  • Select Pages from the settings sidebar.
  • Open the menu beside Your site is live at.
  • Select Unpublish site.
  • Confirm the unpublishing action if GitHub asks.
  • Confirm the Pages area no longer presents the deployment as live.

You have paused the public showcase without losing the completed app or its case study.

Delete - I don't want to use this again

This option removes the online project plus your local copy. Deleting the repository is permanent.

Your local folder stays available during the online cleanup. You remove it only after the repository is gone.

  • Return to the it-project-idea-generator repository on GitHub.
  • Select Settings from the repository navigation.
  • Select General from the settings sidebar.
  • Scroll to Danger Zone.
  • Select Delete this repository.
  • Acknowledge the deletion warnings.
  • Type it-project-idea-generator as the repository name.
  • Select Delete this repository to confirm the deletion.

The repository and its GitHub Pages deployment are now removed. Your online project no longer remains public.

  • Return to your Documents folder in File Explorer.
  • Select the it-project-idea-generator folder.
  • Press the Delete key.
  • Confirm the deletion if Windows asks.
  • Confirm it-project-idea-generator is no longer listed in Documents.

That completes the cleanup. The public deployment, repository, and local project folder are removed.

Nice Work!

Nice Work!

You did it. Your IT Project Idea Generator now turns a visitor's area and difficulty choices into a matching project idea on a live GitHub Pages site.

What you learned:

  • Used structured prompting to give ChatGPT a Goal, Context, Output, and Boundaries. You reported the inert button with clear reproduction steps. You verified the correction across multiple selector combinations.
  • Built a responsive browser interface with HTML, CSS, and JavaScript. The selectors now display a matching title, description, deliverables, and first action without reloading the page.
  • Published the completed app from a public GitHub repository. Your live deployment gives you shareable evidence of your AI-assisted development workflow.
  • Secret Mission: Turned README.md into an evidence-based portfolio case study that separates your decisions and verification from ChatGPT's contribution.

Ready to quiz yourself?