Build a Photosynthesis Plant Simulator

CO

Built by

core-check2-1784838524666

Computer Science

Build a Photosynthesis Plant Simulator

Build a Photosynthesis Plant Simulator

You already know how to structure a page with HTML and target elements with CSS. Now you will use that foundation to add JavaScript: first making the page respond, then turning the biology of photosynthesis into a small working model, and finally shaping it into an interactive simulator you can run and show.

4 modules13 lessonsComputer Science

What you learn by building this

Build it yourself, get guided when you are stuck, and leave with proof you can actually show.

Learning Journey

1

Give the Plant a Live Readout

3 lessons

Use the learner's existing HTML and CSS project as the visual foundation, then add just enough browser JavaScript to make the simulator respond to data and user actions.

2

Turn Photosynthesis into a Working Model

4 lessons

Translate the essential biology into small, understandable calculations so the project shows why changing one ingredient affects the plant's photosynthesis rate.

3

Make the Plant Change Over Time

3 lessons

Use the working model to create visible plant growth, giving the simulator a simple time-based experience while keeping the learner on familiar browser JavaScript.

4

Turn It into a Finished Learning Tool

3 lessons

Polish the simulator so another person can understand the controls, run an experiment, and read the result comfortably on a normal browser screen.

Public lesson

Connect JavaScript to the Plant Page

Lesson 3.1 — Connect JavaScript to the Plant Page

You already have a semantic plant page with working styles. In this lesson, you will connect a JavaScript file to that page and change one piece of visible text while the page is running. The HTML structure and CSS should stay as they are.

Tasks

1. Find the page’s files

Open the folder for your existing plant page. Locate:

  • the HTML file that opens in the browser
  • the CSS file linked from that HTML file

Keep both files open. You will add a JavaScript file beside them.

Tasks

Create a new file named:

script.js

Your file layout may look like this:

plant-page/
├── index.html
├── styles.css
└── script.js

If your files are in different folders, keep the path consistent with where your HTML file lives.

Tasks

2. Link the new file

In the <head> of your existing HTML file, add a script link. Keep your existing stylesheet link and all page content.

<script src="YOUR-JAVASCRIPT-FILE-PATH" defer></script>

For example, if script.js is beside the HTML file, replace the path with:

<script src="..."></script>

Use defer so the browser waits until it has read the page before running the script.

Do not move or rewrite your existing semantic elements.

Tasks

Check

Save the HTML file and script.js. Open the page in your browser, then open Developer Tools:

  • Windows/Linux: Ctrl + Shift + J
  • macOS: Cmd + Option + J

In script.js, add a temporary loading message:

console.log("YOUR PLANT PAGE MESSAGE");

Reload the page. You should see your message in the Console.

Find the bug

Something's wrong — can you spot it?

If you do not see it:

  1. Check that the filename is exactly script.js.
  2. Check that the src path matches the file location.
  3. Look in the Console for a red “failed to load” message.
  4. Make sure you saved both files before reloading.

Tasks

3. Choose one existing element to update

Look at your plant page and choose an element whose text could represent the simulator’s current state.

Good choices might include:

  • a plant status
  • a watering message
  • a growth stage
  • a care instruction
  • a heading describing the plant

Choose an element that already exists. Do not create a new page section for this step.

Tasks

In the browser Console, test a selector for that element:

document.querySelector("YOUR-SELECTOR")

Use a selector that matches your page, such as an existing class or ID.

Tasks

Check

The Console should show the element you selected.

Find the bug

Something's wrong — can you spot it?

If it shows null, the selector does not match anything. Inspect the element in the Elements panel and adjust the selector until the actual element appears.

Tasks

4. Make one DOM update

Now replace the temporary console message in script.js with one DOM update.

Use this skeleton:

const plantStatus = document.querySelector("YOUR-SELECTOR");

plantStatus.textContent = "YOUR-NEW-PLANT-STATUS";

Adapt both missing parts:

  • YOUR-SELECTOR must target the element you tested.
  • YOUR-NEW-PLANT-STATUS should be a short message that fits the page, such as a changed care or growth state.

Keep the update to one existing element. Do not change the CSS or rebuild the HTML structure.

Tasks

Check

Save script.js and reload the page.

The selected text should now show your new status. The surrounding layout and styling should remain intact.

Find the bug

Something's wrong — can you spot it?

If the page looks unchanged, check the Console for errors. A common error is:

Cannot set properties of null

That means the selector did not find an element. Return to the Console test and correct the selector.

Tasks

5. Confirm the change from the Console

With the page showing your new status, run the same selector in the Console:

document.querySelector("YOUR-SELECTOR").textContent

Tasks

Check

The Console should return the new text you placed in script.js.

You have now verified three separate connections:

  • the HTML page loads the JavaScript file
  • the JavaScript file runs in the browser
  • JavaScript changes an existing DOM element while the page is running

Tasks

Leave your final script.js with the selector and one DOM update, and remove any temporary loading message if you did not already replace it.

Course Outline

4 modules · 13 lessons

Give the Plant a Live Readout

Turn Photosynthesis into a Working Model

Make the Plant Change Over Time

Turn It into a Finished Learning Tool

Learn by building your own version.

Remix this public project to open the workspace, follow the guided build, and let the AI mentor teach you through the work instead of doing it for you.