Change opacity of rectangle when button is clicked

[PlaidMan]

HI! I'm new at coding apps, so I'm sorry if this is super obvious, but I'm trying to have a white rectangle appear when I tap one part of the screen, and go away when I tap it again. I'm basically trying to have an invisible on-off switch over half the screen. How do I do it? Here's what I have so far in the index.gui:

<svg viewport-fill="black">
  <text x="75%" y="75%"
        font-family="System-Regular" fill="red"
        font-size="30" font-weight="bold"
        text-anchor="middle">Red</text>
  <text x="25%" y="75%"
        font-family="System-Regular" fill="white"
        font-size="30" font-weight="bold"
        text-anchor="middle">White</text>
  <line x1="149" y1="1" x2="149" y2="300" fill="white" stroke-width="2" />
  <line x1="151" y1="1" x2="151" y2="300" fill="red" stroke-width="2" />
</svg>

And that's basically all the code I have. If anyone could help it would be great.

Thanks!

[JonFitbit · Accepted solution]

You'll want a <rect> with pointer-events="all"

  <rect id="clickRect" x="0" y="0" width="50%" height="100%" fill="blue" pointer-events="all" />

Then you'll want to capture the click event and toggle the visibility

import document from "document";
let clickRect = document.getElementById("clickRect");
clickRect.addEventListener("click", () => {
  clickRect.style.visibility = (clickRect.style.visibility === "visible") ? "hidden" : "visible";
});

https://dev.fitbit.com/build/guides/user-interface/javascript/#hiding-showing-an-element