1. Sketch the page regions

Before coding, identify these five regions in your existing screen:

• a plant display
• an inputs panel
• an outputs panel
• a short photosynthesis explanation
• a page heading

The plant display and the two panels are the main regions JavaScript will need to find later. Give each one a clear semantic element rather than placing everything inside anonymous <div> elements.

2. Replace the main JSX with a semantic skeleton

Adapt this skeleton to your project. Keep your existing styling setup, but replace the placeholder comments with your own content.

return (
  <main>
    <header>
      <h1>Plant Simulator</h1>
      {/* Add a short subtitle for the simulator */}
    </header>

    <section aria-labelledby="plant-display-heading">
      <h2 id="plant-display-heading">Plant</h2>
      {/* Add the plant image, illustration, or plant placeholder here */}
    </section>

    <section aria-labelledby="inputs-heading">
      <h2 id="inputs-heading">Inputs</h2>

      <form>
        <fieldset>
          <legend>Environmental conditions</legend>

          {/* Add the light control here */}

          {/* Add the water control here */}

          {/* Add the carbon dioxide control here */}
        </fieldset>
      </form>
    </section>

    <section aria-labelledby="outputs-heading">
      <h2 id="outputs-heading">Outputs</h2>
      {/* Add the simulator result values here */}
    </section>

    <aside aria-labelledby="explanation-heading">
      <h2 id="explanation-heading">How photosynthesis works</h2>
      {/* Add two or three sentences of explanation */}
    </aside>
  </main>
);

return (
  <main>
    <header>
      <h1>Plant Simulator</h1>
      {/* Add a short subtitle for the simulator */}
    </header>

    <section aria-labelledby="plant-display-heading">
      <h2 id="plant-display-heading">Plant</h2>
      {/* Add the plant image, illustration, or plant placeholder here */}
    </section>

    <section aria-labelledby="inputs-heading">
      <h2 id="inputs-heading">Inputs</h2>

      <form>
        <fieldset>
          <legend>Environmental conditions</legend>

          {/* Add the light control here */}

          {/* Add the water control here */}

          {/* Add the carbon dioxide control here */}
        </fieldset>
      </form>
    </section>

    <section aria-labelledby="outputs-heading">
      <h2 id="outputs-heading">Outputs</h2>
      {/* Add the simulator result values here */}
    </section>

    <aside aria-labelledby="explanation-heading">
      <h2 id="explanation-heading">How photosynthesis works</h2>
      {/* Add two or three sentences of explanation */}
    </aside>
  </main>
);

Check

Run the app and confirm:

• the page has one visible <h1>
• each major region has a visible <h2>
• the browser shows the regions in a sensible order
• the React console has no JSX errors

If a section heading is missing, add it before moving on. Those headings will also make the page easier to navigate with assistive technology.

3. Add the three input controls

Inside the <fieldset>, create one labeled control for each environmental input:

• light
• water
• carbon dioxide

Use a <label> connected to each control with matching htmlFor and id values. In JSX, remember that the attribute is htmlFor, not for.

Give the controls stable, descriptive IDs such as:

• light-input
• water-input
• carbon-dioxide-input

The ID names are not for styling. They give later JavaScript an unambiguous way to read the controls.

Check

In the browser:

1. Move each slider and confirm it responds.
2. Click the word “Light,” “Water,” or “Carbon dioxide.”
3. Confirm the matching slider receives focus.

Then inspect the rendered HTML and verify that every input has:

• a unique id
• a name
• a matching label
• a useful minimum and maximum

4. Give the plant display a meaningful target

Add the plant visual inside the plant section. If you already have an image or plant component, use it. If not, use a temporary placeholder that makes the region visible.

Add a stable target to the element that JavaScript may update later. For example, your plant visual might use:

<figure id="plant-display">
  {/* Put the plant visual here */}
  <figcaption>{/* Describe the current plant state */}</figcaption>
</figure>

<figure id="plant-display">
  {/* Put the plant visual here */}
  <figcaption>{/* Describe the current plant state */}</figcaption>
</figure>

Choose the element that best represents the whole display; don’t add IDs to every wrapper.

Check

Inspect the page and confirm:

• the plant visual appears inside the plant section
• an image has alt text
• the plant display has one stable ID
• the display is understandable even before any JavaScript behavior exists

5. Add output targets

The outputs panel should show where calculated results will appear later. Include at least three outputs related to the simulator, such as:

• photosynthesis rate
• plant health
• oxygen produced

Check

The outputs panel should display a readable value for every result, even though the numbers are still static.

Then inspect the page and confirm each <output> has:

• a unique ID
• a visible label nearby
• a temporary value or placeholder
• a unit where appropriate

6. Write the explanation

Add two or three short sentences in the explanation area. Include:

• light, water, and carbon dioxide as inputs
• glucose and oxygen as products
• the fact that the plant uses light energy to drive the process

Keep this explanation separate from the controls and results. It supports the simulator but is not itself an input or output.

Check

Read the explanation without looking at the controls. It should explain what the simulator is modeling, not just repeat the section title.

7. Test the structure in the browser

Use the browser’s element inspector to verify the final outline. You should be able to find:

main
├── header
│   └── h1
├── section
│   └── h2 Plant
├── section
│   └── h2 Inputs
│       └── form
│           └── fieldset
│               └── legend
├── section
│   └── h2 Outputs
└── aside
    └── h2 How photosynthesis works

main
├── header
│   └── h1
├── section
│   └── h2 Plant
├── section
│   └── h2 Inputs
│       └── form
│           └── fieldset
│               └── legend
├── section
│   └── h2 Outputs
└── aside
    └── h2 How photosynthesis works

Your exact nesting may differ slightly, but the major regions should be present and named.

Finally, test keyboard access:

1. Press Tab repeatedly.
2. Confirm the three inputs receive focus in a sensible order.
3. Confirm there are no unreachable interactive controls.
4. Confirm labels and headings remain visible while you navigate.