Tangy is building your next step
Shaping the lesson around what you want to make.
Tangy is building your next step
Shaping the lesson around what you want to make.
Computer Science
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.
Build it yourself, get guided when you are stuck, and leave with proof you can actually show.
Give the Plant a Live Readout
3 lessonsUse 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.
Turn Photosynthesis into a Working Model
4 lessonsTranslate the essential biology into small, understandable calculations so the project shows why changing one ingredient affects the plant's photosynthesis rate.
Make the Plant Change Over Time
3 lessonsUse the working model to create visible plant growth, giving the simulator a simple time-based experience while keeping the learner on familiar browser JavaScript.
Turn It into a Finished Learning Tool
3 lessonsPolish the simulator so another person can understand the controls, run an experiment, and read the result comfortably on a normal browser screen.
Public lesson
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
Open the folder for your existing plant page. Locate:
Keep both files open. You will add a JavaScript file beside them.
Tasks
Create a new file named:
script.js
script.js
Your file layout may look like this:
plant-page/
├── index.html
├── styles.css
└── script.js
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
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>
<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>
<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
Save the HTML file and script.js. Open the page in your browser, then open Developer Tools:
Ctrl + Shift + JCmd + Option + JIn script.js, add a temporary loading message:
console.log("YOUR PLANT PAGE 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:
script.js.src path matches the file location.Tasks
Look at your plant page and choose an element whose text could represent the simulator’s current state.
Good choices might include:
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")
document.querySelector("YOUR-SELECTOR")
Use a selector that matches your page, such as an existing class or ID.
Tasks
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
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";
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
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
Cannot set properties of null
That means the selector did not find an element. Return to the Console test and correct the selector.
Tasks
With the page showing your new status, run the same selector in the Console:
document.querySelector("YOUR-SELECTOR").textContent
document.querySelector("YOUR-SELECTOR").textContent
Tasks
The Console should return the new text you placed in script.js.
You have now verified three separate connections:
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.
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.